jquery CSS calc() function

Question

i came across this page CSS LINK i could't help but love the idea of that to calculate the outcome of different units... however i tried this :

$('selector').css({'width':'calc(100%-20px)'});

but it doesn't work... anyone has any ideas how this works , or why doesn't this work?

Answer 1

CSS3 is not much supported by current browsers.

Answer 2

jQuery does not support the calc() value, and neither does any of the current browsers.

See a comparison here: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29

In your example, yo can just use margins on the inner element instead:

<div class="parent"><div class="elem"></div></div>

.parent{
    width:100%;
    background:green;
}
.elem{
    margin: 0 10px;
    background:blue;
}

This way, .elem will be 100% - 20px wide.

Answer 3

Some parts of CSS3 are well-supported. Other parts aren't. That's why it has been split into modules, which are in various stages of agreement and implementation. We are a long, long way from even having a complete range of CSS3 specifications, let alone widespread browser support.

So CSS Level 3 Selectors is the most stable specification, having made Recommendation and been implemented by quite a few browsers and other tools (though still, it will take a while for all mainstream browsers to support it well). Several of the other PRs and CRs have enough support in the latest browsers to be of interest.

But “CSS3 Values and Units” is still only an early-stage Working Draft, and is very likely to change significantly before reaching Recommendation. In fact given that no browsers have implemented calc()since the draft was begun years ago, it looks unlikely at this point that this feature will become standard. If you want to stay within the realm of well-supported stuff, you need to stick with CSS 2.1.

In the meantime, saying things like 100%-20px has to be done with nested elements, margins and padding.