Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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

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

But the problem with this function is that it doesn't work. I tested this code IE9 and Safari and it didn't work.

Why doesn't it work?

like image 936
Eminence Avatar asked Feb 27 '13 09:02

Eminence


People also ask

How does the Calc function work in CSS?

The calc() function takes a single expression as its parameter, with the expression's result used as the value. The expression can be any simple expression combining the following operators, using standard operator precedence rules: + Addition.

How do I debug a CSS calculator?

So to actually debug CSS variables you can use the helper class that I added below. So then in console you set and read variable like so: CssVariables. setRootVar('--column-max-width', 'calc((90vw - var(--zoomer-width)) / (var(--columns-shown) + 1))'); console.

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?

Can I use Calc for margin CSS?

You can use calc() anywhere where you would use numeric values (e.g.: width, max-height, margin-left, …) Can I Use calc? Data on support for the calc feature across the major browsers from caniuse.com.


1 Answers

The operator - must be surrounded by spaces:

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

Quoting MDN info on calc():

Note: The + and - operators must be surrounded by whitespace. For instance, calc(50% -8px) will be parsed as a percentage followed by a negative length—an invalid expression—while calc(50% - 8px) is a percentage followed by a subtraction operator and a length. Likewise, calc(8px + -50%) is treated as a length followed by an addition operator and a negative percentage.

The * and / operators do not require whitespace, but adding it for consistency is both allowed and recommended.

The formal statement on this is in clause 8.1.1 of the CSS Values and Units Module Level 3 specification.

like image 103
Jukka K. Korpela Avatar answered Sep 21 '22 20:09

Jukka K. Korpela