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);
calc() The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length> , <frequency> , <angle> , <time> , <percentage> , <number> , or <integer> is allowed.
Safari & iOS Safari (both 6 and 7) do not support viewport units (vw, vh, etc) in calc(). So in your case, try not to use viewport units in calc(), since you will have issues in Safari 6 and 7. Usually with calc() you need to also use the -webkit prefix which is required for Safari 6 and Chrome 19-25 per the spec?
Custom properties and calc are the same computational amount as any other property or relative value, respectively. In short: no more than large amounts of CSS would.
This is also how you can create aspect-ratio locked divs in HTML since you can calculate height from width using padding-top with a percentage value. A solution for you would be to use CSS calc, it has good browser support and fixes your issue in quite a simple manner.
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);
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);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With