Rem - масштабируемые единицы измерения

Reading time ~9 minutes

Статья написана в далеком 2011 году одним товарищем по имени Jonathan Snook.

Статейка мне понравилась и пришлась в пору - мне как раз нужно было ознакомиться с вопросом масштабируемого размера шрифта и возможности единообразного задания его размера для всего документа.

Материальчик понравился и я решил, что я лучше не смогу его написать, чем как просто перевести. Вопрос хорошо освещен - кратко и по делу, с необходимыми примерами.

Думаю, в следующих своих верстках я буду применять именно тот подход, который описан здесь. Ниже - мой вольный перевод.

Размер шрифта в rem

Определение единиц измерения текста всегда было темой горячих споров, даже в наши дни. К сожалению, на сегодняшний день все еще существуют многочисленные “за” и “против” для каждого из методов определения универсальной единицы измерения шрифта. Вопрос заключается в том, чтобы выбрать наиболее приемлемую из всех приемлемых.

Наиболее популярны два метода определения размера шрифта:

  • размер шрифта в пикселях px
  • размер шрифта в em

Давайте сделаем краткий обзор обоих методов, прежде чем я представлю еще один - волшебный третий способ.

Размер шрифта в px

С самого первого дня, когда зародился Интернет, мы (веб-мастера) использовали пиксели для задания размеров текста. Это надежный и понятный способ.

К сожалению, пользователи Internet Explorer - даже IE9 - не имеют возможности изменять размер текста, используя для этого встроенную функцию браузера.

Для веб-мастеров, которые озабочены такой возможностью, это большая проблема. Последние свежие версии браузера IE имеют встроенную функцию масштабирования, которая увеличивает размер ВСЕГО на странице - эта возможность присутствует во всех остальных браузерах, поддерживающих веб-стандарты. Это несколько сглаживает недостатки браузеров и данного метода, в частности.

Исходя из своего личного опыта, могу сказать, что использование пикселей предоставляет для меня надежную структуру будущего сайта. Пользователи браузеров имеют достаточно средств, чтобы подстроить сайт под свои предпочтения. Но я отвлекся от темы. Что еще у нас есть в наличии?

Размер шрифта в em

Невозможность изменения размеров текста в браузере IE постоянно вызывало чувство разочарования у веб-разработчиков. Чтобы обойти эту проблему, можно использовать единицы измерения em.

Впервые об этом способе написал в далеком 2004-м году Richard Rutter в своей статье How to size text using ems.

Этот способ основан на задании основного размера шрифта для body в процентах. В этом случае 1em равен 10px, вместо 16px по-умолчанию.

Теперь, чтобы установить размер шрифта для элемента страницы в единицах, эквивалентных 14px, нужно установить его в 1.4em:

body { font-size: 62.5%; }
 h1 { font-size: 2.4em; } /* =24px */
 p { font-size: 1.4em; } /* =14px */
 li { font-size: 1.4em; } /* =14px? */

Проблема с размерами шрифта в em заключается в том, что такая система достаточно сложна при применении ее на практике. В примере, приведенном выше, размер шрифта элемента li равен не 14px, а 20px.

Если добавить еще один вложенный уровень, то размер шрифта будет 27px! Происходит это вследствие наследования свойств в CSS-таблицах.

Чтобы избежать такого эффекта, нужно явно прописать для каждого дочернего элемента размер шрифта в 1em:

body { font-size:62.5%; }
 h1 { font-size: 2.4em; } /* =24px */
 p { font-size: 1.4em; } /* =14px */
 li { font-size: 1.4em; } /* =14px? */
 li li, li p /* etc */ { font-size: 1em; }

Проблема наследования при системе задания размеров шрифта в em достаточно неудобна. Что же можно еще предложить для решения проблемы?

Размер шрифта в rem

Стандарт CSS3 вводит в обиход несколько новых единиц измерения, одной из которых является rem, что является сокращением от “root em”. Давайте немного разберемся, что из себя представляет эта единица измерения.

Единица измерения em является относительной к размеру шрифта элемента родителя, что приводит к эффекту наследования. Единица измерения rem является относительной к основному корневому элементу, то есть к html.

Это означает, что можно установить размер шрифта только один раз, для элемента html. Для всех остальных элементов, которые являются потомками этого элемента, достаточно установить размер шрифта в процентах (rem) относительно корневого элемента:

html { font-size: 62.5%; }
 body { font-size: 1.4rem; } /* =14px */
 h1  { font-size: 2.4rem; } /* =24px */

В примере, показанном выше, базовый размер шрифта установлен в процентах 62,5%, что очень похоже, как мы поступали с единицами em. Другими словами, единица измерения rem лишена недостатков em с ее каскадностью и наследованием правил.

Но как насчет скудной поддержки этой единицы измерения в браузерах?

Вы будете сильно удивлены, но поддержка rem в браузерах достойная: Safari 5, Chrome, Firefox 3.6+ и даже Internet Explorer 9. Хорошая новость заключается в том, что в IE9 поддерживается изменение размера текста, установленного в единицах измерения rem. Увы, бедная Opera (вплоть до версии 11.10, по крайней мере), не имеет поддержки единиц измерения rem.

