How the calc () property of CSS degrades in an older browser

Question

Given that the calc () property of CSS is pretty well compatible with most browsers (see http://caniuse.com/calc ), I still wondered how this gets worse in older browsers, especially in the Android browser, because only the latter the version seems to do well with this. I don't really like IE support.

This is more of a general question, but a small example is http://jsfiddle.net/7swVc/

I wonder how these properties will deteriorate:

width:calc(100% - 50px); height:calc(100% - 50px); 

Answer 1

Browsers that do not support CSS3 calc simply ignore an ad that displays an unrecognized value. It will be the same that you never added them to the CSS file.

In your game, the result will be: DEMO

When you use calc , you should always set up backups for browsers that don't support it. So your CSS should look like this:

 width: 600px;/*fallback for browsers dont use support calc*/ width: -webkit-calc(100% - 50px); width: -moz-calc(100% - 50px); width: calc(100% - 50px); 

Answer 2

Browsers that do not support the calculation will use the default height and width, this will not take the width or height value.

Provide fallback width for browsers that don't support calc (), and a 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); }