CSS от А до Я: преимущества единиц измерения rem и em

От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов по работе с единицами измерения rem и em.

R значит rem и em

В видеоуроке мы изучили псевдокласс :required, с помощью которого очень удобно стилизовать поля формы обязательные для заполнения.

Формы, валидация и стилизация состояний – очень большие темы, и в первый раз мы уже довольно много узнали про псевдокласс :required. Поэтому давайте в этот раз разберем пару полезных советов по работе с единицами измерения rem. Однако сначала давайте рассмотрим другие относительные единицы измерения – em.

Плюсы и минусы единиц измерения em

При создании адаптивного сайта намного удобнее использовать относительные единицы измерения типа em, а не пиксели для установки размеров текста и отступов внутри и вокруг элементов. Единицы измерения em вычисляются в зависимости от размера шрифта родительского элемента, что позволяет тексту и отступам пропорционально увеличиваться при изменении свойства font-size на родительском элементе.

Такие единицы измерения позволяют создавать систему пропорций, в которой изменение значения свойства font-size на одном элементе каскадно влияет на все дочерние элементы. Система пропорций, конечно, хорошо, но в единицах измерения em есть и недостатки. Разберем небольшой кусок HTML кода:

Такой вложенный список не самая популярная вещь, но что-то похожее можно встретить на страницах условий и положений или других официальных документах. Если мы захотим выделить элементы списка, мы можем увеличить их font-size в 1.5 раза по отношению к базовому размеру шрифта в 16px.

В таком случае возникнет проблема. Вложенные li тоже увеличатся в 1.5 раза, так как они тоже являются дочерними элементами. Вложенные элементы списка будут увеличены в 1.5 раза от 24px, а не от 16px. В результате с каждым уровнем вложенности элементы списка будут расти по экспоненте. Дизайнер, скорее всего, хотел не этого!

Похожая проблема возникает с вложенными элементами и значением em меньше 1. В таком случае с каждым уровнем вложенности элементы списка будут уменьшаться по инкременту. Что же можно сделать?

Задавайте размер текста через единицы измерения rem

Вместо возможного риска постоянного увеличения или уменьшения свойства font-size можно воспользоваться другими единицами измерения.

Можно было бы взять обычные пиксели, однако относительные единицы измерения намного более гибкие, как уже говорилось ранее. Вместо этого мы можем взять единицы измерения rem, которые вычисляются по свойству font-size корневого элемента. Обычно корневым элементом на сайте или в веб-приложении является тег html. В .svg и .xml документах корневой элемент может отличаться, но это не тема нашей сегодняшней статьи.

Если мы будем задавать font-size с помощью rem единиц, это не значит, что нужно полностью отказаться от em. Я, как правило, использую em единицы для padding’ов, так как отступы всегда вычисляются относительно размера текста.

Используйте Sass для поддержки rem в браузерах

Единицы измерения rem поддерживаются только в IE9 и выше. Если есть необходимость в поддержке IE8 и ниже, можно воспользоваться JS полифилом или прописать фолбэк в пикселях:

Если вы используете Sass, то можно создать миксин и функцию для вычисления нужного размера в rem единицах и автоматического создания фолбэка.

Вот и все. Пара советов по работе с rem единицами измерения. Если вы не используете их в своих текущих проектах, настоятельно рекомендую попробовать.

Автор: Guy Routledge

Источник: //www.sitepoint.com/

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

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