"CSS Live". Сверстай свой мир

Решили некогда вебкитовцы, что было бы полезным медиавыражение для разрешения экрана. Но вместо того, чтобы использовать уже стандартизированное выражение resolution, они изобрели -webkit-device-pixel-ratio. Медиавыражение resolution принимает лишь «количество точек на дюйм» и «количество точек на сантиметр», тогда как -webkit-device-pixel-ratio принимает «количество точек на px». Но все они в своей основе — одно и то же, поскольку 1in = 96px = 2.54cm. (Справедливости ради, не всё из этого было так понятно в 2006-м, так что простим вебкитовцам их отсебятину).

Таким образом, чтобы избавиться от префикса для -webkit-device-pixel-ratio, всё, что нужно — это преобразовать его в resolution, который уже реализован во всех остальных браузерах. Проще всего умножить значение на 96 и дописать dpi. Вроде такого:

@media (-webkit-min-device-pixel-ratio: 2), /* Webkit */
       (min-resolution: 192dpi)             /* Все остальные */ {
...
}

«Но подождите!» — воскликните вы. — «Я не хочу считать всю эту математику! Разве не может рабочая группа CSS стандартизировать device-pixel-ratio, чтобы не нужно было никаких расчетов?» Мы могли бы… но тогда у нас были бы два свойства, являющиеся одним и тем же. И набирать device-pixel-ratio жутко неудобно, не правда ли? Так что вместо этого мы добавили единицу dppx, что значит «точек на px». Таким образом мы избегаем высчитывания dpi не только в медиавыражениях, но и везде, где используются единицы разрешения. Вместо добавления нового медиавыражения device-pixel-resolution браузеры могут лишь включить поддержку новой единицы dppx (которая уже находится в статусе кандидата в рекомендации) для старого выражения resolution. Тогда вы сможете просто написать (min-resolution: 2dppx).

Оригинал статьи и автор