如何通过 CSS 检测是否支持 webp 图像

Question

如果支持 webp 图片，你如何在 CSS 中检测？

.home-banner-background {
     background-image: url('img/banner.jpg');
 }
 /*Here is an if statement that will check if webp is supported*/ {
        .home-banner-background {
            background-image: url('img/banner.webp');
        }
}

是否有一个“if”语句可以做到这一点？

Answer 1

现代 webkit 浏览器将使用带有以下 CSS 的 WebP 背景图像：

.map {background-image: url('../img/map.jpg');}
  @supports (background-image: -webkit-image-set(url('../img/map.webp') 1x)) {
    .map {background-image: -webkit-image-set(url('../img/map.webp') 1x) }
  }

Answer 2

将该type()函数与 CSS 一起使用image-set()以提供替代图像格式。在示例中，该type()函数用于提供 WEBP 和 JPEG 格式的图像。如果浏览器支持 webp，它将选择该版本。否则它将使用 jpeg 版本。

.box {
  background-image: image-set(
    url("large-balloons.webp") type("image/webp"),
    url("large-balloons.jpg") type("image/jpeg"));
}

多库

Answer 3

您可以使用Modernizr。它是一种检测用户浏览器上可用功能的工具。它只是一个添加到您网站的脚本，使用它，您可以编写如下内容：

.no-webp .home-banner-background {
     background-image: url('img/banner.jpg');
 }

.webp .home-banner-background {
     background-image: url('img/banner.webp');
}

Answer 4

目前 CSS 不支持此功能。

在CSS Images Module Level 4 Draft 中，建议了后备解决方案，但目前任何地方都不支持。( 2.4. Image Fallbacks and Annotations: the image() notation )

但是，如果它在几年后成为标准的一部分，那么您也许可以这样写：

.home-banner-background {
    image:image('img/banner.webp', 'img/banner.jpg')
}

在那之前你需要使用像 Modernizer 这样的工具，正如Fifi的回答中所建议的

或者，pictureHTML 标记可能是您能想到的，但是否在您的情况下可用取决于图像应如何在您的网站上调整大小：

<picture>
  <source srcset="img/banner.webp" type="image/webp">
  <source srcset="img/banner.jpg" type="image/jpeg"> 
  <img src="img/banner.jpg">
</picture>