Не существует такой вещи, как абсолютная единица CSS

Когда мы начинаем изучать CSS, мы обнаруживаем, что единицы измерения CSS делятся на относительные и абсолютные. Абсолютные единицы основываются на физических единицах, таких как пиксели, сантиметры и дюймы. Но с годами все абсолютные единицы в CSS утратили связь с физическим миром и стали разными видами относительных единиц, по крайней мере, с точки зрения Интернета.

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

Относительные единицы включают такие единицы, как % , em , rem , единицы области просмотра ( vw и vh ) и другие. Наиболее распространенной абсолютной единицей измерения является пиксель ( px ). Кроме того, у нас есть единица измерения сантиметр ( cm ) и единица измерения дюйм ( in ).

Теперь давайте рассмотрим, почему абсолютные единицы CSS не такие абсолютные.

CSS-пиксели

Пиксели были наиболее распространенной единицей CSS, восходящей к началу Интернета. В старом мире экранов настольных компьютеров, до появления смартфонов, пиксели экрана всегда были эквивалентны пикселям CSS.

Например, в 2007 году самым распространенным разрешением рабочего стола было 1024 × 768 пикселей. В то время мы обычно давали нашим веб-страницам фиксированную ширину в 1000 пикселей, чтобы уместить всю страницу, а оставшиеся пиксели сохранялись для полосы прокрутки браузера.

Экраны смартфонов

Смартфоны принесли еще одну тихую эволюцию, положив начало эре экранов высокой плотности. Если мы рассмотрим iPhone 12 Pro, чей экран имеет ширину 1170 пикселей, мы будем считать каждые 3 пикселя на устройстве как 1 пиксель в CSS.

Когда мы измеряем в мобильных устройствах, мы измеряем в соответствии с пикселями CSS, а не в соответствии с пикселями устройства. Подводить итоги:

• Пиксель CSS — это логические пиксели .
• Пиксели устройства — это настоящие физические пиксели .

Хорошо, но как насчет настольных устройств? Они все еще работают с тем же старым вычислением пикселей? Давайте поговорим об этом.

Настольные экраны в 2021 году

Экраны высокой плотности появились в ноутбуках несколько лет спустя. MacBook 2014 года получил первые экраны «retina» (retina является синонимом высокой плотности).

В наши дни большинство ноутбуков имеют экран высокой плотности.

Рассмотрим MacBook :

• 13,3-дюймовый MacBook Pro имеет экран шириной 2560 пикселей, но ведет себя как 1440 пикселей. Это означает, что каждые 1.778 физических пикселя действуют как 1 логический пиксель.
• 16-дюймовый MacBook Pro имеет экран шириной 3072 пикселя, но ведет себя как 1792 пикселя. Это означает, что каждые 1.714 физических пикселя действуют как 1 логический пиксель.

Среди ноутбуков для ПК я протестировал два 15,6-дюймовых экрана, один с разрешением Full HD, а другой с разрешением 4K. Результаты были интересными:

• 15,6-дюймовый экран Full-HD имеет ширину 1920 пикселей, но ведет себя как 1536 пикселей. Это означает, что каждые 1.25 физических пикселя действуют как 1 логический пиксель.
• 15,6-дюймовый экран 4K имеет ширину 3840 пикселей, но ведет себя, опять же, как 1536 пикселей. Это означает, что каждые 2.5 физических пикселя действуют как 1 логический пиксель.

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

Экраны с годами стали плотнее

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

Рекомендуемое чтение : Что на самом деле означает складная паутина?

Почему мы рассчитываем логические пиксели по-разному?

С годами, по мере того как экраны становились плотнее, мы не могли разместить больше контента на одном и том же размере экрана только потому, что на экране больше пикселей.

Подумайте об этом на мгновение. Рассмотрим Samsung Galaxy S21 Ultra . Его более узкий размер составляет 1440 физических пикселей. Мы могли бы легко разместить его на обычном экране рабочего стола. Но если бы мы это сделали, текст был бы настолько мелким, что его невозможно было бы прочитать. Из-за этого мы отделяем физические пиксели от логических пикселей.

Затем размеры в CSS (то есть ширина и высота) рассчитываются в соответствии с логическими пикселями CSS. Конечно, мы можем использовать физические пиксели для загрузки контента высокой плотности , такого как изображения и видео, например так:

 <img src="image-size-1200px.jpg" width="300" >

Хорошо, пиксели CSS не равны физическим пикселям устройства. Но у нас есть сантиметры и дюймы. Это физические единицы, связанные с физическим миром, верно? Давайте проверим их.

CSS-дюймы и CSS-сантиметры

