Всем привет! Меня зовут Вова, я разработчик СБОЛа в web-канале.

Наверное, каждый фронтенд‑разработчик, по крайней мере на собеседовании, сталкивался с вопросами: «Какие единицы измерения существуют в CSS?» или «Какие единицы измерения ты использовал для CSS?», и т. п. Скорее всего, большинство интервьюеров удовлетворил бы ответ: «Абсолютные и относительные». И в целом, это, по‑своему, правильно. Но зададим себе вопрос: если разделить множество единиц измерения на два подмножества — абсолютные и относительные, — то будут ли внутри этих подмножеств единицы измерения действительно взаимозаменяемыми? Скорее нет, чем да. Тогда по какому признаку мы могли бы их разделить? — По функциональному использованию.

Абсолютные единицы измерения

Первая группа единиц измерения стоит несколько особняком — это абсолютные единицы измерения. Из названия подмножества можно сделать вывод, что они постоянны и привязаны к метрической системе мер, современный. CSS использует следующие единицы измерения:

• cm (сантиметры). Абсолютная единица измерения. Используется в основном при медиазапросах печати.

• mm (миллиметры). Абсолютная единица измерения. 1 mm (мм) = 0,1 cm (см). Также обычно используется для печати.

• Q (четверть миллиметра). Как следует из названия, 1 Q равняется 1/4 мм. Используется довольно редко, но может быть полезна для редких точных вычислений.

• in (дюймы). Представитель традиционной системы мер. Исторически размер дюйма был официально определён в Британии и равен 2,54 см. На практике за дюйм принимали ширину большого пальца у мужчины, а в Римской империи дюйму равнялась длина трёх ячменных зёрнышек. Сейчас в ИТ дюйм в основном применяется при определении диагонали у устройств, а в вебе — для печати.

• pc (пики). Абсолютная единица измерения, используемая в типографике. 1 pc (пика) = 1/6 in (дюйма).

• pt (пункты). Абсолютная единица измерения, также используемая в типографике. 1 pt (пункт) = 1/72 in (дюйма).

• px (пиксели). Наиболее часто используемая единица измерения в вебе и цифровой графике. 1 px (пиксель) = 1/96 in (дюйма).

Экранные единицы измерения

• vw (viewport width). Доля ширины экрана (вьюпорта). Число перед vw — это процент от ширины вьюпорта, соответствующий его длине. Например, если вы напишете 10 vw, это будет означать длину, равную 10 % ширины вашего вьюпорта. Вьюпорт — это просто красивое слово для обозначения размера вашего экрана, поэтому, если мы смотрим на монитор с шириной 1920 пикселей, то 10 vw будут равны 192 пикселям. Если мы смотрим на мобильный телефон с шириной дисплея 320 пикселей, то 10 vw будут равны 32 пикселям.

• vh (viewport height). Высота экрана просмотра. vh рассчитывается так же, как vw: 1 vw — это 1% от высоты экрана просмотра.

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

Современный CSS стремится уйти от строгой модели (верх/низ, лево/право, высота/ширина) к более динамичной модели (начало/конец, блок/инлайн). Основная причина этих изменений — упростить адаптацию различных направлений размещения контента в нашем коде. Если интернет‑приложение полностью переключается с горизонтального направления на вертикальное, то понятия верх/низ или ширина/высота не обязательно означают одно и то же, так как если мы хотим добавить отступы сверху и снизу текста, это будет представлено как отступы слева и справа в вертикальной ориентации, вместо отступов сверху и снизу в горизонтальной. Именно поэтому в CSS добавили единицы измерения vi и vb.

• vi (viewport height). Вычисляется относительно инлайн‑направления нашего контента. В горизонтальной ориентации инлайн‑направление соответствует ширине нашего вьюпорта, в вертикальной — определяет высоту вьюпорта. Легкий способ запомнить инлайн‑направление — это помнить, что это то же направление, в котором размещается текст при вводе. Ещё один способ определения: если в HTML‑разметке есть два одноуровневых инлайн‑элемента (например, два тега span) и свойство display их родительского тега не в значении контейнера, то направление их расположения — это и есть инлайн‑направление.

• vb (viewport block). Вычисляется относительно блочного направление контента. Это противоположность vi, поэтому в горизонтальной ориентации vb будет соответствовать высоте вьюпорта, а в вертикальной — его ширине. Блочное направление — это направлением, в котором при условиях по умолчанию располагаются блочные элементы (например, теги div).

