Firefox – Stéphane Caron – No Margin For Errors http://www.no-margin-for-errors.com Thu, 07 May 2015 00:40:40 +0000 en-US hourly 1 https://wordpress.org/?v=4.5.12 Firefox to implement calc() in CSS3. http://www.no-margin-for-errors.com/blog/2010/06/14/firefox-to-implement-calc-in-css3/ http://www.no-margin-for-errors.com/blog/2010/06/14/firefox-to-implement-calc-in-css3/#comments Mon, 14 Jun 2010 19:28:18 +0000 http://www.no-margin-for-errors.com/?p=522

Related Posts

No related posts. ]]>
I’ve just read last week that Firefox would implement calc() in their new version of Firefox. It’s not out in any publicly released version yet but it is coming as they talked about it on their developers blog.

Why should you care?

Ever had an element that needed to have a percentage width with padding? Up until now, because of the way the box model works in Firefox modern browsers, you had to wrap the content in a container to which you’d apply the padding. That’s because when you define padding to an element the value is added to the width, which is the proper way of doing it.

Now the thing is that percentage width don’t mix well with fixed padding values, that where calc() comes into play.

Lets say you have a box with the following css rules:
#box {
padding: 20px;
width: 60%;
}

If that box is in a container 1000 pixels wide, the box would be 640 pixels wide total, that’s not what you want, that’s not 60% wide! You coud use calc() to achieve the desired result:
#box {
width: -moz-calc(60% - 40px);
}

You can even be wild and do basic calculations in there:
#box {
width: -moz-calc(60% - 2 * 20px);
}

Taking it further

What would be even cooler is if you could get the actual padding values as a variable in calc(). Something like:
#box {
width: -moz-calc(60% - (padding-left + padding-right));
}

This way you could even forget about updating your width value when you play with your padding.

Oh well, one day maybe, now let’s just see if other browser vendors implement something of the like. Let’s not forget this is not part of the W3C CSS3 specs.

Is it a feature you were waiting for?

]]>
http://www.no-margin-for-errors.com/blog/2010/06/14/firefox-to-implement-calc-in-css3/feed/ 12