Рабочая группа CSS выпустила первый публичный черновик модуля величин и единиц 4 уровня (CSS Values and Units Module Level 4). Вот главные его новинки по сравнению с тем, что было:

• Новые единицы длины относительно шрифта: cap, lh, rlh и ic. Единица cap равна высоте заглавных букв текущего шрифта (удобно для стыковки иконок с текстом, без такой «магии»), lh — вычисленной высоте строки текущего элемента, rlh — вычисленной высоте строки корневого элемента, а ic — ширине иероглифа 水 («вода»), принятого за «эталон» полноширинного символа для текстов на восточноазиатских языках;
• Новые единицы длины относительно вьюпорта — vi и vb. Это аналоги vw и vh, но с учетом направления текста: vi — по инлайновой оси (как идет текст в строках), vb — по блочной (как идут абзацы);
• Новые функции min() — выбрать наименьшее значение из списка, max() — выбрать наибольшее, и clamp() — ограничить значение нижним и верхним пределами;
• Функция toggle() для циклического перебора нескольких значений (напр., для оформления разных уровней вложенности древовидного списка);
• Более «умная» функция calc(). Например, наконец станет можно делить длину на длину (скажем, calc(75% / 10em)), а при подстановке результата calc() туда, где нужно целое число (напр. в grid-template-columns), этот результат будет автоматически округляться.

Кроме того, уточнены правила преобразования CSS-размерностей при математических операциях с ними, а также сериализации математических функций при чтении CSS-значений скриптом.

Теперь, когда черновик официально опубликован, можно смело требовать от браузеров всё это реализовать, так что не стесняйтесь писать им в багтрекеры! :)

P.S. Это тоже может быть интересно:

• Голограммы, пленочные засветки и шейдеры на чистом CSS
• Псевдокласс :has() — не только «родительский селектор»
• «Запашки» кода React-компонентов