Везде, где мы используем физические единицы, такие как дюймы и сантиметры, мы знаем, что это абсолютные единицы.

У меня возникла мысль, что если пиксели CSS не равны пикселям устройства, то, возможно, было бы неплохо использовать в Интернете физические единицы, такие как дюймы и сантиметры. Это абсолютные единицы, верно?

Чтобы быть уверенным, я проверил это. Я создал коробку шириной и высотой 1 сантиметр и задал ей красный цвет фона. Я схватил настоящую рулетку и получил сюрприз:

Сантиметр CSS не равен физическому сантиметру.

Здесь я тестирую сантиметровую единицу CSS с рулеткой на 13-дюймовом MacBook середины 2019 года:

Результат тот же для дюймов CSS:

Дюйм CSS не равен физическому дюйму.

То же самое относится и к пикам ( pc ) и миллиметрам ( mm ). Они соответствуют части либо дюйма CSS, либо сантиметра CSS, ни один из которых не связан с реальным дюймом или реальным сантиметром.

Почему дюймы и сантиметры CSS не являются реальными дюймами и сантиметрами

С 1980-х годов рынок ПК определил, что дюйм CSS эквивалентен 96 пикселям. Этот расчет пикселей был напрямую связан со стандартом DPI / PPI (пикселей на дюйм) операционной системы Microsoft Windows для мониторов того времени, наиболее распространенный из которых имел стандарт 96 DPI.

Это означало, что 1 дюйм CSS всегда будет эквивалентен 96 пикселям CSS.

Что касается сантиметров CSS, то каждый сантиметр рассчитывается непосредственно из дюймов, а это означает, что 1 дюйм равен 2.54 сантиметра. Это означает, что каждый 1 CSS-сантиметр всегда будет равен 37.7952756 CSS-пикселям.

Другими словами: 1cm = 37.7952756px (96px / 2.54) .

