Новые (и старые) единицы измерения в CSS, о которых вы никогда не слышали
2026-02-26 23:10 Diff
https://ru.hexlet.io/blog/posts/new-and-old-css-units

Это перевод статьи Massimo Artizzu The new (and old) CSS units you've never heard about.

JavaScript быстро эволюционирует в последнее время, но не то, чтобы другие языки веб-разработки стояли на месте.

CSS тоже развивается, и скорее всего Houdini совершит новый прорыв в CSS, но его, к сожалению, адаптируют далеко не все. Мы всё так же проходим процесс совещаний специалистов, которые создают новые спецификации и всё такое… Не так, как с непрерывными изменениями стандарта TC39, но всё же.

Вы вероятно слышали но, скорее всего — нет! о единицах измерения в CSS, речь о которых пойдёт в этой статье. И нет, не о тех, «старых» vw и vh (которые предстоит объяснить тем, кто меньше разбирается в CSS).

Ниже перечислены новые единицы CSS, которые будут детально описаны в готовящемся CSS Value и Units Module Level 4.

lh и rlh

lh равно текущей высоте строки, и это может стать очень полезной штукой при вычислении высоты текстового контента. К сожалению, ни один браузер не поддерживает это.

rlh, с другой стороны, эквивалентна тому, чем rem выступает для em: высоте строки главного элемента.

vi and vb

Еще одно интересное дополнение, подобно vw и vh — это процентное соотношение, относительно области просмотра (viewport). А именно:

  • vi составляет 1% от размера области просмотра (viewport) в направлении inline;
  • vb составляет 1% от размера области просмотра (viewport) в направлении block.

Что представляют из себя эти оси «inline» и «block»? Для языков с горизонтальным написанием, как английский или арабский, они соответствуют горизонтальному и вертикальному направлению, что делает эти две единицы измерения эквивалентными vw и vh.

Но для языков с вертикальным написанием (приходит в голову японский), эти направления взаимозаменяются.

Мы использовали такое различие в CSS с самого начала (настройка display, например), поэтому теперь они используются соответственно, поскольку создаются дополнительные спецификации CSS.

Жаль, что *ни один браузер, как всегда, не поддерживает эти единицы измерения 👎.

ic

В отношении интернационализации, ic— это восточный эквивалент ch, он представляет собой размер символа 0. ic — размер CJK (китайского / японского / корейского ) идеограма (символа) 水 («вода», U + 6C34), поэтому его можно грубо интерпретировать как «количество идеограмов.

Но что это за «размер»? Это так называемая «advance measure» (предупредительная мера): если текст лежит горизонтально — это ширина, в противном случае — это высота. Обратите внимание, что та же концепция применима и к ch!

Ииии всё ещё нет поддержки браузерами.

cap

Это измерение так называемой cap-height. Спецификация определяет высоту капса как «приблизительно равную высоте заглавной латинской буквы». Существует алгоритм для её вычисления, даже для шрифтов, которые не содержат латинских букв, но я не буду объяснять подробности.

Ещё и потому, что мы не можем использовать их в каком-либо браузере.

Теперь немного конкретики

Давайте посмотрим на спецификацию постарше (Level 3), потому что хоть она и должна чаще использоваться и иметь широкую поддержку, в ней всё ещё присутствуют малоизвестные моменты...

turn и его братья

Этот параграф для разогрева, поскольку эта единица должна быть более известна, чем остальные.

Мы используем deg для поворота элементов при transform, так? Один turn эквивалентен 360 deg. Всё очень просто. Полезно для анимации (особенно для вращения на 360 градусов) и значений прогрессии, вычисляемых в JavaScript.

Но подождите, есть ещё кое-что! grad и rad тоже имеют свои значения, и да, как вы догадываетесь — это грады (сотая часть прямого угла) и радианы (угол, длина дуги которого равна радиусу окружности), соответственно.

И все они поддерживаются всеми браузерами (IE с 9-й версии), и я не особо вижу необходимость в градах, а вот радианы могут быть использованы напрямую из тригонометрических функций JavaScript.

Q

Эта единица должна поддерживаться всеми браузерами, потому что она — часть Level 3. Но на факте поддерживает её только Firefox, и с относительно недавней 49 версии (сентябрь 2016).

Так что это, Q? Это всего лишь 0.25мм — четверть милиметра.

И почему она нам вдруг могла понадобиться? По всей видимости она использовалась в печатной типографике. В Японии, где не используются пункты (points) и другие империальные единицы (и это 👍 для меня).

Соотношение сторон (Aspect ratio)

Не совсем единица измерения, потому что единица должна содержать чистое значение, но всё же это измерение. Соотношение сторон специально выражено через положительные целые числа, разделённые / (слеш или "солидус", говоря языком Unicode).

Где мы можем это использовать? В медиа-запросах конечно! Например:

Хорошие новости: это поддерживается любым браузером! Ура!  🎉

Hz and kHz

…Стоп, что? Как мы учили в универе, разве это не единицы частоты? Как они связаны с CSS?

Ответ на эти вопросы: да, — это единицы частоты и никакого отношения к CSS они не имеют, потому что в свойствах CSS в данный момент ничто не требует частоты. Но единицы частоты были сформулированы. Почему?

Возможно, для использования в будущем, на случай спецификации модуля таргетированного на синтез речи или какой-то акустический вывод. Уже разрабатывается CSS Aural style sheets module, он использует свойства, которые применяют частоту, но этот модуль ещё никто не видел.

Этот модуль был вытеснен новым, совместимым со Speech Synthesis Markup Language (SSML), который откликается на имя CSS Speech. Он всё ещё в разработке и содержит свойства (вроде voice-pitch), которые предусматривают использование частот, но он не готов.

Вполне понятно, почему ни один браузер не поддерживает единицы измерения частоты: мы бы в любом случае не смогли бы их использовать!