简介
在前端开发中，我们常常会遇到需要检测浏览器是否支持某些功能的情况，比如某个 API、某种 CSS 样式等。这时我们就需要写一些兼容性代码来处理低版本浏览器的情况。而 supports.js 这个 npm 包则提供了一种更优雅的处理方式。
Supports.js 的核心思想是通过 CSS3 的 @supports 规则，检测浏览器是否支持某一属性或属性值，从而完成不同情况下的代码引入。
安装
你可以通过 npm 安装 supports.js：
--- ------- -------- ------
当然，你也可以直接在项目中引入 jsdelivr 上的支持 URL：
------- ----------------------------------------------------------------------
使用
假如我要检测浏览器是否支持 WebP 格式的图片，如果支持就加载 WebP，否则加载 PNG 的图片。
首先，我们需要在 CSS 里设置 @supports 规则：
--------- ----------------- ---------- -
--------- --- -
-------- -------------------
-
-然后在 JavaScript 里调用 supports 方法，检测浏览器是否支持该规则。支持时函数返回 true，不支持时返回 false：
------ -------- ---- ----------- -- ---------------------------- ------------- - --------------------------------------------------- -
最后，在 HTML 中加上对应的图片：
---- ---------------- -------
这样，当浏览器支持 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