image-set()

CSS функция image-set() это способ позволить браузеру выбрать наиболее подходящее изображение CSS из заданного набора, в первую очередь для экранов с высокой плотностью пикселей.

Разрешение экрана и пропускная способность могут отличаться в зависимости от устройства и доступа к сети. Функция image-set()  обеспечивает наиболее подходящее разрешение изображения для устройства пользователя, предоставляя набор параметров изображения — каждый с соответствующим объявлением разрешения — из которых браузер выбирает наиболее подходящее для устройства и настроек. Разрешение может использоваться в качестве прокси для размера файла — клиент на медленном мобильном соединении с экраном высокого разрешения может предпочесть получать изображения с более низким разрешением, а не ждать загрузки изображения с более высоким разрешением.

image-set() позволяет автору предоставлять параметры, а не определять, что нужно каждому отдельному пользователю.

Синтаксис

image-set() = image-set( <image-set-option># )
где <image-set-option> = [ <image> | <string> ] <resolution> и
      <string> в качестве <url>

Значения

Чаще всего вы можете увидеть значение url() как <string>, но <image> может быть любым типом изображения, кроме набора изображений. Функция image-set() не может быть вложена в другую функцию image-set().

Блоки <resolution> включают в себя x или ddpx, для точек на пиксель, dpi для точек на дюйм, и dpcm для точек на сантиметр. Каждое изображение в наборе image-set() должно иметь уникальное разрешение.

Примеры

background-image: image-set( "cat.png" 1x,
                             "cat-2x.png" 2x,
                             "cat-print.png" 600dpi);

Этот пример демонстрирует использование image-set() для обеспечения двух альтернативных background-image свойств, из которых будет выбрано более подходящее по разрешению: обычная версия и версия с высоким разрешением.

Вопросы доступности

Браузеры не предоставляют никакой специальной информации о фоновых изображениях для вспомогательных технологий. Это важно прежде всего для экранных считывающих технологий, так как они не объявят о своём присутствии и поэтому ничего не передадут своим пользователям. Если изображение содержит информацию, критически важную для понимания общего назначения страницы, лучше описать её семантически в документе.

Спецификации

Спецификация Статус Комментарий
CSS Images Module Level 4
Определение 'The image-set() notation' в этой спецификации.
Рабочий черновик  

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

BCD tables only load in the browser

Смотрите также