Недавно читал статью Стаса Мельникова «Очень вероятно, что эти HTML- и CSS-ошибки есть в вашем коде». В ней среди прочего есть пункт про установку значения
font-size для <html> в px. Статья и комментарии натолкнули на давнюю тему px или rem.Есть мнение, что вместо
px нужно использовать rem. Объясняется это улучшением доступности и возможностью изменять значение в одном месте. Кто-то даже предлагает отказаться от px и использовать только rem.Для справки:
rem — относительная единица, которая зависит от значения font-size корневого элемента <html>. px — абсолютная единица, устанавливается как есть. Браузер всё равно пересчитывает rem в px при обработке CSS.Говоря о доступности, имеют ввиду критерий WCAG 1.4.4 Resize Text. Его суть в том, что должна быть возможность увеличить размер текста на 200% без потери контента и функциональности страницы и без использования сторонних программ.
В настройках браузеров есть возможность изменить размер шрифта. По умолчанию установлено значение
16px, которое применяется к документу и наследуется корневым элементом <html>. Это значение можно увеличить.Если для корневого элемента не задано свойство
font-size или оно задано в %, em или rem, то всё хорошо, значение из настроек будет наследоваться на <html>, а оттуда вниз по дереву. Но если font-size задан в px, настройка не наследуется.То же касается значения
font-size у других элементов. px задаёт конкретное значение, в то время как rem привязывает его к корневому элементу. Чтобы настройка размера шрифта работала, у всех элементов font-size должен быть задан в %, em или rem.При изменении настройки увеличивается размер текста, но всё остальное (поля, рамки, отступы, размеры иконок) остаётся без изменений. Это выглядит крайне странно и может ломать вёрстку. Отсюда идея использовать
rem для всех свойств.Настройка в браузере предназначена именно для изменения размера текста, а не всего подряд. С другой стороны разваливающаяся вёрстка тоже никому не понравится. Остаётся открытым вопрос о назначении настройки.
Другой способ удовлетворить критерию 1.4.4 — использовать зум. Он есть во всех браузерах и пропорционально увеличивает всю страницу. Технически можно использовать
px и всё равно увеличить текст в 2 раза, поэтому rem не обязателен для доступности.Выводы такие:
- отказ от
rem не значит, что сайты будут недоступными, потому что есть браузерный зум;- если хотите поддерживать настройку размера шрифта, не задавайте
font-size у <html> и других элементов в px, используйте %, em или remВот несколько дополнительных материалов на эту тему:
- Accessible Font Sizing, Explained
- Accessibility: px or rem?
- Ремы, емы, и почему отказ от них — не проблема
#css #a11y