Firefox to implement calc() in CSS3.

June 14th 2010

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?

26 Responses to “Firefox to implement calc() in CSS3.”

  1. […] This post was mentioned on Twitter by Stephane Caron, montrealhackers. montrealhackers said: Firefox to implement calc() in CSS3. […]

  2. guest says:

    firefox not fast browser, and error of nature. )) value like -moz-* i think not valid by validation w3c. use this values may requires fixes for IE ((

  3. Appreciate your taking this possiblity to mention this, I feel strongly over it and I benefit from studying this subject. If at all possible, while you gain data, please update this site with new information. I have found it extremely useful.

  4. You made some decent points there. I looked on the web for the problem and found most people will associate with with your website.

  5. shak says:

    I was very plefased to find this web-site.I wanted to thanks for your time for this wonderful read!! I definitely enjoying every little bit of it and I have you bookmarked to check out new stuff you blog post.

  6. I happen to be commenting to let you understand of the notable encounter my wife’s princess undergone browsing your web page. She figured out lots of issues, which include how it is like to possess a wonderful teaching mindset to let many more really easily know precisely a variety of extremely tough issues. You really did more than her desires. I appreciate you for coming up with such great, safe, explanatory not to mention unique guidance on the topic to Tanya.

  7. hairloss says:

    “Is it a feature you were waiting for?”

    Yes thanks very much.

  8. interesting says:

    It’s best to participate in a contest for top-of-the-line blogs on the web. I will advocate this site!

  9. When I originally commented I clicked the -Notify me when new comments are added- checkbox and now each time a comment is added I get four emails with the same comment. Is there any way you can remove me from that service? Thanks!…

  10. friend I really appreciate this post. I`ve been looking all over for this! Thank goodness I found it on Google. You`ve made my day! Thank you again

  11. Having issues with css padding in many of my websites… Any suggestions on how to fix it?

  12. Tin says:

    Hi there, just loved your projects, Ii will test them and do a donation later . see ya

  13. Get free psn code generator and free psn codes,

  14. Richardrobert says:

    Nowadays, although, CSS is achieved in its very own thread and is optimized all to hell. dis is especially real with Firefox’s new Quantum architecture. Its CSS rendering is amazing. Law Essay Help UK

  15. Akki12 says:

    Hi everyone if you are like the online games and the games are play the more time when you are alone in the house to play the best games series of this website
    online hearts because this is the ultimate uses of thus website and play the more games.

  16. imgrum says:

    Thank you! I hope to see more updates from you. Firefox changed a lot from 2010, with new appearance and I think the speed is improved a little.

  17. happy wheels says:

    I agree with your opinion, I’m sure your ideas will be successful in the future!

  18. Jade Wyatt says:

    Amazing post, Thanks for sharing this wonderful information!
    Dissertation Help London

  19. Faith Coles says:

    With our best Dissertation Help London services, we take immense pride in being the first choice of thousands of students from across the globe.

  20. Before you read on, we figured you may seize the opportunity to download our 3 Positive CBT Exercises to no end.

  21. samuelddarden says:

    I am going to this website for future updates.

  22. Savannah Addison says:

    As a ndis support melbourne, Authentic life care can help participants get the support they need. We can help you understand the NDIS plan and move towards achieving your goals.

  23. Leon76 says:

    Hi! I use smartphone spy app to joke my friends and i definitely recommend this app for everyone. I use this app to know where is my kid. I like this app because i can use it from my phone to spy any another. This app works really good so try it now if you need.

  24. Tracy Hoggard says:

    CSS is awesome and most of the developers implement their knowledge and skills in different projects. I am a professional digital marketing expert, therefore, I need to learn more details on how to get connected with the downblouse for having more wonderful girls around the cities.

  25. Tracy Hoggard says:

    CSS is awesome and most of the developers implement their knowledge and skills in different projects. I am a professional digital marketing expert, therefore, I need to learn more details on how to get connected with the for having more wonderful girls around the cities.

Leave a Reply