.horizontal {
  writing-mode: horizontal-tb;
  width: 10vb; /*То же, что и 10vh*/
}

.vertical {
  writing-mode: vertical-lr;
  width: 10vb; /*То же, что и 10vw*/
}

Представьте, что мы держим мобильный телефон в вертикальном положении. Когда мы поворачиваем его горизонтально, содержимое экрана поворачивается. При помощи этих единиц мы можем создавать CSS‑классы для определения адаптивного дизайна в горизонтальном и вертикальном режимах. При горизонтальной ориентации содержимое блоков масштабируется по горизонтали: чем шире экран, тем шире блок. В вертикальной ориентации содержимое масштабируется по вертикали: чем выше экран, тем выше блок.

• vmin (viewport minimum). Это 1 % от наименьшего значения между vw и vh. Применяется для определения размера элемента, который должен адаптироваться к меньшему размеру вьюпорта.

• vmax (viewport maximum). Это 1 % от наибольшего значения между vw и vh.

Например, если на экране с шириной 300 пикселей и высотой 800 пикселей vmin будет представлять ширину вьюпорта, то vmax — высоту устройства. Эти единицы могут быть полезны, если нам нужно задать размер элемента на основе наименьшего или наибольшего измерения экрана.

• svh (small viewport height). Вычисляется относительно высоты экрана, при условии, что URL‑строка отображается постоянно.
  

• lvh (large viewport height). Вычисляется относительно высоты экрана, при условии, что URL‑строка скрыта.

• dvh (dynamic viewport height). Динамически вычисляющееся значение высоты относительно того, открыта панель с URL‑строкой или нет.

Угловые единицы измерения

Единицы измерения углов являются чисто геометрическими. Они хороши для указания определения фигур — например, радиуса окружности, направления линейного градиента или величины поворота.

• deg (градусы). Полная окружность содержит 360 градусов. В тригонометрии 0 deg соответствует пересечению окружности с осью , и градусы отсчитываются против часовой стрелки. В CSS же 0 deg соответствует пересечению окружности с осью , а градусы отсчитываются по часовой стрелке.

• grad (градианы). 1/100 от прямого угла (0,9°). Полная окружность содержит 400 градиан. Эта единица измерения чуть удобнее градусов в практических расчётах.

• rad (радианы). Полная окружность содержит 2 (~6,2832) радианы. Радианы часто используются в математических вычислениях и могут быть полезны для точных вычислений углов.

• turn (оборот). Полная окружность соответствует одному обороту (1 turn). Эта единица измерения удобна, если мы хотим определить угол в виде доли от оборота, например, 0,5 turn для половины оборота по окружности.

Доли (части)

• fr — определяет часть пространства в grid‑контейнере. Используется для определения долей доступного в нём пространства .

Единицы измерения шрифта

• em — задаёт величину относительно вычисленного размера шрифта элемента. Если для элемента font‑size: 20px, то 2 em для его дочернего элемента будут равны 40 px. При задании размера шрифта в em он считается относительно размера шрифта родительского блока. Само по себе название em происходит от латинской «M» или («ем» в типографике), которая традиционно использовалась для обозначения ширины квадрата, равного текущему размеру шрифта.

• rem — рассчитывается относительно размера шрифта корневого элемента, для веб‑страницы это <html>. По умолчанию размер шрифта для <html> равен 16 px. При таких условиях 2 rem эквивалентны 32 px.

• cap — рассчитается относительно высоты заглавных букв шрифта.

• lh — задаёт размер относительно межстрочного интервала. Если прописано свойство line‑height: 16px, то 2 lh эквивалентно 32 px.

• rlh — то же, что и lh, но относительно line‑height элемента <html>.

• ex — задаёт размер начертания относительно метрики шрифта x‑height, так называется расстояние между базовой линией шрифта и средней линией строчных букв. Обычно это высота буквы «x» в шрифте, отсюда и название x‑height.

 .sup {
   position: relative;
   bottom: 1ex;
 }

.sub {
  position: relative;
  bottom: 1ex;
}

• ch — задаёт размер относительно ширины символа 0 (ноль) в шрифте. В моноширинных шрифтах (с фиксированной шириной символа, например Courier, Monaco и других) 10 ch будут в точности соответствовать ширине 10 символов. В других шрифтах будет наблюдаться расхождение, ведь ширина цифры 1 меньше, а ширина буквы Ш — больше ширины символа 0.

