Question

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);
Was it helpful?

Solution

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);

OTHER TIPS

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);

}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top