From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/image-set()/index.html | 78 +++++++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 files/ru/web/css/image-set()/index.html (limited to 'files/ru/web/css/image-set()/index.html') diff --git a/files/ru/web/css/image-set()/index.html b/files/ru/web/css/image-set()/index.html new file mode 100644 index 0000000000..f837d98a4b --- /dev/null +++ b/files/ru/web/css/image-set()/index.html @@ -0,0 +1,78 @@ +--- +title: image-set() +slug: Web/CSS/image-set() +translation_of: Web/CSS/image-set() +--- +
{{cssref}}
+ +

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() для обеспечения двух альтернативных {{cssxref("background-image")}} свойств, из которых будет выбрано более подходящее по разрешению: обычная версия и версия с высоким разрешением.

+ +

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

+ +

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

+ + + +

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

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}{{Spec2('CSS4 Images')}} 
+ +

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

+ + + +

{{Compat("css.types.image.image-set")}}

+ +

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

+ + -- cgit v1.2.3-54-g00ecf