Рабочая группа 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. Это тоже может быть интересно: