Why doesn't the CSS calc() function work for me?

Question

I learned about the CSS function calc() and its awesome. I tried to use it like:

#abc{width:calc(100%-20px)}
<         


        

Answer 1

With the latest version of Modernizr you can check csscalc support. Simply use Modernizr.csscalc. This function will return true if it is supported and false if it isn't. In your case you would have this in your css :

#abc {  width:calc(100% - 20px); }

and in your javascript (I am using jQuery here)

if(!Modernizr.csscalc){
    $('#abc').width($(PARENT_EL).width() - 20)
}

BTW. It is better to style your elements with class names rather than ID. The ID of an element should only be used to target it through javascript.

Answer 2

In order for your function to work you need to have spaces between the operator sign.

For example:

#abc{
  width: calc(100% - 20px)
}

The calc() article provides a further detailed explanation of the issue.

Answer 3

It is supported by IE9, IE10 and Safari 6.0 (using -webkit- prefix). You can check whole support table here: http://caniuse.com/#feat=calc