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

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

14 июня CSS, Статьи 488

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

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

Подпишитесь на обновление сайта!

Ваш e-mail:

Понравилась статья? Вы не хотите пропускать новые статьи, посвященные качественной верстке? Тогда подпишитесь на RSS или на электронный ящик и получайте новые статьи мгновенно! Также можете следить за нами в Twitter.

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

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

Мы в социальных сетях

Поддержите наш проект

R356817191883

41001285897040

В примечании к платежу укажите: "Помощь проекту".

Подпишись на css-live.ru

и получай обновления по email

Лучшие материалы

Комментарии Просмотры

Мы на Facebook

Мы ВКонтакте