Новые (и старые) единицы CSS, о которых вы никогда не слышали

Новые (и старые) единицы CSS, о которых вы никогда не слышали

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

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

Ниже перечислены новые единицы CSS, которые будут указаны в следующем модуле CSS Value и Units Module Level 4.

lh и rlh

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

Новые (и старые) единицы CSS, о которых вы никогда не слышали

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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 и родственные

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

Но подождите, есть и другие! Также описаны grad и rad, и да, вы догадались: градианы и радианы соответственно.

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

Q

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

Итак, что такое Q? Это всего лишь 0,25 мм, четверть миллиметра. И для чего нам нужно было это? По-видимому, она используется в типографике печати. В Японии. Где, по-видимому, они не используют точки или какие-либо другие имперские единицы (и это здорово, как по мне).

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

На самом деле это не единица, поскольку она должна иметь точное значение, тем не менее. Она выражаются в виде двух положительных целых чисел, разделенных символом / (косой чертой или «солидусом» в терминах Unicode). Где мы можем ее использовать? Ну где же — конечно, в медиа-запросах! Пример:

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

Hz и kHz

… А это что такое? Это те единицы частоты, которые мы учили в средней школе? Что они должны делать в CSS? Отвечая на вопросы по порядку: да, это единицы частоты; и ничего, поскольку, когда я это пишу это, ни для одного свойства CSS не требуется частота. И тем не менее, единицы частотные были определены в спецификации: для чего?

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

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

Так что вполне понятно, что ни один браузер не поддерживает единицы частоты: мы все равно не можем их использовать!

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

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

Автор: Massimo Artizzu

Источник: https://dev.to/maxart2501/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Курс по CSS3

Прямо сейчас изучите CSS3 с нуля!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree