Новые единицы измерения cqw и cqh задают длину относительно размеров контейнера. На самом деле есть еще cqi, cqb, cqmin и cqmax, но в этом посте разберём работу первых двух.
cq в начале - это сокращение от английского "query container". Третья буква после (w и h) сообщают нам, относительно чего будут происходить изменения.
cqw — это 1% от ширины контейнера
cqh — 1% от высоты контейнера
Визуальные примеры
Чтобы потестировать новые единицы измерения, я сделала простую разметку:
Теперь можно для <p> добавить фон, чтобы он растянулся на всю ширину, так как <p> — это блочный элемент.
Для <span> я тоже добавила фон (background-color: lightsalmon), но самое главное добиться такого результата, используя новые единицы измерения. Суть в том, что они позволять нам делать пропорциональное сжатие по ширине и по высоте.
Чтобы по высоте расстояние между линиями постоянно менялось, в зависимости от высоты экрана браузера, можно установить margin с cqh:
Чтобы управлять шириной каждого span, я используют селекторы CSS и в значениях применяю cqw:
Вы можете и сами посмотреть на результат. Для этого я оставила пример в Codepen. Откройте его и пробуйте менять ширину и высоту экрана.
К сожалению, пока использовать эти единицы измерения нельзя, потому что поддержка браузеров находится в районе 70%
Firefox, например, совсем не имеет поддержки:
Но учитывая, что в Safari поддержка появилась в сентябре 2022, то можно смело утверждать, что и на FF скоро всё будет.
Что думаете о нововведении? Пишите свои мысли в комментариях.