npm 包 supports.js 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

在前端开发中，我们常常会遇到需要检测浏览器是否支持某些功能的情况，比如某个 API、某种 CSS 样式等。这时我们就需要写一些兼容性代码来处理低版本浏览器的情况。而 supports.js 这个 npm 包则提供了一种更优雅的处理方式。

Supports.js 的核心思想是通过 CSS3 的 @supports 规则，检测浏览器是否支持某一属性或属性值，从而完成不同情况下的代码引入。

安装

你可以通过 npm 安装 supports.js：

npm install supports --save

当然，你也可以直接在项目中引入 jsdelivr 上的支持 URL：

<script src="https://cdn.jsdelivr.net/npm/supports/dist/supports.js"></script>

使用

假如我要检测浏览器是否支持 WebP 格式的图片，如果支持就加载 WebP，否则加载 PNG 的图片。

首先，我们需要在 CSS 里设置 @supports 规则：

@supports (image-rendering: pixelated) {
  .has-webp img {
    content: url('sample.webp');
  }
}

然后在 JavaScript 里调用 supports 方法，检测浏览器是否支持该规则。支持时函数返回 true，不支持时返回 false：

import supports from 'supports';

if (supports('(image-rendering: pixelated)')) {
  document.documentElement.classList.add('has-webp');
}

最后，在 HTML 中加上对应的图片：

<img src="sample.png" alt="">

这样，当浏览器支持 WebP 格式时图片变成了 sample.webp，否则仍是原来的 sample.png。

需要注意的是，@supports 规则支持的并不是所有属性和属性值，具体可以查看MDN 的支持列表。如果想要检测更底层的特性，也可以使用 supports.js 提供的 support 方法。

总结

Supports.js 提供了一种优雅的处理浏览器兼容性的方法，通过 CSS3 的 @supports 规则来检测浏览器是否支持某一属性或属性值，并在 JavaScript 中调用该规则来引入不同情况下的代码。虽然并不是所有特性都支持 @supports 规则，但 supports.js 为我们提供了不少便捷的使用方法，可以减少浏览器兼容性代码的书写量，提高开发效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60065f89238a385564ab6d53