7

Considering that the calc() CSS property is rather well compatible with most browsers ( cf. http://caniuse.com/calc) I was still wondering how it degrades in older browsers, especially on Android browser because only the last version seems to handle it well. I don't care very much about IE support.

It's rather a general question but here is a little example http://jsfiddle.net/7swVc/

I wonder how these properties will degrade :

width:calc(100% - 50px);
height:calc(100% - 50px);
2
  • why not use padding or margin?
    – Wreeecks
    Commented Aug 1, 2014 at 9:47
  • Because when you have for example a menu bar of 100px height and you want to make the following block occupy the reste of the page with height:calc(100% - 100px), this property is really useful
    – singe3
    Commented Aug 1, 2014 at 9:49

2 Answers 2

5

Browsers that doesn't support CSS3 calc will just ignore the declaration where an unrecognized value appears. It will be the same as you have never included them in the CSS file.

In your fiddle the result will be like this: DEMO

When you use calc you have always to set up a fallback for browsers that dont support it. So your CSS should be like:

width: 600px;/*fallback for browsers dont use support calc*/
width: -webkit-calc(100% - 50px);
width: -moz-calc(100% - 50px);
width: calc(100% - 50px);
2
  • 1
    -o-calc() does not exist and can be removed.
    – BoltClock
    Commented Aug 1, 2014 at 9:55
  • 2
    To be exact, by CSS error handling principles, the declaration where an unrecognized value appears is ignored, not the entire rule. Commented Aug 1, 2014 at 10:12
2

Browsers that doesn't support calc will take the height and width as default, it will not take the value of width or height given.

Provide a fallback width for browsers that don’t support the calc() function, and the vendor prefix for Firefox 4.

div {    
    background:lime;

    width: 96%; /* Fallback for browsers that don't support the calc() function */

    height: 96%; /* Fallback for browsers that don't support the calc() function */

    width: -webkit-calc(50% - 50px); 
    width: -moz-calc(100% - 50px); /* vendor prefix for FF 4 */
    width: calc(100% - 50px);

    height: -webkit-calc(50% - 50px);
    height: -moz-calc(100% - 50px);      
    height: calc(100% - 50px);

}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.