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

В этой статье я не хочу разбирать банальные px или em и даже не очень банальные проценты. А хочу показать не часто используемые единицы измерения, но иногда очень удобные для конкретных задач.

• cqw и cqh - от контейнера
  cqi, cqb, cqmin и cqmax
• lh и rlh - от высоты строки, line-height

cqw и cqh

cqw и cqh задают длину относительно размеров контейнера. cq это сокращение от query container, а w и h - соответственно, ширина и высота

cqw

это 1% от ширины контейнера

cqh

1% от высоты контейнера

В примере ниже сделаны несколько дочерних блоков с шириной, зависящей от ширины родителя:

See the pen (@Websitio) on CodePen.

Это очень простой пример, в котором с легкостью можно было бы использовать и проценты. Но ведь в cqw можно задавать не только ширину, но и отступы или размер шрифта, а также использовать в любых свойствах работающих с числовыми значениями.

Но теперь попробуем сделать ещё одну обертку, которой зададим ширину 50%

See the pen (@Websitio) on CodePen.

И тут видно, что блоки .item не стали считать свою ширину от новой обертки, а продолжают вычислять её от прежнего .wrapper. Это происходит из-за свойства

  container-type: inline-size;

присвоенного .wrapper. Именно оно говорит, какой из родителей будет контейнером.

Подробнее про container-type на MDN.

А также cqi, cqb, cqmin и cqmax

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

Подробнее о логических свойствах определения размера можно почитать на MDN

cqi

1% от инлайнового размера контейнера

cqb

1% от блочного размера контейнера

cqmin

Меньшее значение из cqi и cqb

cqmax

Большее значение из cqi и cqb

lh и rlh

1lh

равен высоте одной строки

1rlh

то же самое, но считается от корневого элемента. По аналогии как rem и em

See the pen (@Websitio) on CodePen.

Раньше для того, чтобы сделать такие простые полоски в textarea или в любом другом блоке, нужно было использовать calc, в котором умножать текущий шрифт на line-height. Это хорошо, если в проекте использовались кастомные свойства для line-height.

А теперь можно просто написать

  background-image: repeating-linear-gradient(
    yellow 0 1px,
    transparent 1px 1rlh
  );

и получить полоски над каждой строкой.

В песочнице выше всё таки понадобился calc, но по двум причинам: полоски нужны под строкой, а не над ней и у textarea сделаны padding.

Единицы измерения lh и rlh можно использовать в любых свойствах использующих числовые значения.

padding: 1em; /* для старых браузеров */
padding: 1lh; /* для современных */

На данный момент поддержка чуть больше 90%.

caniuse lh
caniuse rlh

Для старых браузеров просто укажите в предыдущей строке значение в поддерживаемых единицах.