От автора: в последнее время JavaScript развивается стремительными темпами, но не похоже, что другие технологии утратят свое значение. CSS тоже развивается, и хотя Houdini, вероятно, станет новым прорывом в CSS-разработке, он, к сожалению, далеко не полностью принят. Таким образом, у нас есть обычная процедура регулярных совещаний экспертов, которые производят новые спецификации и т. д. Они работают не так быстро, как TC39, но все же.
В этой статье мы рассмотрим единицы CSS, о которых вы могли — но, скорее всего, нет — слышать. И нет, не о таких, как «старые» vw и vh (которые мне еще предстоит объяснить для тех, кто меньше разбирается в CSS).
Ниже перечислены новые единицы CSS, которые будут указаны в следующем модуле CSS Value и 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, вместо этого, размер идеографа 水 («вода», U + 6C34) для CJK (китайский / японский / корейский), поэтому его можно грубо интерпретировать как «количество идеографов».
Но что это за «размер»? Это так называемая «предварительная мера»: если текст выложен горизонтально, это ширина; в противном случае это высота. Обратите внимание, что эта же концепция относится и к ch! И опять же, ic не поддерживается поставщиками браузеров.
cap
Это единица измерения так называемой кеп-высоты. Спецификация определяет кер-высоту как «приблизительно равную высоте буквы заглавной латинской буквы». Существует алгоритм для вычисления этого, даже для шрифтов, которые не включают латинские буквы, но я не буду вдаваться в подробности. Еще и потому, что мы пока не можем использовать их в любом браузере.
Теперь кое-что более анекдотическое …
Давайте рассмотрим более старую спецификацию (Уровень 3), потому что, даже если она должна широко поддерживаться и использоваться, у нее все еще есть некоторые менее известные части …
turn и родственные
Это для разогрева, так как эта единица должна быть немного более известна, чем другие.
Мы использовали deg для поворота вещей с помощью преобразования, не так ли? Ну, один turn эквивалентен 360 deg. Это так просто. Весьма полезно для анимации (особенно для вращений на 360 градусов) и значений прогрессии, вычисленных в JavaScript.
Но подождите, есть и другие! Также описаны grad и rad, и да, вы догадались: градианы и радианы соответственно.
И все они поддерживаются каждым браузером (IE начиная с версии 9), хотя я не вижу реального применения для градиан, тогда как радианы могут использоваться для тригонометрических функций JavaScript.
Q
Эта единица должна поддерживаться каждым браузером, поскольку она является частью Уровня 3. На самом деле поддерживает ее только Firefox, и то с относительно недавней версии 49 (сентябрь 2016 года).
Итак, что такое Q? Это всего лишь 0,25 мм, четверть миллиметра. И для чего нам нужно было это? По-видимому, она используется в типографике печати. В Японии. Где, по-видимому, они не используют точки или какие-либо другие имперские единицы (и это здорово, как по мне).
Соотношение сторон
На самом деле это не единица, поскольку она должна иметь точное значение, тем не менее. Она выражаются в виде двух положительных целых чисел, разделенных символом / (косой чертой или «солидусом» в терминах Unicode). Где мы можем ее использовать? Ну где же — конечно, в медиа-запросах! Пример:
@media screen and (min-aspect-ratio: 16/10) { /* что-то для широких экранов */
}
И хорошая новость: она поддерживается во всех браузерах! Ура!
Hz и kHz
… А это что такое? Это те единицы частоты, которые мы учили в средней школе? Что они должны делать в CSS? Отвечая на вопросы по порядку: да, это единицы частоты; и ничего, поскольку, когда я это пишу это, ни для одного свойства CSS не требуется частота. И тем не менее, единицы частотные были определены в спецификации: для чего?
Вероятно, для будущего использования в случае создания модуля спецификации, нацеленного на синтезирование речи или какого-либо другого звукового вывода. Хотя определенное время назад в разработке находился модуль CSS Aural style sheets, определявший свойства, которые используют частоту, но он так и не увидел свет.
Этот модуль был заменен новым, совместимым со Speech Synthesis Markup Language (SSML), который отвечает за CSS Speech. Он все еще находится в работе и также определяет свойства (например, voice-pitch), которые требуют частоты, но он еще не готов.
Так что вполне понятно, что ни один браузер не поддерживает единицы частоты: мы все равно не можем их использовать!
Планы на будущее?
В заключение, дорогой читатель, вы когда-либо использовали или планировали использовать одну из вышеупомянутых единиц? Или, может быть, вы планируете это прямо сейчас?
Автор: Massimo Artizzu
Источник: https://dev.to/maxart2501/
Редакция: Команда webformyself.