Вы хотите снова создавать веб-сайты, как в 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. Вот несколько советов.

  1. Конечно, 1rem - это 16 пикселей в CSS: но 16 пикселей в CSS не является реальной метрикой в ​​пикселях экрана, особенно с размером шрифта. Поэтому для использования REM требуется та же игра в угадывание, которую вы проводили с пикселями.
  2. ± 0,5, затем ± 0,25: Если вы оцениваете любую длину наугад, как только вы окажетесь в пределах разумной близости, увеличивайте или уменьшайте на 0,5, затем снова на 2,5, прежде чем делать более конкретные предположения. Обычно это экономит время.
  3. Используйте калькулятор. Адресная строка представляет собой калькулятор в хроме, да!

Будущее декартово

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.
  • Пиксели создают иллюзию того, что они равны пикселям на экране, что приводит к неправильным представлениям и в конечном итоге сбивает с толку новых разработчиков.
  • Маловероятно, что пиксели станут жизнеспособным решением для масштабирования шрифтов в будущем, поскольку дизайн полностью зависит от пропорций.

Я так понимаю, почему у пикселей в веб-дизайне нет серьезного будущего!

Спасибо за терпение ;-)