由于压缩效果更好，我尝试在整个网站中使用 webp 图像。不过我知道 safari 不支持 webp。图像是使用加载的background-image: url("img/img.webp)。然后我应用其他background特性。
我明白了<picture>标签可用于根据浏览器支持来显示不同的图像。就像这样。
<picture>
<source srcset="some_img.webp" type="image/webp">
<img src="some_img.jpg"alt="">
</picture>
然而，如果有一种方法可以使用 css 来实现这一点，这样我就不必为所有图像编写新的 html 和样式，那就方便多了。
例如这样的事情
#image-id {
background-image: url("../img/img.webp", "../img/img.jpeg"); // show jpeg if webp not supported
}
或者如果这是不可能的那么也许是这样的
@media only screen and (safari-specific-property:) {
background-image: url("../img/img.jpeg"); // show jpeg for safari
}
在保持浏览器支持（最好使用 css）的同时使用 webp 图像的最佳解决方案是什么？
这里有有趣的探索。据我所知，您可以使用级联或@supports。
让我们看看使用级联时会发生什么：
.bg {
/*fallback */
background-image: url("https://www.gstatic.com/webp/gallery/2.jpg")
background-image: url("https://www.gstatic.com/webp/gallery/1.webp");
}
它会工作得很好，但理解 JPG 和 WebP（占大多数）的浏览器将发出两个请求，这不是最佳的。
现在，让我们看看 @supports at 规则。
@supports not (background-image: url("https://www.gstatic.com/webp/gallery/1.webp")) {
.bg {
background-image: url("https://www.gstatic.com/webp/gallery/2.jpg")
}
}
.bg {
background-image: url("https://www.gstatic.com/webp/gallery/1.webp");
}
由于大多数浏览器都支持 WebP，我认为这个解决方案是理想的。
不支持WebP的浏览器将陷入获取JPG的at规则。然后他们将阅读下一个调用 WebP 的样式，并且由于他们不支持该功能，因此他们只会坚持使用 JPG。
我想知道您是否可以在 safari 浏览器中尝试一下。
感兴趣的链接：
https://css-tricks.com/how-supports-works/
https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
