Open nmn opened 1 week ago
See last year's proposal for more context: https://github.com/web-platform-tests/interop/issues/513
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.
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.