Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How does calc() CSS property degrade in older browser

Tags:

html

css

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);
like image 617
singe3 Avatar asked Aug 01 '14 09:08

singe3


People also ask

What does CALC () do in CSS?

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.

Does Calc work in Safari?

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?

Is CSS calc slow?

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.

Can I use Calc in padding?

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.


2 Answers

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);
like image 78
laaposto Avatar answered Sep 21 '22 10:09

laaposto


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

}
like image 40
4dgaurav Avatar answered Sep 21 '22 10:09

4dgaurav