Как же нам поступить с браузерами, которые не поддерживают единицы измерения rem? Для них мы можем выполнить откат fallback в виде пикселей px. То есть, мы одновременно будем задавать размер шрифта в px и в rem:

html { font-size: 62.5%; } 
 body { font-size: 14px; font-size: 1.4rem; } /* =14px */
 h1  { font-size: 24px; font-size: 2.4rem; } /* =24px */

И пожалуйста, теперь мы имеем прочную и предсказуемую структуру во всех браузерах.

Декабрь 13 2011 - Opera 11.60 теперь поддерживает единицы измерения rem.


Конец статьи и перевода. В дополнение я могу сказать, что на сайте CSS Tricks также есть интересный материал по поводу rem.

В частности, на нем приведены удобные mixin‘ы для SASS, с помощью которых можно быстро задать размер шрифта в remfallback в px):

html{
 font-size: 62,5%;
}
@mixin font-size($sizeValue: 1.6) {
 font-size: ($sizeValue * 10) + px;
 font-size: $sizeValue + rem;
}

Пример использования этого SASS-mixin’а:

p{
 @include font-size(1.8);
}

… что при компиляции в CSS будет выглядеть следующим образом:

p{
 font-size: 18px;
 font-size: 1.8rem;
}

И еще несколько разновидностей SASS-mixin’ов, которые могут пригодиться. Подмешивания используются для задания размера шрифта и интерлиньяжа (высоты строки):

@mixin fontSize($sizeValue: 12 ){
  font-size: $sizeValue + px; //fallback for old browsers
  font-size: (0.125 * $sizeValue) + rem;
 }
 /* Как подключать
 --------------------*/
 p{
  @mixin fontSize(20);
 }
 /* Результат компиляции в CSS
 -------------------------------*/
 p{
  font-size: 20px;
  font-size: 2.5rem;
 }
@mixin lineHeight($heightValue: 12 ){
  line-height: $heightValue + px; //fallback for old browsers
  line-height: (0.125 * $heightValue) + rem;
 }
 /* Как подключить
 -------------------*/
 p{
  @mixin lineHeight(18);
 }
 /* Результат компиляции в CSS
 --------------------------------*/
 p{
  line-height: 18px;
  line-height: 2.25rem;
 }

А здесь представлен “полный” mixin, с помощью которого можно одновременно задать кегль и line-height. Удобная штучка - можно задать только размер шрифта и получить на выходе интерлиньяж и кегль в пикселях (и rem‘ах):

@mixin fontsize($size:1.6, $line: $size * 1.5){
  font-size:  ($size * 10) + px;
  line-height: ($line * 10) + px;
  font-size:  $size + rem;
  line-height: $line + rem;
 }
 /* Как подключить
 -------------------*/
 p{
  @mixin fontsize(1.8);
 }
 /* Результат компиляции в CSS
 -------------------------------*/
 p{
  font-size: 18px;
  line-height: 27px;
  font-size: 1.8rem;
  line-height: 2.7rem;
 }

P.S.

Постепенно изучаю вопрос создания тем под WordPress. Скачал версию 3.7.1, установил под локальный сервер XAMPP и открыл файл style.css стандартной темы “Twenty Twelve”. И в заголовке этого файла сразу же наткнулся на следующие интересные строки:

/* =Notes
--------------------------------------------------------------
This stylesheet uses rem values with a pixel fallback. The rem
values (and line heights) are calculated using two variables:
$rembase:   14;
$line-height: 24;
---------- Examples
* Use a pixel value with a rem fallback for font-size, padding, margins, etc.
	padding: 5px 0;
	padding: 0.357142857rem 0; (5 / $rembase)
* Set a font-size and then set a line-height based on the font-size
	font-size: 16px
	font-size: 1.142857143rem; (16 / $rembase)
	line-height: 1.5; ($line-height / 16)
---------- Vertical spacing
Vertical spacing between most elements should use 24px or 48px
to maintain vertical rhythm:
.my-new-div {
	margin: 24px 0;
	margin: 1.714285714rem 0; ( 24 / $rembase )
}
---------- Further reading
http://snook.ca/archives/html_and_css/font-size-with-rem
http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/

То есть, что нам сообщают разработчики WordPress в этих строках? Что данный файл стилевых правил использует для построения дизайна сайта два значения в качестве переменных:

$rembase:   14;
$line-height: 24;

… в единицах измерения rem с откатом fallback в пиксели px. И далее приводятся примеры того, как применяются обе эти переменные для построения стилевых правил и как производится вычисление нужных величин, являющихся производными от этих переменных.

В самом конце две ссылки по тематике rem для любознательных, первой из которых является вольный перевод, который вы читаете! Значит, я на правильном пути.


Различие между exports и module.exports

Попытка разобраться, в чем различие между exports и module.exports, основанная на статье Understanding module.exports ...Continue reading

Комментарии

Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке