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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WebStorm - hotkeys

## Стандартные сочетания клавиш WebStorm- Alt + 1 - открыть\закрыть панель проекта- Alt + 0 - открыть\закрыть панель коммитов- Alt + 9 - . … Continue reading

📎📎📎📎📎📎📎📎📎📎