Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS3 calc(100%-88px) not working in Chrome

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.

like image 357
Irfan Mir Avatar asked Apr 30 '13 01:04

Irfan Mir


3 Answers

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.

like image 160
Tim M. Avatar answered Nov 12 '22 12:11

Tim M.


Use -webkit prefix and spaces around the operator

width: -webkit-calc(100% - 88px);
width: -moz-calc(100% - 88px);
width: calc(100% - 88px);
like image 44
Tamil Selvan C Avatar answered Nov 12 '22 14:11

Tamil Selvan C


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%.

like image 5
Tomasz Czechowski Avatar answered Nov 12 '22 12:11

Tomasz Czechowski