Comments on: Whitespace in CSS Calculations

By: Boris

Boris — Mon, 16 Apr 2012 01:12:03 +0000

Doug, Firefox supports calc() with a “-moz” prefix. IE9 supports it without a prefix, as I recall. Current Chrome may support it with a -webkit prefix, maybe.

By: Doug

Doug — Sun, 15 Apr 2012 19:57:23 +0000

I’ve been looking for a standards-based way to do stuff like this since way back in the days of IE-only “behaviors,” but I can’t get FF, Chrome or IE9 to recognize calc. What browsers support this?

By: Some links for light reading (13/4/12) | Max Design

Some links for light reading (13/4/12) | Max Design — Fri, 13 Apr 2012 06:25:50 +0000

[...] Whitespace in CSS Calculations [...]

By: Dew Drop – April 11, 2012 (#1,304) | Alvin Ashcraft's Morning Dew

Dew Drop – April 11, 2012 (#1,304) | Alvin Ashcraft's Morning Dew — Wed, 11 Apr 2012 13:09:07 +0000

[...] Whitespace in CSS Calculations (Eric Meyer) [...]

By: Boris

Boris — Tue, 10 Apr 2012 23:58:55 +0000

J. King, you’re right in general, but to a CSS parser your example looks like the number “4″ followed by the unknown unit “em-2em”. The relevant parts of the CSS tokenizer spec:

DIMENSION {num}{ident}
ident [-]?{nmstart}{nmchar}*
nmstart [_a-z]|{nonascii}|{escape}
nmchar [_a-z0-9-]|{nonascii}|{escape}

so “em-2em” is a perfectly valid “ident” and the whole thing is a single DIMENSION token as far as the tokenizer is concerned. Then the parser sitting on top of the tokenizer has to drop the whole thing because the actual ident is not a known unit, but making that somehow work would require completely redefining how CSS parsing works…

By: J. King

J. King — Tue, 10 Apr 2012 23:17:11 +0000

Oops. That should have read “(missing operator)”, of course…

By: J. King

J. King — Tue, 10 Apr 2012 22:53:49 +0000

I would imagine that The spaces around adition and division are required because of the grammar defining values. Whereas “2em/2″ is unambigously a division operation, “4em-2em” presumably looks like “(4em)(missing operand)(-2em)”. I agree it’s a -little- stupid, but presumably there was a very, very good reason not to complicate the grammar to make this more intuitive for minimalists. For what it’s worth I agree that all operations should consistently require spaces instead.

By: Eric Meyer

Eric Meyer — Tue, 10 Apr 2012 18:19:57 +0000

I’m open to any reasonable suggestions, Chris! Regardless of date, though, I think the celebrations have to be held on eBay.

By: Chris Neale

Chris Neale — Tue, 10 Apr 2012 17:11:38 +0000

So, on which day are we celebrating Bidmas this year?

By: tom jones

tom jones — Tue, 10 Apr 2012 16:53:41 +0000

yeah, what Boris said.

“depending on whether you privilege multipliers over dividers or vice versa.”

no, no (sane) system prioritizes multiplying over dividing (or vice versa). it’s always in the order it’s written (unless it’s polish/reverse-polish/postfix/.. notation).

By: Eric Meyer

Eric Meyer — Tue, 10 Apr 2012 16:52:16 +0000

Sorry, Boris, Brian, and Bouke—that was a typo which I’ve now fixed: I was sure I’d mistakenly switch up 0.5em and 4.5 em, and so I did. Next time I need to build an example that yields wildly different results so there’s less chance of a mistake.

As for the difference between standards and mnemonics, well, if someone learns a mnemonic they regard it as a standard. Learn the wrong mnemonic, learn the wrong standard. I still say the specification should state explicitly which ordering precedence it follows just so there’s less chance of mistake.

I sense a theme…

By: Boris

Boris — Tue, 10 Apr 2012 16:10:05 +0000

Eric, the standard order of operations rules, both in the US and everywhere that mathematics is taught, are that * and / have the same precedence and you evaluate them left to right. The wikipedia page you link to clearly describes this. The particular section you linked to isn’t about different “standards”. It’s about different _mnemonics_ (some incorrect) that people try to use to remember the order.

So your example should end up with 4.5em. That’s what Gecko does, certainly. Which browser did 0.5em in your testing?

That all said, I agree that using parentheses to disambiguate expressions like this is absolutely the right thing for human-readability, precisely because most people don’t actually remember their order of operations very well.

By: ben

ben — Tue, 10 Apr 2012 16:01:56 +0000

The implication is that infix notation is assumed, but… not documented?

By: Chapel

Chapel — Tue, 10 Apr 2012 15:33:26 +0000

I think the first example expression is MUCH easier to read (since you have to adhere to the order of operations). Your last two examples just make my eyes cross and do weird things.

That being said, I fully agree that consistency (especially when writing up specs people have to adhere to) is key, and there’s absolutely no reason why the last example should barf and break everything.

By: Brian Dukes

Brian Dukes — Tue, 10 Apr 2012 15:32:42 +0000

I'm not seeing any browser doing the multiplication before the division in that scenario. As the article you link to explains, division and multiplication have the same precedence (hence the differing mneumonics), as do addition and subtraction. They're just evaluated left to right. In Chrome (Canary), Firefox, and IE 9, this test fiddle (http://jsfiddle.net/bdukes/KfL7a/2/) shows the calculation being left to right without inconsistency. Great to understand the spacing inconsistency, I'm sure that'll trip up a lot of people (definitely something for CSS minifiers/processors to understand)