См. Pen [Реальные размеры CSS!] (https://codepen.io/smashingmag/pen/BaRJvWj) Элада Шехтера.

Это решение, казавшееся хорошей идеей на заре индустрии ПК (у которой был вроде бы один стандарт), оказалось плохим решением, которое сделало дюймы и сантиметры CSS устаревшими и бесполезными (по крайней мере, с точки зрения паутина).

Обратите внимание, что в 1980-х у Apple был другой стандарт для экранов — 72 DPI.

Пиксели экрана становятся плотнее

Как я уже упоминал, DPI экранов с годами становился плотнее, и мы видели экраны с разрешением от 120 до 160 DPI. И поскольку 1 дюйм CSS всегда равен 96 пикселям CSS, теперь это означает, что дюйм CSS не равен реальному физическому дюйму.

Поскольку дюйм CSS и сантиметр CSS напрямую преобразуются из пикселей CSS, а экраны с годами получили больше DPI, мы дошли до того, что эти единицы не представляют того, что они должны представлять на экранах .

Единица точки CSS

Единица измерения точки ( pt ) — одна из наименее узнаваемых единиц CSS. Как утверждает Википедия:

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

На странице Википедии показана линейка со шкалой точек внизу и шкалой в дюймах вверху:

Прежде чем мы перейдем к тому, почему эта единица на самом деле не является абсолютной единицей для Интернета, давайте рассмотрим основные единицы экранов и принтеров.

ИЦП и ДПИ

Мы уже упоминали DPI, и вы, возможно, слышали эти термины в прошлом, но если вы никогда не понимали, что именно они означают, вот краткое руководство:

• ИЦП
  Экраны состоят из множества маленьких светлых точек, называемых пикселями. Чтобы измерить плотность пикселей, мы подсчитываем количество пикселей, которые соответствуют 1 дюйму, называемому пикселями на дюйм (PPI).
• Точек на дюйм
  Принтеры печатают цветные точки. Чтобы представить плотность точек принтера, мы подсчитываем количество точек, которое соответствует 1 дюйму бумаги, называемое количеством точек на дюйм (DPI).

Короче говоря, это два способа измерения плотности визуальной информации, которую мы можем уместить на 1 дюйме.

• PPI : пикселей на дюйм (для экранов)
• DPI : количество точек на дюйм (для принтеров)

Важно отметить, что количество пикселей и точек CSS в 1 дюйме относится как к ширине, так и к высоте. Это означает, что на экране с 96 PPI прямоугольник высотой и шириной 1 дюйм будет иметь общий размер 9216 пикселей ( 96 × 96 пикселей = 9216 пикселей).

Вот наглядная демонстрация 1 дюйма с экраном 10 PPI:

Вот несколько примеров реальных расчетов CSS PPI:

«DPI» для экранов

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

Стандарты DPI/PPI

Для представления всех этих точек и пикселей у нас есть точка ( pt ).

Но единица измерения CSS определяется значением DPI принтера по умолчанию, которое, опять же, было принято в 1980-х годах и равно 72 DPI. Это означает, что 1 дюйм CSS всегда равен 72 точкам.

• 1 дюйм = 72 точки
• 1 пункт = 1/72 ^часть 1 дюйма

Пиксели для Интернета, точки для принтеров

Для веба единица измерения DPI не имеет значения. Веб-DPI определяется в соответствии с другим стандартом ( 96 DPI), о котором мы уже говорили, когда рассчитывали CSS-дюйм и CSS-сантиметр. Из-за этого нет причин использовать точечный блок в Интернете.

Примечание . 1 балл не равен (CSS) пикселям.

• 1 балл = 1.333 пикселя
• 72 точки = 1 дюйм
• 72 точки = 96 пикселей

Принтеры

В этой статье я главным образом хотел продемонстрировать, почему в Интернете не существует абсолютных единиц измерения. Но как насчет того, чтобы использовать их для принтеров? Есть ли причина использовать дюймы, сантиметры или точки CSS для принтеров?

Мой тест печати

Я провел небольшой тест, чтобы проверить, правильно ли работает стандарт DPI 1980-х годов на принтерах. Я создал две коробки: одну шириной и высотой 72 точки, а вторую шириной и высотой 1 дюйм.

Я распечатал эти две коробки на лазерном принтере, который стоит у меня в офисе. Вот мой Codepen для тестирования точек и дюймов для принтеров:

Результат

Я распечатал эту демонстрацию на лазерном принтере. К моему удивлению, если я использую 72 точки (или 1 дюйм), я получаю ровно 1 дюйм. Это означает, что для принтеров, возможно, все еще есть веская причина использовать единицы CSS, такие как пункты, дюймы и сантиметры.

Принтеры могут печатать большее количество DPI, но если мы работаем со 100% увеличением на принтере, то 72 точки (или 1 дюйм) CSS будут равны реальному физическому дюйму.

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

Рекомендуемая литература : Использование цветов HSL в CSS

Попытка создать точные размеры в Интернете

Если мы посмотрим на 16-дюймовый MacBook Pro, который имеет отношение 1.714 физических пикселей к каждому 1 пикселю CSS, мы не сможем точно предсказать размеры в Интернете.

Если мы попытаемся угадать реальное соотношение пикселей устройства на 16-дюймовом MacBook Pro, используя JavaScript window.devicePixelRatio , оно вернет неверное соотношение 2 вместо 1.714 . (И это без учета состояния масштабирования веб-браузера и операционной системы.)

Зачем нам нужны настоящие абсолютные единицы CSS

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

Основываясь на этом, я считаю, что нам нужны реальные физические единицы измерения для CSS (например, реальный сантиметр или дюйм), потому что пиксели CSS больше не имеют никакого истинного значения в Интернете.

Стоит отметить, что Firefox реализовал настоящую единицу физического миллиметра ( mozmm ​​), но удалил ее в версии 59. Я не знаю, почему они ее удалили. Возможно, это потому, что так много вещей уже зависит от пикселей CSS, таких как отзывчивые изображения и единицы em и rem . Если бы мы попытались добавить новое физическое измерение, возможно, это создало бы больше проблем, чем решило бы.

Похоже, что веб-люди настолько привыкли думать в пикселях, что, даже несмотря на то, что единица измерения пикселя CSS потеряла связь с пикселями устройства, мы будем продолжать использовать единицу измерения.

И если вы все еще думаете, что пиксели CSS — отличная единица измерения, попробуйте объяснить начинающему веб-разработчику, что на самом деле измеряет эта единица.

На данный момент у нас нет реального способа описать физические размеры в CSS.

Таким образом, пиксель CSS — наихудшая абсолютная единица, за исключением всех остальных.

Обобщить

В начале этой статьи я сказал, что абсолютные единицы CSS стали чем-то вроде новых видов относительных единиц. Мы начали с пикселей CSS и увидели разницу между пикселями CSS и пикселями устройства.

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

Заключительные слова

Это все. Надеюсь, вам понравилась эта статья и вы узнали из моего опыта. Если вам понравился этот пост, я был бы признателен, если бы услышал об этом и поделился им.

использованная литература

• «Объяснение длины CSS», Тим Чиен, Роберт Найман, Mozilla Hacks
• «Точки на дюйм», Википедия
• «Точка (Типография)», Википедия
• «Значения и единицы CSS», W3C