Кроссбраузерный CSS REM: поддержка для старых браузеров

rem image

CSS3: размер шрифта в rem

REM (Root EM) - это масштабируемые единицы измерения для текста, введённые в css3 и на данный момент поддерживаются только современными браузерами.

Как правило - каждый верстальщик сам выбирает себе единицу измерения текста для font-size или же использует разные единицы по ситуации, на данный момент можно сказать, что наиболее актуальны пиксели (px), проценты (%) и относительные единицы (em). Что касается пикселей, то про них все знают и они хороши в определённых ситуациях, особенно в статическом дизайне, но когда дело касается адаптивного или резинового дизайна, то появляется необходимость менять размер всего текста, а удобнее всего это сделать изменив размер шрифта корневого элемента страницы, например у body.

Это становится возможным с помощью процентов и относительных единиц, меняем у body размер с 10px до 8px и все дочерние элементы body также меняют размер. Однако, есть загвоздка с удобством - относительные единицы назначают размер шрифта относительно родительского элемента. Если body равен 10px, а вложенный в него div равен 2em (20px), то следующая вложенность span с указанным размером текста в 1em - будет равна не 10px body, а 20px, т.е. тем самым 2em родительского элемента, который в свою очередь равен 10px за 1em. Уже непонятно? При большей вложенности и менее круглых числах em, вам придётся напрягать математические возможности своего мозга (или дёргать калькулятор) для расчёта реального размера шрифта вложеностей, что может негативно отразиться на вашем самочувствии или качестве сложной вёрстки среднего или большого проекта.

em aggro mathematic

Что касается rem - это относительные единицы, относительно корневого элемента (в html - это тег html), а не элемента в который они вложены. Т.е. если html тегу мы приравняем размер шрифта 10px, то все дочерние элементы с rem будут соотносится с корневым элементом. В примере с em, мы получаем px_span=(rem_span*(rem_div*px_body)), в примере с rem, мы получаем px_span=(rem_span*px_html) и так со всеми вложенными элементами любого уровня вложенности.

Это облегчает задачу подсчёта размера для любого элемента в дизайне, мы просто берём нужный размер в пикселях и делим на 10px (при условии, что у html размер шрифта 10px), на выходе получаем значение для rem. Затем, при адаптивном дизайне - нам достаточно поменять размер шрифта у html и все элементы с назначенным размером rem соответственно изменят свой размер. real_px_элемента=rem_элемента*px_html.

С rem - работать проще, удобнее. Но увы, он появился только в css3 и не работает в старых браузерах, в том числе IE < 9.

em vs rem schema

Кроссбраузерный костыль для rem и препроцессоры

Cамое банальное, что мы можем сделать - это откат (fall-back) в пикселях:

html {font-size: 10px;}
div {font-size: 20px; font-size: 2rem; } /* =20px */
span {font-size: 14px; font-size: 1.4rem; } /* =14px */

И конечно-же, можно использовать css препроцессоры на подобии LESS и SCSS, смотрите примеры реализации. Как правило - они преобразуют rem-единицы в пиксели. Это удобно, если вы уже используете какой-либо препроцессор.

Универсальное решение кроссбраузерности rem

Магия JavaScript от Chuck Carpenter, просто добавь JavaScript!

Этот умелец предлагает использовать его творение под названием REM-unit-polyfill. Подключённый скрипт (в сжатом виде весит 3 кб) - тестирует браузер на наличие поддержки REM и при необходимости вносит исправления в отображение шрифтов.

Вся суть работы скрипта rem polyfill заключается в том, что он считывает все связи тегов с css стилями, находит те, что содержат rem-единицы и пересчитывает rem на px, переопределяя значения в каскаде css.

Чак пишет, что скрипт протестирован на большом кол-ве сайтов и работает вполне отлично, конечно, с незначительными различиями.

Для магии, достаточно подключить предлагаемый js файл перед закрывающим тегом body и наслаждаться результатом. Также Чак даёт возможность не применять работу скрипта на некоторых из подключаемых css-таблицах, для этого достаточно добавить к ссылке на css - атрибут data-norem. Это будет полезно при загрузке css-таблиц с чужих хостов и тех таблиц, где как вы точно знаете - нету rem единиц. Не стоит этим пренебрегать, это увеличит скорость загрузки страницы.

Если вы не обладаете старой версией Explorer для тестов - воспользуйтесь сайтом netrenderer.com

На GitHub проекта вы найдёте все необходимые инструкции, сам скрипт и примеры реализации с испытанием при разных условиях. Кроме того, хочу отметить что скрипт не заброшен и время от времени обновляется.

Рабочего Вам REM!

Комментарии и отзывы к материалу

Открыта вакансия на первого комментатора!

Отправить комментарий

Как зовут?

Сообщение