Атом = Пиксель

Поводом для написания статьи стала фраза, которую я сегодня услышал: «Пиксель неделим!» — в контексте того, что 12.5px в CSS может быть триггером для негатива. Например, что значение было подобрано вручную и, скорее всего, что-то сделано не так, а значит, от работы «попахивает». На самом деле работа была сделана великолепно, а триггером является вьетнамские флешбэки индивидуума.

Причём тут атомы?

Слово «атом» происходит от греческого слова ἄτομος (átomos):

• a- — «не»
• tomos — «резать», «делить»

👉 Буквально: «неделимый»

Но в начале XX века в ходе лабораторных испытаний было доказано, что атом может разрушаться и делиться. С этих самых пор пошла путаница: неделимый оказался делимым.

Это же, как мне кажется, сейчас происходит с пикселем. Когда разработчик смотрит в CSS, он не оперирует физическими пикселями, теми самыми «лампочками» на дисплее, а работает с виртуальными пикселями, которые очень даже делимы.

Физические и виртуальные пиксели

Физический пиксель — «лампочка», которая загорается на дисплее. Лампочку сложно поделить. В этом случае фраза про «неделимость» уместна.

Виртуальный пиксель пришёл к нам примерно в 2010 году с появлением Retina-дисплеев (дисплеев с удвоенной плотностью пикселей).

Для примера: стандартный iPhone с диагональю 3.5 дюйма и разрешением 320×480 имел плотность 163 PPI (pixels per inch, пикселей на дюйм), а iPhone 4s с Retina-дисплеем с той же диагональю 3.5 дюйма, но разрешением 640×960, имел плотность 326 PPI.

В этот момент нужно было что-то придумывать: если оставить всё как есть, интерфейс типичного сайта занимал бы половину дисплея и выглядел бы крайне мелко.

Грубо говоря, на стандартном экране блок шириной 320px занимал бы всю ширину дисплея, а на Retina-дисплее половину, так как у дисплея физических 640px, но диагональ-то одинаковая — 3.5 дюйма. Так и появилась идея разделения физического и виртуального пикселей.

Пиксели в вебе

В CSS пиксель — это не физическая точка экрана, а виртуальная единица измерения. Всё это давно закреплено в стандартах. Нам осталось только прочитать часть спецификации CSS Values and Units Module Level 3#px.

Если перевести определение из спецификации простыми словами, то:

CSS-пиксель — это единица длины, равная 1/96 дюйма.

В этот момент становится сложнее, так как появляются дюймы, которые нам непривычны. Но проблема даже не в этом: эти дюймы тоже не являются физическими =)

Дело в том, что в той же спецификации вводится понятие «эталонного пикселя» (reference pixel). Он определяется не через реальные пиксели экрана, а через угол зрения человека. То есть это такой размер, который выглядит одинаково комфортным при просмотре с обычного расстояния. Грубо говоря глядя на два разных устройства на одинаковом расстоянии размеры интерфейса должны выглядеть если не одинаково, то хотя бы не слишком разными.

Формула тут странная для обывателя, но я её покажу: ~0.0213° (на расстоянии вытянутой руки) =) Учёные решили, что всем так будет комфортно. Давайте просто скажем им спасибо!

Как мне кажется, тут происходит важный сдвиг в мышлении:

CSS-пиксель — это про восприятие, а не про железо.

120×40 px

120×40 px

Раньше, на старых мониторах, всё было проще: один CSS-пиксель примерно совпадал с одним физическим пикселем экрана.

Но с появлением Retina и HiDPI-дисплеев это изменилось. Теперь:

• на обычном экране: 1 CSS px ≈ 1 физический пиксель
• на Retina: 1 CSS px = 2×2 или больше физических пикселей

То есть браузер сам решает, сколько реальных пикселей использовать, чтобы элемент выглядел «правильно» по размеру.

Например, если задать текст 20px, он должен быть читаемым и на старом ноутбуке, и на современном смартфоне с огромной плотностью пикселей. Чтобы этого добиться, браузер просто увеличивает количество физических пикселей, которые стоят за одним CSS-пикселем.

Поэтому важно запомнить одну вещь:

px в CSS — это не пиксель экрана. Это удобная, стабильная единица измерения для интерфейсов.

Именно благодаря этому можно спокойно верстать интерфейсы, не думая о том, сколько там у пользователя DPI, PPI или какие у него физические размеры экрана. Просто следуй пикселям в макете, которые так бережно тебе предоставил дизайнер.

Ну и что там с неделимостью и 12.5px? Дизайнер вряд ли в макете укажет дробное количество пикселей, поэтому вряд ли они появятся в CSS. Но если верстальщику нужно указать дробное значение — это нормально и не означает, что «загорится половина лампочки» дисплея. Загорится часть области от целого значения, а уж какая именно решит браузер.

Если кто-то из твоих знакомых, коллег, в комментарии - скажет, что половины пикселя не бывает, то скинь ему эту статью =)