С каждой сложной функцией в CSS у вас всегда будет этот поворотный момент, когда вы увидите, насколько мощной является эта функция. И, хотите верьте, хотите нет, мой личный поворотный момент с ems наступил спустя много времени после того, как я написал вводное введение в предмет .
Хотя к этому моменту я достаточно хорошо понимал ems, я действительно начал понимать, насколько они мощные, когда я прочитал пост Simurai о компонентах Medium под названием Sizing (Web) .
Так что я собираюсь кататься на его пальто в этом посте Здесь вы найдете краткое введение в единицы юнитов, а затем живую демонстрацию описанной им техники.
Что такое ЭМС?
В CSS единица em равна вычисленному font-size для элемента, к которому применяется em. Когда модули em объявляются в дочерних элементах, для которых не определен font-size , они наследуют свой font-size от своего родителя или от другого элемента-предка, возможно, вплоть до корневого элемента в документе.
Посмотрите на следующий CSS:
.example { font-size: 20px; }
В этом случае значение 1em для этого элемента или его дочерних элементов (при условии отсутствия других определений font-size ) будет равно 20 пикселей. Так что, если мы добавили строку:
.example { font-size: 20px; border-radius: .5em; }
Это значение border-radius .5em вычисляется до 10 пикселей (т. .5em 20 * .5). Так же:
.example { font-size: 20px; border-radius: .5em; padding: 2em; }
Значение отступа 2em равно 40px (20 * 2). Как уже упоминалось, этот тип вычислений будет применяться также к любым дочерним элементам — если только ни один из этих дочерних элементов не имеет явно определенного значения font-size , в этом случае значение em будет рассчитываться на основе этого. Если нигде в CSS не определен размер шрифта, модуль em будет равен стандартному размеру шрифта для документа в браузере, который обычно составляет 16 пикселей.
Я думаю, это должно прояснить, как работают ems. Теперь давайте посмотрим, как эту технику можно использовать для создания легко изменяемых размеров веб-компонентов, как обсуждал Simurai в оригинальной статье Medium. Я сделаю его идею еще дальше, предоставив демо-версию, чтобы увидеть это в действии.
Размер на уровне компонентов
Понятие «компоненты» сейчас довольно популярно. Он хорошо работает с модульными техниками CSS, а также с идеей инкапсулированных участков кода в целом. И я предполагаю, что следующий метод будет еще более интересным, когда спецификация веб-компонентов станет широко поддерживаться.
Техника в основном работает следующим образом: свойство font-size используется, как его называет Simurai, как «троянский конь», создавая базовый блок для различных элементов внутри нашего компонента или модуля. Поскольку единицы em, как описано выше, рассчитываются на основе font-size заданного корнем для родительского элемента, это позволяет легко изменять размер всего компонента, просто изменяя font-size на родительском элементе.
Давайте посмотрим на это в действии в демонстрации CodePen:
Этот маленький глупый модуль имеет четыре основных элемента. Ничего особенного, просто пример, иллюстрирующий эту технику. Переместите ползунок диапазона вверху демонстрационной страницы, чтобы изменить размер модуля. Вы также можете проверить это на полном экране . Ползунок диапазона привязывается к одному значению корневого элемента для компонента: значение font-size .
Здесь следует отметить, что цель сделать размер компонента изменяемым с помощью этого единственного свойства CSS не обязательно, чтобы пользователь мог сделать это. Это в основном так, что разработчик, поддерживающий модуль, может быстро вносить коррективы, не пытаясь найти разные значения во всех частях компонента.
Как описано в предыдущем разделе, при изменении размера шрифта это распространяется на все значения em, установленные для этого родительского элемента, а также на все его дочерние элементы, делая все части компонента пропорционально гибкими.
Если вы изучите CSS, вы заметите следующее:
- Все в компоненте имеет размер с помощью ems, за исключением внешней границы (которую мы хотим всегда сохранять в 2 пикселя) и изображения, которое я мог бы изменить, если бы захотел, но я доволен, что его размер статичен для этого случая.
- Подобная слезам вещь в верхнем правом углу является псевдоэлементом, который также выигрывает от базового
font-sizeна родительском элементе. - CSS также включает в себя два медиа-запроса, которые регулируют
font-sizeдля родителя. Опять же, это показывает полезность этого метода, потому что вам не нужно изменять все различные размеры в медиа-запросах, а толькоfont-size.
Некоторые заметки, недостатки и т. Д.
Как вы можете видеть из демонстрационного слайдера диапазона, этот тип гибкого изменения размера не всегда является тем, что вы захотите использовать. Это может быть несколько ограничивающим.
Возможно, вам придется настроить некоторые значения em, чтобы получить их так, как вам нравится, и, как в случае с родительской границей в демонстрации, вы можете не захотеть применять возможность изменения размера ко всем элементам. Вы можете легко преодолеть это, просто избегая ems на элементах, которые вы хотите оставить.
Как описано в обсуждении оригинальной статьи Simurai, вам не нужно использовать пиксельные единицы для установки font-size корня. Вы также можете использовать ems для этого, но просто помните, что он будет наследоваться таким же образом от его родителя, возможно, исходя из значения документа по умолчанию для font-size .
Как насчет Ремс и Сасс?
Модуль rem в CSS всегда наследует свое значение от базового размера шрифта в корневом элементе документа, независимо от вычисленного размера шрифта. В HTML корневым элементом всегда является элемент html . Таким образом, вы можете использовать rems, но это будет означать, что вам придется контролировать все компоненты на странице, используя размер шрифта для этого элемента. Это может работать в определенных проектах, но я думаю, что этот метод работает лучше всего, когда фокусируемость изменяемого размера делается на изолированном компоненте, а не на всем документе.
Что касается использования препроцессора, такого как Sass, я думаю, что это побочный момент. В конечном итоге, ваша скомпилированная таблица стилей будет использовать любые единицы измерения, которые вы используете в своем коде Sass, и наследование будет работать так же.
Вывод
Как уже упоминалось, Simurai заслуживает похвалы за то, что сделал эту технику более широко известной. Конечно, как он упоминает, в этом нет ничего нового, и основная концепция использовалась многими опытными разработчиками в течение многих лет — но, возможно, не так часто в контексте веб-компонентов или модулей.
Как говорит Симурай, я думаю, что это хороший метод, который нужно использовать при создании CSS-фреймворка или библиотеки компонентов, и, если ничего больше, я думаю, что техника действительно помогает понять, насколько мощны модули em.
Если у вас есть какие-либо отзывы или опыт работы с подобной техникой, или у вас есть идеи о том, как можно улучшить эту концепцию, я был бы рад услышать ваши комментарии.