使用背景图像css属性确定avif格式的优先级

Question

我将我的应用程序重构为适用于手机设备的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的here。甚至火狐和chrome都不能很好地解释这段代码。有什么想法吗？我是不是在尝试浏览器仍在起草中的东西？

Answer 1

你的线索是对的。image-set属性尚不支持类型声明。这是您还链接的CSS4草案版本的一部分：https://drafts.csswg.org/css-images-4/

现在，我只是简单地使用https://avif.io/将我的图像转换为AVIF，并使用检测脚本将"avif“类添加到我的超文本标记语言中。然后它就像这样简单：

.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/ (即将上线)

另一种老生常谈的方式是向媒体查询内容可见性功能，因为它的发布版本与Chrome和Opera中支持AVIF的版本相同。然而，我不会依赖于生产应用程序。

希望这能帮到你。:)