Веб-разработчики любят хорошую священную войну, будь то из-за наших любимых фреймворков JavaScript или таких принципов, как разделение ответственности. Меня всегда интересовала битва за единицы CSS, а именно между пикселями и относительными единицами измерения, такими как ремы и эмс.
В течение многих лет большинство веб-дизайнеров и разработчиков измеряли вещи в пикселях. Их довольно легко понять - один пиксель в коде соответствует одному пикселю на экране, или, по крайней мере, так было раньше. Но пиксели имеют абсолютный размер, что означает, что они не меняются в зависимости от предпочтений пользователя (кроме масштабирования браузера, которое может переопределить все). Это плохо для доступности. Введите em и rems, две единицы относительного размера шрифта, которые обеспечивают преимущества доступности, отсутствующие в пикселях, но, возможно, не имеют интуитивной семантики. Естественно, за прошедшие годы появились десятки сообщений в блогах, в которых обсуждались те или иные подходы (Просто используйте пиксели Бена Фрейна и Люди не меняют размер шрифта 16 пикселей по умолчанию в своем браузере, просто назвать несколько).
Здесь, в Интернет-архиве, есть люди с обеих сторон этой проблемы, и когда встал вопрос о переходе от пикселей к rem и em, у нас не было серьезных доказательств того или другого. Многие из старых аргументов опираются на непроверенные предположения; Толпа про-пикселей предполагает, что почти никто не меняет размер шрифта в браузере или ОС, в то время как сторонники rem / em полагают, что это делают многие люди. Казалось, что если мы собираемся принять решение, которое может повлиять на пользовательский опыт для наших пользователей, у нас должны быть некоторые данные для его резервного копирования.
Был задан вопрос «Сколько пользователей просматривают главный сайт Интернет-архива с размером шрифта по умолчанию, отличным от стандартного значения 16 пикселей?». Зная это, мы могли бы определить, на скольких пользователей повлияет изменение размера с относительными единицами измерения, такими как бэр / эмс.
Используя методику, которую я описываю ниже, мы обнаружили, что ответ составляет 3,08% наших пользователей. Это довольно большое число, превышающее большинство показателей рыночной доли браузеров, таких как Internet Explorer, Edge или Opera Mini.
Данные
Мы используем Google Analytics (хотя и в значительной степени анонимизированный для защиты конфиденциальности наших пользователей), поэтому мы решили отправлять размер шрифта через специальный параметр, что позволяет неплохо сегментировать аудиторию.
| Size | Percent of Users | | ------- | ---------------- | | 16px | 96.92% | | 20px | 0.50% | | 19.2px | 0.42% | | 25.6px | 0.23% | | 17px | 0.18% | | 24px | 0.15% | | 20.8px | 0.15% | | 14.4px | 0.10% | | 18px | 0.10% | | 18.4px | 0.08% | | 18.56px | 0.07% | | 14px | 0.07% |
Как видите, существует довольно большой разброс размеров, в том числе пара, меньше 16 пикселей. Это было удивительно, поскольку мы предположили, что единственный реальный вариант использования - это пользователи с ослабленным зрением, которым для удобочитаемости нужен шрифт большего размера. Возможно, есть пользователи, которые устанавливают меньшие размеры, чтобы уместить на экране больше контента, возможно, потому, что они используют небольшой монитор, или это может быть связано с тем, что браузеры устанавливают значения по умолчанию, отличные от 16 пикселей.
| Browser | Percent of Users | | --------------------------- | ---------------- | | Chrome (desktop) | 37.81% | | Android Webview | 12.89% | | Opera Mini | 10.88% | | Firefox (desktop) | 9.17% | | Samsung Internet | 5.56% | | Internet Explorer (desktop) | 5.26% | | Chrome (mobile) | 5.16% | | Android Browser | 4.35% | | Safari (desktop) | 3.26% | | UC Browser | 2.35% | | Opera (desktop) | 1.07% | | Internet Explorer (mobile) | 0.32% | | Safari (mobile/tablet) | 0.29% |
Итак, какие браузеры используют эти люди? Некоторые из результатов здесь довольно близко соответствуют населению в целом (например, Desktop Chrome), но непропорционально большое количество пользователей, не использующих 16px, на Android Webview, Opera Mini, Samsung Internet и Desktop IE. Мобильные версии Chrome и Safari заметно отсутствуют в пятерке лучших. Низкие значения iOS Safari, вероятно, являются результатом плохой поддержки настройки размера шрифта. В последний раз, когда я тестировал, я вообще не мог найти способ изменить размер шрифта (настройки ОС не влияют на браузер)!
Код
Идея здесь довольно проста: мне нужно было узнать размер, который браузер будет использовать без каких-либо определенных автором стилей, и установить его в качестве специального параметра GA. Однако мы используем Bootstrap, который применяет к элементу базовый размер шрифта 62,5% (10 пикселей, если по умолчанию - 16 пикселей).
Я рассмотрел два возможных подхода:
# 1: вычислите стиль на основе корневого элемента, а затем отмените модификацию Bootstrap на 62,5%.
const original = window.getComputedStyle(document.documentElement).fontSize;
const number = parseFloat(original, 10);
const unit = original.replace(/(\d*.\d+)|\d+/, '');
const defaultFontSize = (number * 1.6) + unit;# 2: Создайте <div> и назначьте ему размер шрифта medium, чтобы сбросить его размер до значения по умолчанию.
const div = document.createElement('div');
div.style.fontSize = 'medium';
document.body.appendChild(div);
const defaultFontSize = window.getComputedStyle(div).fontSize;
document.body.removeChild(div);№2 кажется более простым, поскольку он не полагается на магические числа или математику, но не учитывает пользователей, которые могут установить собственный размер шрифта с помощью расширений браузера или пользовательских таблиц стилей, а не настроек браузера / ОС. Тем не менее, если вы запускаете этот тест на сайте, для которого уже задан явный размер пикселя в корневом элементе <html> (т. Е. font-size: 16px), вы можете быть вынуждены пойти по этому пути.
Для теста архива я выбрал №1. Однако у него есть свои неудобства: в старых версиях Internet Explorer есть проблемы с округлением, которые приводят к таким значениям, как 9,92 пикселей вместо 10 пикселей при применении размера шрифта Bootstrap 62,5%. Когда мы обратим это вычисление, мы получим 15,888 пикселей вместо 16 пикселей. Мы решили отслеживать значения 15,888 пикселей в GA, но при анализе пользователей рассматриваем их как эквивалентные 16 пикселей.
Вот как это выглядит, когда все это вместе:
function setDefaultFontSizeCustomDimension() { // Ignore very old browsers. if (!('getComputedStyle' in window)) { return; }// Get the <html> font size. const original = window.getComputedStyle(document.documentElement).fontSize;// Undo the 62.5% size applied in the Bootstrap CSS. const numPixels = parseFloat(original, 10); const unit = original.replace(/(\d*\.\d+)|\d+/, ''); const defaultFontSize = (numPixels * 1.6) + unit;// Our Analytics integration is a little different, but here’s the standard style for reference. ga('set', 'dimension1', defaultFontSize); }
РЕДАКТИРОВАТЬ: Если вам интересно, почему я также не рассмотрел масштабирование браузера, это потому, что современные браузеры обрабатывают масштабирование, изменяя размер эталонного пикселя, изменяя, сколько реальных пикселей представляет один пиксель CSS. Таким образом, масштабирование изменяет размер элемента в реальных пикселях, но оставляет его вычисленное значение в CSS таким же, как и раньше, что означает, что наши измерения будут работать нормально.
Однако в результате такого поведения «эталонного пикселя» и плотность пикселей экрана, и уровень масштабирования представлены одним и тем же значением в JS: window.devicePixelRatio. MacBook без Retina при масштабировании 200% может дать такое же devicePixelRatio значение, как MacBook с Retina при 100%, поэтому отслеживание этого не дает нам много информации.
Вывод
С тех пор наша команда провела более качественное исследование того, как пользователи склонны использовать такие функции, как масштабирование браузера и настраиваемые размеры шрифтов, и в настоящее время находится в процессе перехода на относительные единицы для большинства элементов на Archive.org.
Я призываю другие компании и некоммерческие организации выполнить этот же тест. Его действительно легко настроить для большинства сайтов (особенно если размер корневого шрифта уже является относительным), и он даст четкие результаты, которые помогут вам при принятии решений о дизайне и разработке. Если от 2 до 3% (или более!) Ваших пользователей полагаются на нестандартный размер шрифта, вы должны знать об этом, чтобы вы могли либо поддержать это предпочтение пользователя, либо принять сознательное решение не поддерживать его. Делать что-то меньшее - откровенно безответственно, особенно с учетом того, что пользователи с большим размером шрифта могут использовать эти размеры для компенсации нарушений зрения.
Вероятно, это фантастика - надеяться, что это положит конец священной войне между пикселями и rem / em. Я бы предпочел, чтобы веб-профессионалы тратили свое время на сбор реальных данных о пользователях и принятие обоснованных решений, а не на споры друг с другом. Но опять же, где в этом веселье?
