От автора: браузеры становятся все лучше. Похоже, мы находимся в золотом веке, когда для пользователей, получающих доступ к странице, добавляются нескончаемые потоки новых функций, и действительно отличные инструменты для тех, кто создает страницу. Впрочем, так было не всегда.
Более ранние версии современных браузеров имели ограниченные возможности, и мы должны были подумать о том, как работать с ними при проектировании и разработке сайтов. Статические и адаптивные макеты были обычным явлением, и наши сайты были спроектированы так, чтобы обеспечить идеальное качество пикселей. Конечно, при реализации макетов в рамках ограничений, предусмотренных браузерами, было задействовано определенное количество манипуляций с подгонкой пикселей.
По мере того как функции браузера становились все более популярными, а такие методы, как Fluid Grids, стали более распространенными, то, как мы кодировали сайты, перешло на совершенно новую парадигму. Мы отошли от определения и кодирования единиц измерения в пикселях и стали более последовательно использовать относительные единицы CSS и значения без единиц измерения, чтобы удовлетворить потребности постоянно меняющихся размеров области просмотра.
Перенесемся в настоящее время, когда поставщики браузеров добавили больше функций, позволяющих простым способом создавать гибкие и надежные конструкции. Взять, к примеру, масштабирование браузера. Когда пользователь в современном браузере увеличивает страницу, все пропорционально увеличивается или уменьшается в зависимости от предпочтений пользователя. Ну, по крайней мере, так должно быть.
В любом случае, почему масштабирование браузера имеет большое значение?
Предоставление пользователю возможности управлять веб-браузером не является новой концепцией, на самом деле это то, о чем было написано в первые дни Интернета. В последнее время эта концепция, кажется, была забыта, так как функции браузера улучшились.
Наиболее важной причиной использования в CSS адаптивных значений и значений без единиц измерения является поддержка пользователей, которые полагаются на масштабирование. Если вы прочитали Руководство по обеспечению доступности веб-контента, пользователи должны иметь возможность масштабировать область просмотра без потери содержимого или функциональности или ограничений, налагаемых значениями CSS или настройками масштабирования области просмотра. В частности, есть несколько критериев, которые должны быть выполнены:
WCAG 1.4.4: Пользователи должны иметь возможность изменять размер текста до 200 процентов без вспомогательных технологий, без потери содержимого или функциональности. (Уровень АА)
WCAG 1.4.8: В идеале мы должны обеспечить соответствующий интервал между строками и абзацами, и мы не должны требовать от пользователя необходимости работать с горизонтальной прокруткой для чтения строки текста в полноэкранном окне. (Уровень ААА)
WCAG 1.4.10: Пользователи должны иметь возможность изменять размер текста без необходимости прокрутки по горизонтали и вертикали для чтения этого содержимого. (Уровень АА)
Проектирование систем и согласованности потоков
Как тот, кто работает над системой дизайна O’Reilly Media, я считаю, что приведение потоков к согласованности бренда, стиля и компонентов пользовательского интерфейса является одним из главных приоритетов. Согласованность всей системы позволяет дизайнерам и разработчикам создавать впечатляющие приложения для конечного пользователя. Тем не менее, наиболее важной нитью, которая связывает все элементы гобелена системы дизайна, является установление лучших методик доступности — для цветов, типографики, компонентов, текстур.
Главная страница сайта может отображаться в выдаче вместо других
В случае определения типографских стилей системы устанавливаются стандарты для таких вещей, как визуальная иерархия и ритм типографики. Часто дизайнер начинает макеты в Sketch или другой программе, ориентированной на дизайн, и задает размеры шрифта и значения высоты строки для типографики в пикселях. Этот подход может хорошо работать для статической разметки, но есть одна загвоздка. Пиксельный подход не будет работать как стратегия CSS, когда браузеры — и в особенности это касается масштабирования браузера — вводят изображение.
Дискуссии на тему масштабирования браузера
На этом этапе процесса разработки системы проектирования могут возникнуть споры. На самом деле, наша команда очень оживленно спорила об этом, когда система дизайна перезагружалась, и я заметил, что в стилях типографики использовались значения высоты строки на основе пикселей, определенные нашим дизайнером в Sketch. Вот некоторые из аргументов в пользу использования пикселей в CSS: «Браузеры обрабатывают для нас все масштабирование шрифтов, поэтому нам не нужно преобразовывать типографику в относительные единицы в CSS. Пользователям не нужно настраивать параметры отображения шрифта в браузере, наша работа сделана!» Высказывались также доводы в пользу использования относительных единиц CSS: «Да, браузеры обрабатывают масштабирование страницы для нас, но есть разница между тем, как отображается интерфейс, когда страница будет увеличена, в зависимости от того, был ли изменен размер браузера по умолчанию. Пользователи пытаются настроить параметры отображения шрифта в браузере, поэтому мы должны учитывать это в объявлениях CSS».
И так началось исследование. Когда я впервые приступил к поискам рекомендаций относительно того, является ли использование пикселей в CSS в целом хорошей идеей, я обнаружил противоречивые мнения по этому вопросу, такие как статьи, подобные этим, объясняющие, почему вы должны просто использовать пиксели или должны прекратить использовать пиксели в CSS. Статьи об адаптивных размерах в медиа-запросах. Даже хорошую статью о доступности при изменении размеров текста и поведении старых браузеров.
Мне не часто встречались упоминания — или рассмотрения — о том, что пользователи действительно копаются в расширенных настройках браузера, чтобы изменить размер шрифта по умолчанию. К счастью, я натолкнулся на рассмотрение вопроса в документации MDN, в действительно отличной статье Эвана Минто, посвященной пользовательским данным и в статье «Полный макет», посвященной простейшим элементам.
Эти последние три статьи были особенно интересны, но даже при большом количестве предоставленной информации единственное, чего не хватало во всем этом — это сравнительных примеров. В частности, примера того, как выглядит блок текста с использованием значений пикселей по сравнению с блоком текста с использованием относительных в сценарии масштабирования браузера. Особенно, если пользователь меняет настройки шрифта по умолчанию под капотом.
Что вы подразумеваете под настройкой шрифта по умолчанию?
Возможно, вы знакомы с настройкой масштабирования страницы в браузере, которая пропорционально увеличивает все содержимое страницы. Однако менее известной функцией большинства браузеров является возможность настройки предпочитаемого размера шрифта. Эта функция работает независимо от функции масштабирования страницы. Например, это параметры, используемые для раскрывающегося меню «Размер шрифта» в настройках внешнего вида Chrome — от очень маленького (9 пикселей) до очень большого (24 пикселя) — с рекомендуемым по умолчанию средним значением 16 пикселей.
Русский Google станет более релевантым благодаря технологии BERT
Если вы измените в браузере одну из этих настроек, в идеале все ваши шрифты будут увеличиваться (или уменьшаться) пропорционально размеру этой настройки шрифта. В идеале, если вы используете относительные единицы CSS. Эта настройка размера шрифта в браузере не повлияет на типографику, которая использует пиксели для размера шрифта и / или высоты строки. Это подводит нас к столь необходимому примеру.
Параллельное сравнение
Давайте посмотрим, как блок текста отображается в браузере при увеличении до 200% с использованием различных настроек для увеличения страницы и размера шрифта по умолчанию.
Этот блок Codepen отображает три контейнера текста с настройкой масштабирования страницы 100% и размером шрифта браузера по умолчанию с рекомендуемой настройкой среднего размера (16 пикселей).
Размер шрифта и значения высоты строки одинаковы, но используют разные единицы измерения.
В левом контейнере используются пиксели как для font-size, так и для line-height.
Средний контейнер использует rem для размера шрифта и пиксели для высоты строки.
В правом контейнере используются rem для размера шрифта и значения без единиц измерения для высоты строки.
Если вы измените настройку масштабирования страницы на 200% и отставите размер шрифта браузера по умолчанию (16), между контейнерами заметных отличий не будет.
Пользователи могут устанавливать размер шрифта браузера, не касаясь масштабирования страницы, поэтому давайте вернем значение настройки масштабирования страницы обратно к 100% и изменим размер шрифта браузера на очень большой, чтобы увидеть, изменится ли что-то.
Обратите внимание, что текст в среднем и правом блоках, где используются rem для размера шрифта, масштабируется до величины, кратной размеру шрифта корневого уровня — что в 1,5 раза больше размера шрифта по умолчанию (16) — но блок слева остается тем же, потому что значение шрифта остается статическим (с использованием пикселей), а не адаптивным (с использованием rem).
Хотя и средний, и правый блоки правильно увеличивают размер шрифта, обратите внимание, что межстрочный интервал в блоке текста в среднем блоке выглядит очень сжатым.
Этот сжатый межстрочный интервал имеет место, потому что в центральном блоке используется значения высоты строки, установленное в абсолютных единицах (в пикселях), а не в относительных. Тем не менее, стоит отметить, что установка значения высоты строки, основанного на длине или даже в процентах, имеет плохое поведение наследования CSS и может привести к непредвиденным результатам, как этот сжатый межстрочный интервал в среднем блоке. Плотный межстрочный интервал может быть сложным для сканирования, если у вас есть когнитивные нарушения, поэтому не рекомендуется использовать основанное на длине или даже процентное значение для высоты строки, особенно если вы используете относительные единицы для определения размера шрифта.
Боты на LaMDA смогут разговаривать с человеком на равных
Что на мгновение возвращает нас к левому блоку. Хотя в нем также используются значения высоты строки на основе длины в сочетании с размером шрифта на основе длины, наша цель — поддержать пользователей, которым необходимо изменить в своем браузере размер шрифта по умолчанию. Выбор основанных на длине значений для размера шрифта и высоты строки в этом левом примере может решить проблему сжатого межстрочного интервала, но при этом не решается необходимость отображать текст в соответствии с настройкой размера шрифта в браузере, поэтому использовать длину для значения высоты строки не рекомендуется.
Тем не менее, в приведенном справа блоке отображается удобный межстрочный интервал, поскольку для высоты строки используется относительное, а не абсолютное значение. Кроме того, это значение является основанным на длине, что соответствует рекомендациям относительно высоты строки. Значение высоты строки без единиц измерения рассчитывается путем деления значения высоты строки контейнера в пикселях на размер шрифта в пикселях. В этом случае начальный размер шрифта равен 16px, а начальное значение высоты строки равно 24px, как показано в примере слева. Когда вы делите высоту строки на размер шрифта 24px / 16px, результат равен 1,5.
Использование этого значения без единиц измерения в правильном примере вместо использования значения на основе длины позволяет масштабировать интервал между строками контейнера пропорционально размеру шрифта на основе rem, избегая при этом проблем наследования CSS. Конечный результат удобнее для пользователей, которые предпочитают увеличивать страницу и настраивать размер шрифта браузера по умолчанию в соответствии со своими предпочтениями.
Помните, однако, что у нас все еще настройка масштабирования страницы 100% с очень большим размером шрифта браузера. Пользователям также может потребоваться увеличить масштаб страницы при очень большом размере шрифта браузера. Например, если пользователь выбирает очень большой размер шрифта браузера и устанавливает масштаб страницы 200%,
эта дополнительная гибкость может создать еще более удобный опыт чтения при увеличении.
Если пользователь также использует один из параметров доступности операционной системы, например, функцию масштабирования изображения в картинке MacOS,
использование относительных единиц CSS вместо того, чтобы полагаться только на пиксели, действительно увеличивает скорость чтения в сценарии со слабым зрением.
Эта дополнительная гибкость дает контроль над опытом пользователя.
Инструменты преобразования пикселей
Если вы ранее не преобразовывали пиксели в относительные единицы в CSS, вот несколько полезных инструментов, которые помогут вам начать работу.
Вот отличная таблица ссылок для преобразования в пиксели от Estelle Weyl.
Если вам нужен онлайн-калькулятор, pxtoem — надежный инструмент.
Кроме того, это видео на YouTube от Джен Симмонс из редактора шрифтов Mozilla Firefox — отличный способ узнать и поэкспериментировать с относительными единицами в CSS.
Завершение …
Помните, что пользователи действительно меняют свои настройки под капотом, и мы должны сохранять контроль над их опытом просмотра. Если вы используете для стилей оформления относительные единицы CSS, вы можете поддерживать согласованность макетов, не оказывая негативного влияния на потребности пользователей.
Автор: Kathleen McMahon
Редакция: Команда webformyself.
Источник