CSS3 calc(100%-88px) not working in Chrome
css, google-chrome
Solution
The problem in the question was caused by the lack of space around the subtraction operator.
Note that the grammar requires spaces around binary ‘+’ and ‘-’ operators. The ‘*’ and ‘/’ operators do not require spaces.
https://www.w3.org/TR/css3-values/#calc-syntax
This article mentions that the spacing is necessary for unambiguous parsing.
Bad: `calc(100%-88px)` Good: `calc(100% - 88px)`
How do I know it is not recognizing it? Because of the strikethrough and the yellow triangle icon next to the style rule in chrome dev tools.
A property that is struck through when viewed in Chrome's developer tools may be valid but overridden; however, a property struck through and with a warning triangle icon next to it is invalid.
2022 Update - `calc()` is supported by all modern browsers in a wide variety of scenarios, though proper spacing is still required.
Problem
I noticed that my usage of the CSS3 `calc()` function as the unit for `width` is not working in the latest version of Chrome. In the Chrome Developer tools, the rule with `calc()` has a strikethrough through it and an exclamation mark in a yellow triangle to the left of it. This is signaling that the property or value is not recognized. How do I get it to work in modern browsers? Because it is a value and not a property, where do the vendor prefixes go? Update: When I say it doesn't work, I mean that Chrome Dev Tools is saying that it is not recognizing my usage of it `width: calc(100%-88px);`. How do I know it is not recognizing it? Because of the strikethrough and the yellow triangle icon next to the style rule in chrome dev tools.