Вы хотите снова создавать веб-сайты, как в 1999 году? Пиксели - это то, что нужно. Стремитесь к ретро, соблюдайте нормы, потому что то, что вы знаете, уже работает, и пока оно работает, стоит на лужайке и энергично трясти кулаком ...
Пиксели были DOA с первого дня
Эта статья не о маленьких красно-зеленых и синих пикселях, которые вы видите на экране, не волнуйтесь, с ними все в порядке. Речь идет о использовании пикселей в HTML и CSS. В теории нет нужды, в пикселях CSS нет шкалы # f, прокручивайте кредиты!
Должна быть веская причина, почему ...
Интернет основан на стандартах 21-летней давности, не предназначенных для современного мира.
Исход 12: 8
В ту же ночь они должны съесть жареное на огне мясо.
Библия намекает, что мы должны есть мясо животного в день убоя. Но теперь есть холодильники, морозильники и консервы как решения новых и старых проблем.
CSS1 говорит:
Все дисплеи примерно одинакового размера, поэтому используйте статические шрифты.
Наши требования изменились с 1996 года. Теперь у нас есть гораздо более широкий выбор устройств, разрешений и соотношений сторон экрана, которые нужно учитывать. Несмотря на введение новых функций, в отличие от пищевой промышленности базовая технология не изменилась по следующим причинам:
Обратная совместимость
И это правильно, потому что теперь мы все вынуждены терпеть нищету Интернета.
Непонимание размера шрифта
В прошлом я обсуждал тему неправильных представлений о размере шрифта с несколькими коллегами-разработчиками и дизайнерами.
Обычно они реагируют так, будто я впервые говорю им, что Санта-Клаус ненастоящий ...
Размер шрифта не зависит от размера пикселя на экране.
- Одно семейство шрифтов с размером 16 пикселей может иметь символ «A» высотой 24 пикселя, другое семейство шрифтов с размером 16 пикселей может иметь символ «A» высотой 26 пикселей.
- Не принимая во внимание то, как браузеры и операционные системы по-разному обрабатывают кернинг, сглаживание и, что наиболее важно, соотношения пикселей устройства.
- У каждого пользовательского агента есть свой набор значений по умолчанию.
Поэтому, пожалуйста, прекратите разговоры о «идеальном пикселе» в Интернете, это невозможно, если вы не стремитесь создать статическую страницу для одного браузера на одном размере экрана для одного типа устройства.
НИКОГДА НЕ ИСПОЛЬЗУЙТЕ ПИКСЕЛИ ДЛЯ ВНЕДРЕНИЯ ВЕБ-САЙТОВ СНОВА!
Я не первый и не последний, кто извергнет это, так что проверьте других грешников, прежде чем бросить первый камень. Сделайте глубокий вдох ...
- ТОЧНОСТЬ ПЛАВАЮЩЕЙ ТОЧКИ. Все блоки шрифтов в CSS (включая px) могут обрабатывать плавающие значения в современных браузерах. Обычно, если 1 пиксель «предполагается» эквивалентным размеру пикселя экрана (что неверно), может показаться бессмысленным использование десятичных дробей при проектировании для устройства с соотношением пикселей 1. При просмотре этих показателей на Для устройства с DPR 2/3 или 4 очевидная точность теряется из-за отказа от десятичных знаков. REM и EM «поощряют» большую точность за счет использования десятичных чисел.
- ЭТО ИЛЛЮЗИЯ: пиксели в CSS НЕ являются пикселями реального размера экрана. На самом деле это оптические эталонные блоки. Эта путаница иногда подталкивает профессиональных и опытных веб-разработчиков к таким глупым вещам, как создание миксинов преобразования пикселей в em для препроцессоров CSS. Возможно, поэтому некоторые тратят так много времени на споры с дизайнерами UX из-за крошечных различий между полями и отступами. Соотношение пикселей устройства отражает размер оптического эталонного блока и зависит только от устройства или уровня масштабирования рабочего стола, установленного пользователем.
- БОЛЬШЕ ОБСЛУЖИВАНИЯ РЕЗУЛЬТАТОВ PX. Ничего нового здесь не сказано, но, как правило, гораздо проще поддерживать проценты по сравнению с контейнерами размером в пиксель.
- МАСШТАБ ОТНОСИТЕЛЬНЫХ РАЗМЕРОВ УСТАНОВКИ С РАЗМЕРОМ ШРИФТА: всегда используйте единицы REM или EM в тех местах, где обычно требуется установить фиксированную ширину или высоту. Контейнеры с размерами EM относятся к размеру шрифта. С модулями EM, если вы обновляете размер шрифта текстового контейнера, ширина или высота (задано в EM) будет пропорционально масштабироваться, что означает, что вы изменяете только 1 значение, а не 3 при использовании пикселей. С REM это верно, если вы измените размер корневого шрифта документа.
(Да, EM более продвинутый, чем REM, несмотря на то, что он старше, также EM по какой-то причине лучше работает для точек останова медиа-запросов, чем REM в браузерах).
Есть несколько случаев, когда пиксели необходимы, и лишь немногие из этих обстоятельств необходимы для создания фактического макета.
EM против REM
Размер шрифта с использованием EM зависит от размера шрифта его родительского контейнера. Но иногда компаундирование нежелательно и сложнее в обслуживании. Единицы РЗМ относительно документа. В случае сомнений используйте REM (IE9 +) для простоты.
Использование единиц REM
Если вы пришли из древнего мира пикселей, вам может быть трудно внезапно начать использовать блоки REM. Вот несколько советов.
- Конечно, 1rem - это 16 пикселей в CSS: но 16 пикселей в CSS не является реальной метрикой в пикселях экрана, особенно с размером шрифта. Поэтому для использования REM требуется та же игра в угадывание, которую вы проводили с пикселями.
- ± 0,5, затем ± 0,25: Если вы оцениваете любую длину наугад, как только вы окажетесь в пределах разумной близости, увеличивайте или уменьшайте на 0,5, затем снова на 2,5, прежде чем делать более конкретные предположения. Обычно это экономит время.
- Используйте калькулятор. Адресная строка представляет собой калькулятор в хроме, да!
Будущее декартово
CSS через HTML уже использует декартову систему координат, это не то, о чем я здесь спорю. Проблема в том, что в нем отсутствует ключевой ингредиент «пропорция». Все элементы могут быть пропорциональны по отношению к области просмотра с использованием%, vw или vh, за исключением свойства font-size. Даже единицы REM не могут помочь. Модули vw и vh игнорируются, поскольку они нарушают доступность масштабирования в настольных браузерах при использовании с font-size.
CSS и HTML вместе составляют нечистую 2D-структуру
Это не относится к SVG. Но в SVG пока нет функции переноса текста или модели форматирования.
Мы застряли в 1996 году. Чтобы переместить веб-дизайн в 21 век, нам, по крайней мере, нужна пропорциональная 2D-система для размера шрифта.
Нам нужно сохранить все на оси x (ширина окна) пропорционально. Это также делает элементы шкалы оси y пропорционально, но масштабирование оси y не влияет на масштабирование оси x.
Было несколько попыток JavaScript сделать так, чтобы шрифты масштабировались пропорционально в браузере, некоторые использовали пиксели, а некоторые использовали единицы em / rem. Те, которые используют пиксели, ошибочны.
Так почему же пиксели мертвы?
- Они статичны (но технически статичны и большинство остальных)
- Они не соблюдают размер корневого шрифта после изменений (они не соответствуют размеру корневого шрифта, как единицы REM и EM)
- Такие свойства, как поля, отступы и высота строки, не масштабируются естественным образом при их установке в строке.
- Предполагается, что они являются целыми числами, что обычно приводит к менее точным реализациям при различных соотношениях пикселей.
- Судя по всему, Bootstrap 4 сбрасывает пиксели для REM.
- Пиксели создают иллюзию того, что они равны пикселям на экране, что приводит к неправильным представлениям и в конечном итоге сбивает с толку новых разработчиков.
- Маловероятно, что пиксели станут жизнеспособным решением для масштабирования шрифтов в будущем, поскольку дизайн полностью зависит от пропорций.
Я так понимаю, почему у пикселей в веб-дизайне нет серьезного будущего!
Спасибо за терпение ;-)