От автора: веб-разработчики любят хорошую святую войну, будь то над нашими любимыми фреймворками или принципами JavaScript, такими как разделение проблем. Меня всегда интересовало, как борются в CSS единицы измерения, а именно — война между пикселями и относительными единицами, такими как rems и ems.
В течение многих лет большинство веб-дизайнеров и разработчиков измеряли вещи в пикселях. Их довольно легко понять — один пиксель в кодах отображает один пиксель на экране или, по крайней мере, так было раньше. Но пиксели имеют абсолютный размер, то есть они не меняются в зависимости от предпочтений пользователя (кроме масштабирования браузера, что может переопределить все). Это не здорово для доступности. Введите ems и rems, две единицы измерения размера шрифта, которые обеспечивают преимущества доступности, отсутствующие в пикселях, но, возможно, не имеют их интуитивной семантики. Естественно, на протяжении многих лет существовали десятки сообщений в блогах, в которых обсуждался один подход или другой.
Здесь, в Internet Archive, у нас есть люди по обе стороны проблемы, и когда встал вопрос о переходе от пикселей к rems и ems, у нас не было много убедительных доказательств для того или другого. Многие из старых аргументов полагаются на непроверенные предположения; толпа пропикселей предполагает, что почти никто не изменяет свой размер шрифта браузера или ОС, в то время как сторонники rem / em предполагают, что многие люди это делают. Казалось, что если мы собираемся принять решение, которое может повлиять на пользовательский опыт для наших пользователей, у нас должны быть некоторые данные для его резервного копирования.
Вопрос: «Сколько пользователей просматривают основной сайт Internet Archive с размером шрифта по умолчанию, отличным от общего значения 16 пикселей?» Зная это, мы определяем, на сколько пользователей будет влиять размер с относительными единицами, такими как rems / ems.
Используя описанную ниже методологию, мы обнаружили, что ответ составляет 3,08% наших пользователей. Это довольно большое число, что выше, чем большинство учетных записей на рынке браузеров, таких как Internet Explorer, Edge или Opera Mini.
Данные
Мы используем Google Analytics (хотя и сильно анонимный для защиты конфиденциальности наших пользователей), поэтому мы решили отправить размер шрифта с помощью пользовательского размера, что позволяет использовать некоторую приятную сегментацию аудитории.
| Размер | Процент пользователей| | ------- | ---------------- | | 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 пикселей. Это было удивительно, так как мы предположили, что единственным реальным вариантом использования были пользователи с ослабленным зрением, которым требуется более широкий размер шрифта для удобства чтения. Возможно, есть пользователи, устанавливающие меньшие размеры, чтобы разместить больше контента на экране, возможно, потому, что они используют небольшой монитор, или это может быть из-за того, что браузеры устанавливают значения по умолчанию, отличные от 16px.
| Браузер | Процент пользоватлей | | --------------------------- | ---------------- | | 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% |
Итак, какие браузеры используют эти люди? Некоторые из результатов здесь довольно близки к общей численности населения (например, настольный Chrome), но есть несоразмерные числа пользователей не 16 пикселей на 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 и назначить ему размер шрифта для сброса его размера по умолчанию.
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), вы можете быть вынуждены пройти этот маршрут.
Для теста Archive я выбрал с №1. Тем не менее, у него есть свой собственный недостаток: более старые версии Internet Explorer имеют проблемы округления, которые приводят к значениям, например, 9.92px вместо 10px при использовании 62,5% шрифта Bootstrap. Когда мы отменим этот расчет, мы получим 15.888px вместо 16px. Мы решили отслеживать значения 15.888px в GA, но рассматриваем их как эквивалентные 16px при анализе пользователей.
Вот как это выглядит, когда все собрано:
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);
}EDIT: Если вы задаетесь вопросом, почему я не считаю зум в браузере, это потому , что современные браузеры обрабатывают масштабирование путем изменения размера «опорного пикселя», меняя количество реальных пикселей в одном CSS «пикселе». Таким образом, масштаб изменяет размер элемента с точки зрения реальных пикселей, но оставляет его вычисляемое значение в CSS таким же, каким оно было до этого, что означает, что наши измерения будут работать нормально.
В результате такого поведения «опорного пикселя», хотя, как плотность пикселей экрана и уровень масштабирования представлены одним и тем же значением в JS: window.devicePixelRatio. Не-Retina MacBook с масштабированием 200% может обеспечить такое же значение devicePixelRatio что и Retina MacBook, на 100%, поэтому отслеживание его не дает нам много информации.
Заключение
С тех пор наша команда провела более качественные исследования о том, как пользователи склонны использовать такие функции, как масштабирование браузера и размеры пользовательских шрифтов, и в настоящее время находятся в процессе перехода на относительные единицы для большинства элементов на Archive.org.
Я призываю другие компании и некоммерческие организации выполнить этот же тест. Это очень легко настроить для большинства сайтов (особенно, если размер корневого шрифта уже является относительным) и даст ясные результаты, которые помогут вам принять ваше решение о проектировании и разработке. Если от 2 до 3% (или более!) ваших пользователей полагаются на собственный размер шрифта, вы должны знать, что вы можете либо поддержать это предпочтение пользователя, либо принять сознательное решение не поддерживать его. Выполнение чего-либо менее откровенно безответственно, особенно учитывая, что пользователи с более крупными размерами шрифтов могут использовать эти размеры для компенсации зрительных нарушений.
Вероятно, фантазия надеется, что это положит конец священной войне между пикселями и rems / ems. Я бы предпочел, чтобы веб-профессионалы тратили свое время на сбор реальных пользовательских данных и принимали обоснованные решения, а не спорили друг с другом. Но опять же, где в этом веселье?
Автор: Evan Minto
Источник: https://medium.com/
Редакция: Команда webformyself.