Приоритет формата avif с помощью свойства css background-image
Я переработал свое приложение с форматом avif для телефонных устройств (даже если он поддерживается не везде).
Этот код работает отлично, он отдает приоритет формату avif, если он поддерживается браузером:
<picture>
<source srcset="image.avif" media="(max-width:500px)" type="image/avif" />
<img src="image.jpg" alt="nice dog" />
</picture>
Но я также получил несколько изображений как
background-image
css свойство. Я попробовал свойство 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 плохо интерпретируют этот код. Любая идея ? Я пробую что-то, что все еще находится в стадии разработки для браузеров?
2 ответа
Вы правильно поняли. Свойство набора изображений еще не поддерживает объявление типа. В настоящее время это часть черновой версии 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. Однако я бы не стал полагаться на это в производственном приложении.
Надеюсь, это вам помогло. :)
Есть ли сценарий, который сообщал бы браузерам вернуться к полностью поддерживаемому изображению? avif в webp webp в png webp в jpg svg в pgn