CSS3 calc () not working in latest chrome

Question

I noticed that my use of the CSS3 calc() function as a device for width does not work in the latest version of Chrome.

In Chrome’s developer tools, a rule with calc() has a strikethrough through it and an exclamation mark in the yellow triangle to its left. This means that the property or value is not recognized.

How do I make it work in modern browsers? Because it's a value, not a property, where do the vendor prefixes go?

Update:

When I say that this does not work, I mean that Chrome Dev Tools says that it does not recognize my use of width: calc(100%-88px); . How do I know that it won’t? Due to the scroll icon and yellow triangle next to the style rule in chrome-dev tools.

Update 2:

Here is a screenshot of what I see in Chrome dev tools: http://cl.ly/image/2g3W1l2u022e

Answer 1

The problem in the question was caused by the lack of space around the subtraction operator.

Note that the grammar requires spaces around the binary '+ and' operators. The '* and' / operators do not require spaces.

https://www.w3.org/TR/css3-values/#calc-syntax

^{I guess this should clearly distinguish between operators and signed numbers.}

Bad: calc(100%-88px)
Good: calc(100% - 88px)

---

How do I know that it won’t? Due to the strikethrough and the yellow triangle icon next to the style rule in chrome dev tools.

The strike property when viewed in the Chrome Developer Tools may be valid, but overridden; however, a property that is broken through and with a warning triangle icon next to it is invalid.

---

Other notes

• Chrome has supported calc() for quite some time (confirmed on OSX and Windows).
• Chrome may not support viewport blocks such as vh / vw inside calc() . As of the end of 2014, there is activity on its implementation, but the related error is still open.
• In my testing, Safari supports calc() with the -webkit provider -webkit for OSX, but not Windows.
• IE9 + supports calc() without a vendor prefix.
• FF supports calc() without a vendor prefix.

Answer 2

Use the -webkit prefix and spaces around the operator

 width: -webkit-calc(100% - 88px); width: -moz-calc(100% - 88px); width: calc(100% - 88px); 

Answer 3

I struggled a bit with the calc property and only worked under the approach.

 -webkit-calc(~'100% - 40px'); // good: result 395px (in my application) 

all the above suggestions, for example:

 -webkit-calc(100% - 40px); // bad: result 60% 

ended with an incorrect calculation, for example, 60%.

Hope this helps someone.