Dividing Scalars in calc()

[nmn]

Description

Calc currently doesn’t allow dividing one length by another.

Change this to allow dividing any pair of values than can be added and return a unit-less number. This number can then be used in various different scenarios.

A specification for this exists for many years. It’s possible to do this already using atan2() function with slightly buggy results in some browsers.

There are some very useful use cases where this would dramatically simplify layout code which would otherwise need a large number of container queries.

Specification

W3C: https://www.w3.org/TR/css-values-4/#calc-type-checking

Tests

css/css-values/getComputedStyle-calc-mixed-units-003.html
css/css-values/calc-in-media-queries-with-mixed-units.html

Browser bug reports

WebKit: https://bugs.webkit.org/show_bug.cgi?id=255280
Mozilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1827404
Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1432187 and https://bugs.chromium.org/p/chromium/issues/detail?id=1213338

Additional Signals

This is a purely additive feature that should not cause any regressions.

• https://twitter.com/anatudor/status/1537881090223853568

[nt1m]

See last year's proposal for more context: #513

[nmn]

Let me quickly provide my own use-case for this:

I want a horizontally scrollable list of cards where the cards fit the available space perfectly regardless of the available space. This a fluid grid, but with all the rows combined on a single row.

This is how this ability in calc would make that possible:

width: calc(100% / round(down, 100% / var(--min-card-width)))

/* or with small parts */
--num-cards-that-fit: round(down, 100% / var(--min-card-width));
width: calc(100% / var(--num-cards-that-fit));

Without this calc function, we can use a long list of @container queries instead.
In production, I use a huge amount of nested clamp() function calls with the "fab-four technique". It works today, but it's ugly, unmaintainable code. Dividing lengths with calc would make it clean and obvious.

[scottkellum]

Great to see this here thanks for the submission @nmn 👍🏻 I submitted this last year and there has been progress, with Webkit supporting this in Safari TP 203.

My implementation and use case:

• https://github.com/Typetura/Typetura/blob/v4/typetura.css#L33
• I wrote up a post about it here: https://typetura.com/blog/unit-division-with-css-and-fallbacks/