77

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.

Community
  • 1
  • 1
Irfan Mir
  • 2,107
  • 8
  • 27
  • 33
  • 2
    Effectively the same as https://stackoverflow.com/questions/30412580/why-is-css-calc100-250px-not-working and https://stackoverflow.com/questions/15108285/why-doesnt-the-css-calc-function-work-for-me - right? – Julix Jun 07 '17 at 23:40

4 Answers4

192

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.

Tim M.
  • 53,671
  • 14
  • 120
  • 163
  • Great answer. The latest update re: Chrome's viewport unit support was in [March of this year](https://bugs.webkit.org/show_bug.cgi?id=91554) so someone in the know needs to take a look at that. – iono Nov 06 '13 at 08:07
13

Use -webkit prefix and spaces around the operator 

width: -webkit-calc(100% - 88px);
width: -moz-calc(100% - 88px);
width: calc(100% - 88px);
potashin
  • 44,205
  • 11
  • 83
  • 107
Tamil Selvan C
  • 19,913
  • 12
  • 49
  • 70
4

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

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

every above suggestions like:

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

ended up with wrong calculation like 60%.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Tomasz Czechowski
  • 611
  • 8
  • 11
  • Whe using `-webkit-calc(~'100% - 40px');` it doesn't work. Nor is there a link to explain what the `~` is and I cannot find it anywhere. I see some upvotes so maybe this is less or something (which is not what the OP is about) – Jeremy Dec 13 '17 at 21:35
  • 3
    This is lesscss-Syntax.. Less is preconfigured to calculate everything "possible". There are options to set: http://lesscss.org/usage/index.html#command-line-usage-strict-math and http://lesscss.org/usage/index.html#command-line-usage-strict-units – Wolfgang Kluge Jan 17 '18 at 12:36
2

I had to do something like this in Chrome to get it working...

calc(100vh - 88px);
Michael
  • 1,177
  • 15
  • 15
  • 1
    This does not add anything to the existing answers, or serve as a particularly useful answer even on its own. – TylerH Jan 26 '22 at 19:56
  • And yet it fixed the problem for me and at least one other. – Michael Jan 26 '22 at 20:59
  • The issue with it is that it just repeats existing content. Answers should add to the conversation, not repeat something already shared. – TylerH Jan 26 '22 at 21:30
  • 1
    "vh" is the difference. – Michael Jan 26 '22 at 21:37
  • 1
    It's irrelevant; the topic (and the rule) is about spaces being required around the *operator*, not about what *unit* is being used. – TylerH Jan 26 '22 at 21:58
  • This question is 9 years old. Nobody thinks this guy is still trying to solve this problem. Now people use search engines to find answers to their questions that are similar. It's what brought me and at least one other. But that's fine. You are clearly grasping now since you just changed your reasoning. So we can leave it there. – Michael Jan 26 '22 at 22:13
  • 1
    If you don't think anyone is still trying to solve the problem, why did you post the solution as a new answer? Every existing answer, including two deleted ones, include the solution from your answer. By the way, my "reasoning" has not changed: this answer does not add anything to existing answers. – TylerH Jan 26 '22 at 22:30
  • 1
    This helped me. I add one more thing: use vw for percentage of width, as opposed to vh for percentage of height – thogue Jun 29 '22 at 18:18