CSS-live.ru

Как избавиться от префикса для -webkit-device-pixel-ratio

Давным-давно решили вебкитовцы, что нужно медиавыражение для разрешения экрана. Но вместо того, чтобы использовать уже стандартизированное выражение 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).

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

P.S. Это тоже может быть интересно:

2 комментария

  1. Следует упомянуть, что не точек на пиксель, а точек на длину пикселя(1/96in). Иначе можно сделать вывод что на экране с 2dppx у нас в пикселе css будет 2 физических пикселя, а не 4.

    P.S. У вас тут неприятная ситуация с textarea, которые на самом деле фреймы, нельзя текст вставить, если он пустой.

    1. В CSS пиксель (px) – по определению единица длины (1/96in). Так что про однопиксельный квадратик, наверное, правильнее сказать «квадратный пиксель», по аналогии с квадратным миллиметром и т.п., хоть это и может звучать непривычно:)

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.