CSS replace value by add pixel to old - css

i have:
#mydiv { height: 100px; }
i want to change height by replace, but i have to add e.g. 50 px
#mydiv { height: OLD_VALUE + 50px; }
Is it possible without js?

I don't think so. You have to use JS for this.
But you can use margins or paddings to increace distance in certain direction
P.S. In JS you can use +=50px for that

You can use CSS3 calc though you'll need to be wary of support

You can't -- CSS doesn't have any notion of this. While you may be able to do something like using CSS3 variables and calc, it would require the original CSS file to use the variables.
First file:
:root {
var-height: 100px;
}
#myDiv {
height: var(height);
}
Your file:
#myDiv {
height: calc(var(height) + 50px);
}
The best/typical approach to this would be to do it via Javascript, or otherwise something like SASS.

Related

Is it possible to create a Sass Function for getting attribute from class name

I am using HTML dividers like this
<div class="divider-90"></div>
<div class="divider-180"></div>
and
.divider-90 {
height: 90px;
width: 100%;
}
.divider-180 {
height: 180px;
width: 100%;
}
instead of margins on elements.
I want to create a function that generates the div height depending on the class name.
Thank you in advance.
Since SASS generates CSS, and with CSS you can't have dynamic class name, SASS won't be able to do it, but you so something like this (i personally don't like this solution):
#for $i from 1 through 1000{
.divider-#{$i} {
height: #{$i}px;
width: 100%;
}
}
I personally don't like this solution because it will blow your CSS file size, and so it will takes a lot longer to be loaded and parsed, so please, consider using some "chunk based" version, something like every 10px instead every 1px
If you really really need this functionality, i think the best solution will be to use some JS script do generate this height automatically when the page is loaded

CSS height:auto for all types except SVG

don't know if it is possible, but I'd like to scale all images on my site with the following:
.myClass img {
height: auto;
}
However, all *.svg-files shouldn't match that pattern. Is there a way to do this via native css?
I found something like this:
.myClass img[src$=".svg"] {height: auto;}
But that seems to trigger only for svg-files. Trying to use != seems to be syntactically incorrect.
For this you'll want to refer to the attribute-selector.
Example:
.myclass[src$=".svg"]
Reference;
http://www.w3schools.com/css/css_attribute_selectors.asp
Edit;
Just saw your edit.
In css you can also use a :not(selector)
example:
.myclass:not([src$=".svg"]);
.myClass img {
height: auto;
}
.myClass img[src$=svg i] {
height: 100px;
}
first set height to all images, then reset the setting for all images having src with suffix svg case insensitively

Captcha Built-In CSS Issue

The recaptcha i'm using have a built-in css of
#recaptcha_area, #recaptcha_table {
width: 318px !important;
}
I see this when I use firebug.
My problem is
how can I override the built-in width? I've tried to place css code on my stylesheet like
#recaptcha_area, #recaptcha_table {
width: 207px !important;
}
but it doesn't work. Is there other way to override?
You should avoid using !important to override things.
You can't tell the recaptcha what it's width should be; however, you can specify a maximum width instead:
#recaptcha_area, #recaptcha_table {
max-width: 207px;
}
Note thought this might break the recaptcha area.

In CSS or SASS, is using "#foo #bar { width: 200px }" not recommended for increased file size?

