CSS calc() in Chromium/Chrome

Three days ago this was committed:

This is the parsing stage of calc. The expressions are evaluated and expression trees are generated. CSS values are not created yet – that will happen in a subsequent commit.

Looking forward to the next commits, as this feature will make things — such as flexible columns with a little border in a responsive layout — easier.

Note: calc() already works in IE9+ and Firefox4+ (with -moz vendor prefix).

Chromium Changeset 106166 →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

4 Comments

  1. Agreed completely.

    Ideally, actually, you would be able to use variables in CSS, so that you could, for example, size one div relative to another…. or be able to assign a variable name to a color, and be able to color a second div relative to it.

    With real variables, the choices would be endless, while still keeping within styling, rather than having to resort to script.

    However, for the moment, this would be fantastically sweet.

    Absolutely stunning but true, IE had this before FF, and FF had this for almost 2 years before Chrome.

    Wonders will never cease.

    1. Correction… my info was a fail.

      Looks like, per caniuse.com/calc, IE did not get this until version 9, which is after Chrome.

      All is right with the world again.

      Can’t wait for the rest of the world to catch up so i can use this without having to hack around poor support.

      1. Um. IE9 was released March 2011 with support for this
        Ditto Firefox 4 – March 2011

        Chrome got this in version 19 – May 2012

Leave a comment

Leave a Reply to Steve Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.