Приоритет формата avif с помощью свойства css background-image

Question

Я переработал свое приложение с форматом avif для телефонных устройств (даже если он поддерживается не везде).

Этот код работает отлично, он отдает приоритет формату avif, если он поддерживается браузером:

      <picture>
   <source srcset="image.avif" media="(max-width:500px)" type="image/avif" />
   <img src="image.jpg" alt="nice dog" />
</picture>

Но я также получил несколько изображений как background-imagecss свойство. Я попробовал свойство image-set, но безуспешно.

      div {
  background-image: -webkit-image-set(
        url('image.avif') type("image/avif"),
        url('image.jpg') type("image/jpeg"));
  background-image: image-set(
        url('image.avif') type("image/avif"),
        url('image.jpg') type("image/jpeg"));
}

Я смотрел пример 2 здесь . Даже Firefox или Chrome плохо интерпретируют этот код. Любая идея ? Я пробую что-то, что все еще находится в стадии разработки для браузеров?

Answer 1

Вы правильно поняли. Свойство набора изображений еще не поддерживает объявление типа. В настоящее время это часть черновой версии CSS4, которую вы также связали: https://drafts.csswg.org/css-images-4/

На данный момент я просто конвертирую свои изображения в AVIF с помощью https://avif.io/ и использую сценарий обнаружения, чтобы добавить класс «avif» в свой HTML. Тогда это очень просто:

      .image {background-image:url("image.jpg")}
.webp .image {background-image:url("image.webp")}
.avif .image {background-image:url("image.avif")}

Есть несколько типов скриптов обнаружения:

• https://dev.to/nucliweb/detect-avif-image-support-to-use-in-your-css-4pen
• https://github.com/djpogo/avif-webp-css-support
• https://avif.io/blog/tutorials/use-avif-in-css/ (скоро)

Еще один хакерский способ - это сделать медиа-запрос для функции видимости контента, поскольку она запускалась с теми же версиями, что и поддержка AVIF в Chrome и Opera. Однако я бы не стал полагаться на это в производственном приложении.

Надеюсь, это вам помогло. :)

Answer 2

Есть ли сценарий, который сообщал бы браузерам вернуться к полностью поддерживаемому изображению? avif в webp webp в png webp в jpg svg в pgn