Ремы, емы, и почему отказ от них — не проблема
Перевод статьи David Gilbertson: rems and ems, and why you probably don’t need them
Возможно, вы слышали, что при определении размера элементов на вашем сайте, вы должны использовать em или rem единицы, а не старые добрые пиксели.
Вы, вероятно, слышали такие словечки как «доступность», «подвижность» и «гибкость», и думали, что это звучит как довольно хорошая идея. Может быть, вы даже считаете, что использовать только пиксели — это любительский ход.
Ну, у меня есть для вас фантастические новости. Вам не нужно усложнять свою жизнь этими надоедливыми единицами.
Пиксели чувствуют себя отлично. На самом деле получается, что пиксели действительно хороши для задания нужного вам размера.
В идеальном мире все просто будут верить всему, что я говорю, без того, чтобы требовать какие-то «доказательства». Но мне сказали, что это не так, поэтому, пожалуйста, читайте дальше, и я с готовностью оценю каждую из причин использования этих дурацких единиц измерения.
1. Это делает сайты более доступными (для людей с ограничениями)
Или конкретнее: «используйте rem, и ваш макет будет лучше масштабироваться, если пользователь увеличивает страницу».
Люди склонны излишне много размышлять о доступности. На днях я видел вопрос (комментарий на YouTube, не меньше) — кто-то ищет инструмент для тестирования доступности. Что-то «более тщательное», чем просто соответствие WCAG.
Вот, я сделал один такой для вас:
Я также продаю более крупную модель для мониторов до 30 дюймов (это полотенце). Есть у меня и «универсальная» модель, которая фактически является наволочкой для вашей головы.
Моя точка зрения: вам не нужны глубокие знания и причудливые инструменты для разработки, если rem и em «лучше для доступности»* — просто представьте, что у вас плохое зрение. Если у вас слабое воображение, оберните экран в ClingWrap (торговая марка производителя пищевой плёнки, — прим. пер.) (или в то, что вы используете вместо ClingWrap в своей странной стране).
* Конечно, доступность — это не только читабельность, но в данном случае мы говорим только о ней.
Теперь спросите себя незрячего, какую из этих трех вещей вы выберете, чтобы сделать текст на вашем компьютере более читабельным:
- Измените размер шрифта по умолчанию для вашей операционной системы. Это делает все тексты, меню, часы, другие приложения и содержимое веб-страниц крупнее.
- Используете масштабирование на отдельных веб-сайтах, где встречается особенно мелкий текст.
- Измените стандартный или минимальный размер шрифта в настройках вашего браузера.
Не знаю насчёт вас, но если бы у меня были проблемы с чтением мелких текстов, я бы увеличил размер шрифта по умолчанию для ОС и забыл об этом.
(Так же этот трюк удобен для показа презентаций)
Давайте нырнём поглубже.
Для проведения расследования я накидал простой демо сайт. (Вот jsbin, если по какой-то необъяснимой причине вам это интересно.)
Три секции, которые вы можете видеть, имеют один и тот же HTML и CSS, за исключением того, что все единицы в верхней части являются пикселями, средняя — все em, а нижняя — все rem.
Вот как они выглядят при масштабе по умолчанию (где 1em = 16px).
А вот и Chrome в Windows, с увеличением текста на 150% средствами ОС.
Затем, я установлю масштабирование ОС обратно на 100% и поменяю масштаб в браузере. Это для сайтов, которые считают 12px для основного текста навигации приемлемым, потому что можно так разместить больше на экране. Не хочу называть имена, но…
Это Amazon. Размер шрифта по умолчанию 13px, 12px для навигации на верхнем уровне. Не круто.
К счастью, производители браузеров не разделяют презрение Amazon к пожилым людям и позволяют увеличивать изображение с помощью нажатия клавиши и прокрутки.
У меня глаза как у гончей (на самом деле у гончих не такое уж хорошее зрение, их выручает феноменальное обоняние, — прим. пер.), и все-таки я масштабирую некоторые сайты. Я делаю это и для Chrome DevTools, где размер шрифта по умолчанию 12px, но их я как-то прощаю.
(Примечание: если вы находите, что размер шрифта в Википедии несколько мал, или вам не нравится, как текст растягивается по всей странице, в 2013 году я написал расширение Skinny для Chrome, позволяющее сократить длину строк и увеличить размер шрифта.)
Вернемся к примеру. Давайте посмотрим на тот случай, когда браузер увеличивает масштаб на 150%.
Пользовательский интерфейс браузера (название вкладки, URL и т. д.) снова мелкий, но содержимое страницы выглядит одинаково.
И, наконец, изменим размер шрифта браузера по умолчанию. Сначала мы попробуем Firefox, вот без масштабирования:
И после установки «минимальный размер шрифта» в 20px:
Навигация заметно ýже в версии с px, и текст заголовка немного крупнее для rem.
И вот мы в Chrome с размером текста, заданным как «Large».
Ага, наконец-то существенное различие. Заголовок, который был жестко закодирован в 18px, не изменил размер, не изменилась и ширина сине-зелёного навигационного меню, которая установлена на 100px.
Вы можете подумать, что это чистая победа для rem, но это не так.
Хотя у нас нет данных о том, полагаются ли люди на изменение размера текста в браузере, у нас есть некоторые неоспоримые факты.
- Мы точно знаем, что изменение размера текста в браузере не влияет на facebook, youtube, amazon, twitter, medium, linkedIn, eBay (и это я только начал спускаться по Alexa top 100).
- Таким образом, мы знаем, что, если кто-то не может читать 16px текст и хочет использовать один из этих сайтов, он должен использовать какой-то другой метод.
- Мы также знаем, что изменение размера текста браузера не оказывает никакого влияния на остальную часть операционной системы, это очевидно.
- Опять же, мы можем сделать вывод, что если пользователь не может читать 16px текст, но хочет, чтобы он мог читать меню Excel, почту, системные настройки, finder/explorer и все остальное, он должен сделать это каким-то другим способом.
Вышеприведенные факты для меня ясно доказывают, что регулировка размера шрифта в браузере бесполезна в реальном мире. И поэтому я не буду учитывать эти установки в своём процессе принятия решений.
Это был аргумент «лучше для доступности», вытащенный из воды. Теперь переходим к…
2. Масштабирование контрольных точек при использовании rem/em
Другими словами, если вы определяете контрольные точки в пикселях, они фиксированы и не изменятся, если ваши пользователи увеличивают страницу. Поскольку пиксель — это пиксель, верно?
В данном случае, контрольными точками автор называет условия, заданные через медиа-запросы: “@media (max-width: 600px)”. Примечание переводчика
Это просто ложь. (Я предполагаю, что в какой-то момент в прошлом это было правдой, люди же не просто так что-то придумывают, не так ли?)
У моего великолепного примера есть контрольная точка в 600px. Она так же установлена как 37.5em для среднего и 37.5rem для нижнего примера. Без увеличения они все равны 600px.
Ниже этого размера текст отправителя и темы располагается вертикально, над ним они расположены бок о бок.
Давайте запустим IE11 для смены темпа. Я увеличиваю страницу до 150%, затем перетаскиваю окно так, чтобы оно было шириной около 900 пикселей. (Для тех, кому важна математика, это 600px × 150%.)
Итак, как вы думаете, что IE11 будет делать?
Считает ли он, что контрольная точка абсолютна на 600px все время, и, следовательно, показывает изображение на весь экран? Или он отрегулирует эту контрольную точку на 150%, так что изменение произойдет на 900px (в этом случае, мы получим узкий вертикальный текст)?
Я был достаточно удивлен, обнаружив, что IE действительно масштабировал мои контрольные точки при увеличении.
И это в древнем IE11. А как насчет других браузеров…
Safari сделал именно то, что я ожидал. (Что странно.)
Он разумно масштабировал мою 600px контрольную точку, но не совсем до 900px. Довольно неплохо, хотя здесь окно намного шире, чем контрольная точка в 600px, но при увеличении на 150% все три примера отображались так, как если бы они были уже контрольной точки.
Поэтому, если вы беспокоитесь о том, что ваши контрольные точки не масштабируются, если вы используете пиксели, не переживайте. Или, по крайней мере, найдите браузер, который не масштабирует их, и принимайте решение на основе распространённости этого браузера. Если вы должны поддерживать IE8, и оказывается, что он не масштабирует контрольные точки, у вас может быть законная причина использовать rem. (Конечно, IE8 не поддерживает медиа-запросы и rem, но давайте не будем заострять внимание на этом.)
3. Используйте em для «динамического» задания отступов вокруг текста
Это почти хорошая идея, и я вижу, откуда берутся её сторонники. «Зачем менять font-size и padding, когда вы можете использовать em для padding, а затем только изменить размер шрифта?», — говорят они.
Я понимаю, я действительно так делаю. Я просто предпочитаю быть точным и установить, скажем, размер шрифта и отступы для кнопки так, чтобы он был ровно 60 пикселей на больших экранах и ровно 50 пикселей на маленьких экранах, визуально соответствуя моей точно заданной в 60px/50px панели заголовка.
И если мои проекты приходят от профессионального дизайнера, мне еще предстоит встретить того, кому безразлично, какого размера кнопка. Существует ли такой дизайнер?
Но если вы сами проектируете сайт и не очень заботитесь о том, насколько высока эта кнопка или как далеко от заголовка расположен текст абзаца, и хотите, чтобы интервал увеличивался с изменением размера шрифта, тогда использование em для margin/padding — правильный рабочий инструмент.
Теперь перейдем к одной из наиболее сложных «причин» использования rem и em. (Я не знаю, почему я нумерую эти заголовки.)
4. Создавайте модули, размер которых можно изменить, просто изменив font-size корневого элемента
Написание этих слов, которые вы так любезно читаете, были подстегнуто сообщением в блоге, которое вышло несколько недель назад. Создайте отзывчивый сайт используя задание размеров через em.
Он объясняет (аккуратно), что, используя комбинацию rem и em, вы можете создать компонент (скажем, модальное окно), который можно масштабировать до разных размеров, просто изменяя единственный font-size в корневом элементе компонента.
Это имеет смысл. Точно так же, как имеет смысл фраза: «если вы часто убиваете людей, удобно держать лопату в багажнике вашего автомобиля».
Я уверен, это отличный совет. Но я не могу вспомнить последний раз, когда я совершил убийство, и я не могу вспомнить, когда в последний раз я нуждался в компоненте, который увеличивается во всех измерениях, отступах и размерах шрифта на один и тот же множитель, через изменение только одного значения.
Вот мой совет. Когда вы начинаете проект, спросите себя: нужно ли мне создавать какие-либо модули, которые иногда бывают определенного размера, а в другом случае будут на 10% больше в каждом измерении. Если да, следуйте рекомендациям в сообщении в блоге выше, это именно то, что вы ищете. (И положи лопату в багажник, ты, сумасшедший.)
Вы можете масштабировать весь текст на своей странице с помощью одного свойства
(Я решил больше не нумеровать заголовки.)
Другая загадочная причина использования em выглядит следующим образом: вы определили размер шрифта в своем CSS, всего, например, в 50 разных местах. Вы хотите, чтобы все 50 случаев отображались крупнее на больших экранах, а на меньшем экране — меньше, и это порождает множество медиа-запросов.
Эту проблему, по-видимому, лучше всего решить, используя rem везде, а затем изменив размер корневого шрифта в ваших медиа-запросах. Бум! Весь ваш текст сразу изменит размер.
Я думаю, что этот совет можно смело игнорировать по двум причинам. Я перечислил их для вас.
- Предполагается, что вы хотите увеличить/уменьшить весь текст на вашем сайте одновременно для заданной контрольной точки. Заголовки, пункты меню, основной текст, все сразу, все по одному и тому же фактору. Вот это смелость.
- Реальная проблема здесь заключается в том, что размер шрифта определен 50 раз. Если это сделали вы, то вам нужно подумать об организации грамотной типографики на вашем сайте. О нет, вы слышите это? Это стучат копыта проповеди о типографике…
Вот что, когда у вас есть отдельный файл только для типографики, и у вас есть, скажем, 12 стилей, и для каждого стиля у вас есть разные размеры для четырех размеров экрана, это 48 различных объявлений размера шрифта и, возможно, высоты строк, отступов, и межбуквенных расстояний тоже. Как однажды сказал Уинстон Черчилль, «это очень много».
Теперь, легко увидеть все это и подумать: «О нет, это означает кучу повторений, нам нужно сделать это по-другому — чего бы это не стоило — чтобы избежать повторения».
Я не согласен. Сильно не согласен. Слишком часто я вижу сложность, внедряемую в приложения во имя Всемогущего DRY. Не стоит недооценивать, насколько возрастает сложность при смешивании нескольких единиц. НАСА использовало две разные единицы на Mars orbiter, и они все еще не могут найти его (автор имеет ввиду неудачную миссию Mars Climate Orbiter, результаты которой, возможно, привели к окончательному переходу NASA на метрическую систему, — прим. пер.).
Не дайте своему сайту потеряться в космосе.
О, и это не просто разные единицы, а текст в какой-то части вашего приложения, который меняет размер в зависимости от размера шрифта в каком-то другом месте? Это полная противоположность инкапсуляции, она говорит тьфу детерминизму, и просто напрашивается на неприятности.
Итак… подумайте о своей типографике, настройте её один раз, сделайте это в пикселях, справьтесь с небольшим количеством повторений, воспользуйтесь тем, что ваш текст будет таким, каким вы его задали, затем забудьте об этой проблеме.
Эта напыщенная речь продолжалась гораздо дольше, чем то, что вы только что прочли, но я написал остальное в письме и не отправил его.
В заключение
Я думаю, все это сводится к следующему: бывают случаи, когда вы должны использовать rem и em, они же присутствуют в спецификации по какой-то причине. Но сценариев, в которых вы в них нуждаетесь, все меньше и меньше, чем может показаться.
Поэтому не ищите причины использовать em и rem. Достаточно того, что они делают. Используйте пиксели, и если сценарий покажет, что em или rem являются в данном случае лучшим инструментом, перейдите на них.
Бонусный уровень: По теме единиц
Советы, что написаны ниже имеют мало общего с этой статьей, поэтому я перечислю их без реального объяснения того, что они здесь делают, и не предлагаю никакого финального текста. Это будет неудовлетворительно.
- Если у вас есть два смежных кусочка текста и вы хотите, чтобы между ними был пробел, попробуйте
1chдля размера. - Если вы хотите, чтобы цвет
body backgroundзаполнил хотя бы одну страницу по вертикали, попробуйте100vhвместо100%. Но в целом, если вы собираетесь использоватьvh, вам лучше тестировать на iOS устройствах. - Вы знаете, что
vertical-alignможет быть задан в процентах? Если вы обнаружили, чтоvertical-align: superилиtopне выстраиваются так, как вам нужно, не добавляйте что-то грязное, напримерposition: relativeиtop: -3px. Вместо этого попробуйтеvertical-align: 30%. - Когда дело доходит до гибких раскладок, не забывайте о
flex-growиflex-shrink. Может быть немного сложно изменить сознание для их принятия, но точно так же как гигантский леденец, они стоят этого.
Слушайте наш подкаст в iTunes и SoundCloud, читайте нас на Medium, контрибьютьте на GitHub, общайтесь в группе Telegram, следите в Twitter и канале Telegram, рекомендуйте в VK и Facebook.