Short question is: is the following (an id under another id) not recommended for bloating up the CSS file size?
#product-box #product-photo { width: 200px }
details:
Sometimes in SASS, we might have
#product-box
margin-top: 20px
#product-photo
width: 200px
this way, it means it is "nested" -- that is, #product-photo's style of width 200px is only true within #product-box, and the CSS generated from the SASS is
#product-box { margin-top: 20px }
#product-box #product-photo { width: 200px }
but here we have a redundant #product-box before #product-photo, because #product-photo by itself can uniquely identify the element already.
As a result, the CSS file can become bloated. I wonder if it is recommended to un-indent #product-photo in the SASS file, so that it doesn't need to be nested?
I think we could have a .photo class inside #product-box instead... is it true? But in some cases, we might have 2 photos, or 2 li inside a #product-box, and so using a class cannot uniquely identify an element. If we use jQuery, it is true we can say $('#product-box li:eq(2) to get to any element, but it may introduce bug if somebody add another li without knowing the jQuery code depends on it. Having an id will prevent such bug from happening.
if you're selecting an element by its id, you don't need to have a nested selector - the id has to be uique everytime. if you have a class that has a different style depending on it's parent, you have to use such a nestes selector (but, if a class has the same style in every case, you can drop the parent-selector, too).
example:
#product-box #product-photo { width: 200px }
is the same as
#product-photo { width: 200px }
you could also use a class for that:
.photo { width: 200px }
but: if a photo has a different size in some cases, you have to do something like this:
#product-box .photo { width: 200px }
#another-box .photo { width: 150px }
or, alternatively, define a "default" and a special case:
.photo { width: 200px } // the default
#another-box .photo { width: 150px } // special size for photos inside #another-box
note: i have no idea how to do this in sass (i have no idea what sass is), but i hope this is helping you anyway.
note2: you shouldn't worry about this small effect on the css file-size until you have realy, realy, realy much traffic on your site - it's much more important that everything is readable and easy to understand, otherwise you will get in hell if you have to change something in the future (also, if you wan't to decrease you filesize as much as possible, why do you use such long ids? for breaking that down, wouldn't it be the best to use #a #b #c #d... and so on?)

Chaining CSS rules

I have defined some background colors that I'll be using on my site. So I can easily set the background color of different elements like:
.background_highlite{
background-color: rgb(231, 222, 207); /*Cream in my Coffee*/
}
.background_shadow{
background-color: rgb(201, 179, 156); /*Moose Mousse*/
}
Now, if I want all textarea elements on my page to have Moose Mousse color as their background I want to write another CSS rule that references back to .background_shadow, so I only have to change the rgb values in one place.
Something like:
textarea{
height:50px;
background-color: background_highlite /* want to feed forward to keep the rgb in one place */
}
Is this possible with CSS?
People have been frustrated by CSS's simplistic structure, and have created pre-processors to write CSS more conveniently. Look at Less, for example, or CleverCSS.
You can assign all the elements the same class, and then set the background color in the class's CSS:
<textarea class="background_shadow">blah</textarea>
Keep in mind that you can assign a number of classes to any element, so you can use one class just to control the background color, and then use other classes for your other needs:
<textarea class="background_shadow another_class something_else">...</textarea>
Not really. http://dorward.me.uk/www/css/inheritance/ lists your main options.
Sorry, no. CSS does not support variables, or chaining.
however, there is a javascript library that allows that. http://lesscss.org/
The best you can do would be
.hilight textbox {
background: black;
}
textbox {
color: pink;
}
.background_shadow {
background: grey;
}
Or, of course, you could add the .hilite class to your div.
You have two options to work with:
Native CSS, which is possible, but not good to maintain.
Preprocessor, like xCSS, which can create more cleaner code and provide variables.
For simple projects I assume, native CSS will be good. But in more complicated it`s best to use some sort of processors, like pals talked earlier.
In this method you can always use some human readable rule like:
.blabla {min-height: 20px}, which pre-processor by your own logic transform to CSS, that all of our target browsers can understand, like .blabla {min-height: 20px; height: auto !important; height: 20px;} etc.
Also what I realy like in preprocessors is that you can right code, as here:
.specialClass extends .basicClass {} // see more at extends
.selector {
a {
display: block;
}
strong {
color: blue;
}
} // see more at children
or what you needed is vars {
$path = ../img/tmpl1/png;
$color1 = #FF00FF;
$border = border-top: 1px solid $color1;
} // see more at vars

Resources