Поддержка устройств с retina дисплеем

Сегодня на рынке доступны устройства с экранами с широким диапазоном плотности пикселя. Отличительной особенностью некоторых устройств, таких как iPhone 5, iPad, MacBook Pro, являются дисплеи с высокой разрешающей способностью. Как веб-разработчики или дизайнеры, мы должны гарантировать качественный внешний вид нашего веб-сайта или веб-приложения на устройствах с высокой плотностью пикселя. Чтобы избежать размытия изображения на устройствах с высокой плотностью пикселя, мы должны обеспечить более высокое разрешение изображений на нашем веб-сайте или веб-приложении, используя последнюю CSS функцию Webkit, названную — «Image Set». Используя функцию Image Set, браузер может определить плотность пикселя устройства пользователя и показать пользователю подходящую версию изображений.

Использование CSS Image Set

Пример использования css -webkit-image-set:

.myImage {
  background: -webkit-image-set(url(images/bg.jpg) 1x, url(images/bg_2.jpg) 2x);
  height: 300px;
  width: 300px;
}

Как Вы видите выше, мы применяем функцию Image Set к свойствам фона. В функции Image Set 1x приравнивается к стандартной версии изображения; 2x приравнивается к изображению с высокой разрешающей способностью. Это заставляет браузер выбирать и использовать в качестве фона изображение с высокой разрешающей способностью, в случае если устройство пользователя имеет высокую плотность пикселей, иначе ему будет предоставлена стандартная версия изображения.

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

Поддерживаемые браузеры

Функция Image Set CSS в настоящее время поддерживается Safari и Chrome, Opera и другие, их список можно посмотреть на сайте Can I use, использующих webkit префикс. Сейчас функция Image Set только обсуждается, и не является частью спецификации CSS4. Это может измениться в любой момент.