Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <p><em>Это перевод статьи Massimo Artizzu<a>The new (and old) CSS units you've never heard about</a>.</em></p>

2 <p>JavaScript<em>быстро</em>эволюционирует в последнее время, но не то, чтобы другие языки веб-разработки стояли на месте.</p>

3 <p>CSS тоже развивается, и скорее всего<a>Houdini</a>совершит новый прорыв в CSS, но его, к сожалению, адаптируют далеко не все. Мы всё так же проходим процесс совещаний специалистов, которые создают новые спецификации и всё такое… Не так, как с непрерывными изменениями стандарта TC39, но всё же.</p>

4 <p>Вы вероятно слышали но, скорее всего - нет! о единицах измерения в CSS, речь о которых пойдёт в этой статье. И нет, не о тех, "старых" vw и vh (которые предстоит объяснить тем, кто меньше разбирается в CSS).</p>

5 <p>Ниже перечислены новые единицы CSS, которые будут детально описаны в готовящемся<a>CSS Value и Units Module Level 4</a>.</p>

6 <h4>lh и rlh</h4>

7 <p>lh равно<strong>текущей высоте строки</strong>, и это может стать очень полезной штукой при вычислении высоты текстового контента. К сожалению, ни один браузер не поддерживает это.</p>

8 <p>rlh, с другой стороны, эквивалентна тому, чем rem выступает для em: высоте строки главного элемента.</p>

9 <h4>vi and vb</h4>

10 <p>Еще одно интересное дополнение, подобно vw и vh - это процентное соотношение, относительно области просмотра (viewport). А именно:</p>

11 <ul><li>vi составляет 1% от размера области просмотра (viewport) в направлении<em>inline</em>;</li>

12 <li>vb составляет 1% от размера области просмотра (viewport) в направлении <em>block</em>.</li>

13 </ul><p>Что представляют из себя эти<a>оси "inline" и "block"</a>? Для языков с горизонтальным написанием, как английский или арабский, они соответствуют горизонтальному и вертикальному направлению, что делает эти две единицы измерения эквивалентными vw и vh.</p>

14 <p>Но для языков с вертикальным написанием (приходит в голову японский), эти направления<em>взаимозаменяются</em>.</p>

15 <p>Мы использовали такое различие в CSS с самого начала (настройка display, например), поэтому теперь они используются соответственно, поскольку создаются дополнительные спецификации CSS.</p>

16 <p>Жаль, что *ни один браузер, как всегда, не поддерживает эти единицы измерения 👎.</p>

17 <h4>ic</h4>

18 <p>В отношении интернационализации, ic- это восточный эквивалент ch, он представляет собой размер символа 0. ic - размер CJK (китайского / японского / корейского ) идеограма (символа) 水 ("вода", U + 6C34), поэтому его можно грубо интерпретировать как "количество идеограмов.</p>

19 <p>Но что это за "размер"? Это так называемая<a>"advance measure"</a>(предупредительная мера): если текст лежит горизонтально - это ширина, в противном случае - это высота. Обратите внимание, что та же концепция <em>применима и к ch</em>!</p>

20 <p>Ииии всё ещё нет поддержки браузерами.</p>

21 <h4>cap</h4>

22 <p>Это измерение так называемой <em>cap-height</em>.<a>Спецификация</a>определяет высоту капса как "приблизительно равную высоте заглавной латинской буквы". Существует алгоритм для её вычисления, даже для шрифтов, которые не содержат латинских букв, но я не буду объяснять подробности.</p>

23 <p>Ещё и потому, что мы не можем использовать их в каком-либо браузере.</p>

24 <h3>Теперь немного конкретики</h3>

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

26 <h4>turn и его братья</h4>

27 <p>Этот параграф для разогрева, поскольку эта единица должна быть более известна, чем остальные.</p>

28 <p>Мы используем deg для поворота элементов при transform, так? Один turn эквивалентен 360 deg. Всё очень просто. Полезно для анимации (особенно для вращения на 360 градусов) и значений прогрессии, вычисляемых в JavaScript.</p>

29 <p>Но подождите, есть ещё кое-что! grad и rad тоже имеют свои значения, и да, как вы догадываетесь - это грады (сотая часть прямого угла) и радианы (угол, длина дуги которого равна радиусу окружности), соответственно.</p>

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

31 <h4>Q</h4>

32 <p>Эта единица должна поддерживаться всеми браузерами, потому что она - часть Level 3. Но на факте поддерживает её только Firefox, и с относительно недавней 49 версии (сентябрь 2016).</p>

33 <p>Так что это, Q? Это всего лишь <strong>0.25мм</strong>- четверть милиметра.</p>

34 <p>И почему она нам вдруг могла понадобиться? По всей видимости она использовалась в печатной типографике. В Японии, где не используются пункты (points) и другие империальные единицы (и это 👍 для меня).</p>

35 <h4>Соотношение сторон (Aspect ratio)</h4>

36 <p>Не совсем единица измерения, потому что единица должна содержать чистое значение, но всё же это измерение. Соотношение сторон специально выражено через положительные целые числа, разделённые / (слеш или "солидус", говоря языком Unicode).</p>

37 <p>Где мы можем это использовать? В медиа-запросах конечно! Например:</p>

38 <p>Хорошие новости: это поддерживается любым браузером! Ура! 🎉</p>

39 <h4>Hz and kHz</h4>

40 <p>…Стоп, что? Как мы учили в универе, разве это не единицы<em>частоты</em>? Как они связаны с CSS?</p>

41 <p>Ответ на эти вопросы: да, - это единицы частоты и никакого отношения к CSS они не имеют, потому что в свойствах CSS в данный момент ничто не требует частоты. Но единицы частоты были сформулированы. Почему?</p>

42 <p>Возможно, для использования в будущем, на случай спецификации модуля таргетированного на синтез речи или какой-то акустический вывод. Уже разрабатывается<a>CSS Aural style sheets module</a>, он использует свойства, которые применяют частоту, но этот модуль ещё никто не видел.</p>

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

44 <p>Вполне понятно, почему ни один браузер не поддерживает единицы измерения частоты: мы бы в любом случае не смогли бы их использовать!</p>