CSS Typed Arithmetic

Post #15 published on 2025-11-21 by Tobias Fedder

Yesterday I learned that up‐to‐date Blink‐based browsers, as well as WebKit‐based browsers (or so I heard), can successfully process the following CSS:

.class {
  --vp-ratio: calc(1vw / 1vh);
  --unitless-count-of-horizontal-pixels: calc(100vw / 1px);
}

It’s possible to divide by a typed value, as long as the dividend is of the same type — in this code example <length>.

So the question is: HOW THE F⁠⸺ did I miss this feature being introduced? I try to stay well‐informed regarding the web platform, especially CSS, and I’ve been under the impression that I’m doing quite well, but this one slipped under my radar.

Luckily, Alex, who gave the talk yesterday at the Dev & Design Meetup Hamburg where I learned about this feature, explained that there isn’t much noise out there yet, except for this one CSS‐Tricks article. So the answer to my question is: Because I can’t keep up with all the posts in my RSS app.

Now remembering every time in the last ten — or so — years when I wanted to divide by a type, most likely <length>, and whether I only wanted it for convenience or was blocked without it, will be interesting. Then again there is no need to rush remembering any of my crazy layout ideas, because Gecko doesn’t support CSS Typed Arithmetic yet. Which means that I won’t use it out in the wild for now. The mental gymnastics to justify that behaviour to myself might be another blog post called Unprogressive Enhancement. Anyway, that’s it; let’s go crazy.