Псевдоэлементы, оптимизированные для разрешения

Веб-функции: image-set()

Использование изображений, оптимизированных по разрешению, в псевдоэлементах CSS (таких как ::before или ::after) позволяет добавлять декоративные значки или структурную графику, не загромождая HTML дополнительными узлами DOM. Объединив псевдоэлементы с функцией CSS image-set(), вы можете предоставить браузеру несколько форматов (например, AVIF или WebP) и разрешений (например, 1x и 2x). Браузер автоматически выберет наиболее оптимальное изображение для возможностей устройства пользователя.

Реализация

Функцию image-set() можно использовать непосредственно в свойстве content псевдоэлемента или в его свойстве background-image (при настройке content: ""). Обратите внимание, что хотя указание графического формата с помощью type() и разрешения (например, 1x или 2x) дает наилучшие результаты, оба этих аргумента являются необязательными.

.icon-button::before {
  /* Using image-set directly in the content property */
  /* MANDATORY: Always order your formats from most optimized (AVIF) to least optimized (JPEG/PNG). 
     The browser will stop at the first supported format. */
  content: image-set(
    url("icon.avif") type("image/avif") 1x,
    url("icon-2x.avif") type("image/avif") 2x,
    url("icon.webp") type("image/webp") 1x,
    url("icon-2x.webp") type("image/webp") 2x,
    url("icon.png") type("image/png") 1x,
    url("icon-2x.png") type("image/png") 2x
  );
  
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

Резервные стратегии

Для старых браузеров, которые не поддерживают функцию image-set(), НЕОБХОДИМО предоставить стандартное объявление изображения перед правилом image-set(). Эта стратегия прогрессивного улучшения основана на каскадном характере CSS: неподдерживаемые правила игнорируются.

.icon-button::before {
  /* MANDATORY: Fallback for browsers that do not support image-set() */
  content: url("icon.png");
  
  /* Modern browsers will apply this and override the fallback */
  content: image-set(
    url("icon.avif") type("image/avif") 1x,
    url("icon-2x.avif") type("image/avif") 2x,
    url("icon.png") type("image/png") 1x,
    url("icon-2x.png") type("image/png") 2x
  );
}