Сила единицы измерения em в CSS

При работе с CSS наступает такой момент, когда начинаешь понимать, насколько мощным будет то или другое его средство. Несмотря на то, что я довольно отлично понимаю единицу измерения em CSS, по-настоящему прочувствовал их силу только после того, как прочитал запись Simurai. В данной статье я собираюсь использовать его опыт.

Что такое em?

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

Посмотрите на следующий код CSS:

.example { font-size: 20px;}

В данном случае 1em этого элемента или его дочерних элементов(при отсутствии иных определений font-size) будет равен 20px. Поэтому, если мы добавим строку:

.example { font-size: 20px; border-radius:.5em;}

Значение border-radius равное 5em будет равно 10px(то есть 20 * 0,5). Аналогично:

.example { font-size: 20px; border-radius:.5em; padding: 2em;}

Значение отступа 2em будет равно 40px( 20 * 2). Как упоминалось, этот тип вычислений применяется к любым дочернему элементу, если у него нет явно определенного размера шрифта. Тогда величина единицы измерения em в CSS будет вычислена подобным образом.

Если в CSS размер шрифта не определен, то em будет равна размеру шрифта, используемого по умолчанию в браузере. Чаще всего это значение составляет 16px. Давайте рассмотрим, как можно использовать этот способ для легкого изменения размера элементов.

Изменение размеров уровней компонента

Понятие «компоненты» довольно популярно теперь. Оно отлично подходит для модульных способов CSS, а также для идеи инкапсулированных разделов кода в целом. И я предполагаю, что следующий способ будет ещё более интересным, когда веб-компоненты получат широкую поддержку.

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

Давайте посмотрим на это в действии:

Посмотреть просмотр

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

Следует отметить, что установка размеров компонента через одно свойство CSS не обязательна, посетитель может менять размеры в параметрах. Это сделано для того, чтобы разработчик мог быстро внести изменения, не перебирая разные значения во всех частях компонента.

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

Обратите внимание, что:

  • Внутри компонента все размеры задаются при помощи em. Кроме внешней границы и картинки, которое при желании можно легко настроить, но меня устраивает размер, который в данном случае статичен;
  • Значок в правом верхнем углу, похожий на слезинку — это псевдоэлемент, который аналогичным образом использует размер шрифта родительского элемента;
  • CSS также содержит два медиа-запроса, которые корректируют размер шрифта родительского элемента. Что показывает полноценность этого способа, так как не необходимо менять все размеры в медиа-запросах, а только размер шрифта.

Некоторые замечания, упущения и т.д.

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

Возможно, вам придется подправить некоторые значения единицы измерения em в CSS. И как в случае с границей родительского элемента в примере, вы вряд ли захотите настроить размер. Поскольку свойство применяется ко всем элементам. Можно решить эту проблему, просто избегая em элементов, которые хотели бы сохранить.

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

Что насчет rem и Sass?

Единица rem в CSS наследует значение размера шрифта корневого элемента независимо от вычисленного размера шрифта. В HTML корневым будет элемент <html>. Таким образом можно без проблем использовать rem. Но это означает, что вы должны будете управлять всеми компонентами на странице, используя размер шрифта этого элемента. Это может сработать в некоторых проектах, но я думаю, что этот способ лучше всего работает при изменении размеров отдельного компонента, а не всего документа.

Что касается использования препроцессора Sass, то это второстепенный вопрос. В итоге CSS будет использовать любые единицы измерения, которые указаны в Sass коде, и наследование будет работать таким же образом.

Заключение

Я считаю, что это хороший способ для использования при создании CSS-фреймворка или библиотеки компонентов. Этот способ убедительно доказывает, насколько мощным средством будет единица измерения em в CSS.

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

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