• ic — это эквивалент ch в восточных языках (китайском, корейском, японском). Определяет размер иероглифов относительно размера этого прекрасного иероглифа 水, обозначающего воду.

Контейнерные единицы измерения

Контейнеры запросов (container queries) привнесли в CSS новые возможности для адаптивного поведения наших приложений. Основная идея container queries — определения свойств выполняются не на основе размера окна просмотра (viewport), а в зависимости от поведения контейнера. Вместе с тем у нас появились и новые единицы измерения, специфичные только для контейнеров.

• cqw (container query width). Это 1% от ширины контейнера запроса, используется для определения ширины элементов внутри контрейнра, относительно его ширины.

• cqh (container query height). Это 1% от высоты контейнера запроса, используется для определения высоты элементов внутри контейнера, относительного его высоты.

• cqi (container query inline‑size). Это 1% от инлайн‑размера контейнера запроса. Инлайн‑размер зависит от направления контента, и в зависимости от ориентацией устройства может быть шириной или высотой контейнера.

• cqb (container query block size). Это 1% от блочного размера контейнера запроса. Блочный размер также зависит от направления контента, и может быть как шириной, так и высотой контейнера.

• cqmin (container query minimum). Единица измерения наименьшего значения cqi или cqb, которые в свою очередь зависят от направления контента. Используется для определения размеров элементам на основе наименьшего измерения контейнера.

• cqmax (container query maximum). Единица измерения наибольшего значения cqi или cqb. Используется для задания размеров элементов на основе наименьшего измерения контейнера.

Единицы измерения времени

Единицы измерения времени используются для определения длительности анимации (animation) и переходов (transition), их продолжительности и задержки перед выполнением.

• s (секунды);

• ms (миллисекунды).

Единицы измерения разрешения

• dpi (плотность пикселей в точках на дюйм (in)). Обычные экраны имеют плотность пикселей 72 или 96 dpi, но при печати это разрешение гораздо выше (300 и более).

 @media print and (min-resolution: 300dpi){
   .element {
     font-size: 8pt
   }
 }

В этом примере изменим размер шрифта при печати на устройствах с плотностью пикселей больше 300.

• dpcm (плотность пикселей в точках на сантиметр (cm)). 1 dpcm = 2,54 dpi.

• dppx (плотность в точках на пиксель (px)). Поскольку соотношение дюймов (in) к пикселю (px) равно 1 к 96, то 1 dppx = 96 dpi.

Единицы измерения частоты

Частота — это тип CSS‑значения, она представляет собой частотный параметр звука, например частоту речи. В настоящее время это значение не используется ни в каких CSS-свойствах. Ранее частота использовалось для измерения частоты звуковой волны, значение определялось в герцах (Hz) или килогерцах (kHz).

Таким образом, если попробовать разделить единицы измерения по функциональному использованию, то получится 8 подмножеств. Эта классификация весьма условна, да и некоторые из единиц измерения можно отнести к обеим группам. Также особняком находится определение значения в процентах «%». Но когда мы определяем свойство font‑size при помощью процентов, то логика его работы схожа с em: процент вычисляется от размера шрифта родителя. Но при установке свойства margin‑left в процентах значение вычисляется от ширины родительского блока, а не от свойства margin‑left. При установке свойства line‑height в процентах значение тоже вычисляется от текущего размера шрифта, а не от свойства line‑height родителя. Для высоты и ширины процент вычисляется от высоты или ширины родителя, но при значении свойства position:fixed процент вычисляется от высоты или ширины окна (а не родителя).

Выводы

Современные единицы измерения, такие как sv, lv и dv, позволяют создавать более гибкие и адаптивные интерфейсы. Например, можно задавать размеры элементов в зависимости от размера вьюпорта, что особенно полезно при создании дизайна для различных устройств. Использование специализированных единиц измерения из типографики или тригонометрии обеспечивает более точный контроль и упрощает вычисления, а также мы можем обеспечить лучшую поддержку широкого спектра устройств, от компактных смартфонов до телевизоров с большой диагональю. К тому же использование этих единиц измерения не требует значительных изменений в коде и позволяет избавиться от избыточных JS‑вычислений.