Хабрахабр

[Перевод] Новые (и старые) единицы измерения в CSS, о которых вы вряд ли слышали

В последнее время JavaScript развивается очень быстро, но и языки-помощники веб-разработчика не стоят на месте.

Так что, как и прежде, созываются экспертные совещания, на которых составляют новые спецификации и так далее. CSS тоже развивается, и хотя Houdini в скором времени, возможно, сделает прорыв в CSS-разработке, до широкого применения, к сожалению, еще далеко. Прогресс не такой стремительный, как у TC39, но это лучше, чем ничего.

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

Ниже приведены новые единицы измерения в CSS, которые будут указаны в документе CSS Values and Units Module Level 4.

lh и rlh

Начнем сразу с интересного. lh — это текущая высота строки, что может оказаться очень полезным при расчете высоты текста. К сожалению, ни один браузер ее не поддерживает.
rlh, в свою очередь, по аналогии с rem для em соответствует высоте строки корневого элемента.

vi и vb

Вот еще одно интересное нововведение, которое по аналогии с vw и vh эквивалентно проценту от размера окна. А именно:

  • vi эквивалентно 1% размера окна просмотра по направлению написания строки;
  • vb эквивалентно 1% размера окна просмотра поперек направления написания строки.

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

В случае же с языками с вертикальным письмом (например, в японском), эти оси меняются местами.

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

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

ic

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

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

И опять никакой поддержки в браузерах.

cap

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

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

А теперь поговорим о более специфичных единицах измерения...

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

turn и родственные единицы измерения

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

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

В спецификации также указаны единицы grad и rad, соответствующие градам и радианам. Но это еще не все!

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

Q

Поскольку эта единица измерения относится к Level 3, она бы должна поддерживаться всеми браузерами. На самом деле она поддерживается только в Firefox начиная со сравнительно недавно выпущенной версии 49 (от сентября 2016 года).

Это просто 0,25 мм — четверть миллиметра. Итак, что такое Q?

Оказывается, она используется в типографском деле. Зачем понадобилась эта единица измерения? А там, по всей видимости, вообще не используются ни точки, ни какие-либо другие единицы классической системы (и это, как мне кажется, прекрасно). В Японии.

Соотношение сторон

Хотя это не совсем единица измерения, но все же должна иметь точное значение, и считается мерой. Она выражается в виде двух положительных целых чисел, разделенных символом / (косой чертой, которая в Юникоде называется Solidus).

Естественно, в медиазапросах! Где ее можно применить? Пример:

@media screen and (min-aspect-ratio: 16/10) { /* something for wide screens */
}

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

Hz и kHz

А это еще что? Мы же в школе проходили, что это единицы измерения частоты. При чем тут CSS?

И все же единицы измерения частоты определили. Именно так, это единицы измерения частоты, а на момент написания статьи не существует свойств CSS, для которых требуется частота. Зачем?

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

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

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

Планы на будущее

Уважаемый читатель, в заключении хотелось бы спросить, пользовались ли вы когда-нибудь или собирались ли воспользоваться единицами измерения выше? Может быть, вы собираетесь это сделать прямо сейчас?

Заглядывайте на VPS.today — сайт для поиска виртуальных серверов. 1500 тарифов от 130 хостеров, удобный интерфейс и большое число критериев для поиска самого лучшего виртуального сервера.

Показать больше

Похожие публикации

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»