在 Web 前端开发中，判断浏览器是否支持某个特性是很常见的需求。@nathanfaucett/supports 是一个用于判断浏览器是否支持一组 CSS 属性和属性值的 npm 包。本文将详细介绍该 npm 包的使用方法，并提供示例代码。
安装和引入
在终端中使用以下命令安装 @nathanfaucett/supports：
npm install @nathanfaucett/supports
在需要使用该 npm 包的地方引入：
import supports from '@nathanfaucett/supports';
API
@nathanfaucett/supports 默认导出一个名为 supports 的函数，该函数的签名为：
supports(property: string, value?: string): boolean;
其中参数 property 表示要判断的 CSS 属性名称，参数 value 是可选的，表示判断的属性值。
如果浏览器支持该属性（或属性值），函数将返回 true，否则返回 false。
示例代码
下面是使用 @nathanfaucett/supports 的一个示例，判断浏览器是否支持 CSS Flexbox 布局：
if (supports('display', 'flex')) {
// 浏览器支持 Flexbox 布局
} else {
// 浏览器不支持 Flexbox 布局
}@nathanfaucett/supports 还支持链式调用，可以用于判断多个属性是否都被支持。例如：
-- -------------------- ---- ------- -- - ------------------- ------- ------------------------------- ---------------------------------- - - -- ----- --- ---- -- - ---- - -- ------ --- ---- -- -
支持链式调用的原理是每个 supports 函数都返回一个新的函数实例，该实例也具有 supports 函数的特性。
深入理解
@nathanfaucett/supports 的实现原理是创造一个虚拟元素，给这个元素设置所需的 CSS 属性和属性值，然后判断浏览器是否正确地计算了这个元素的样式。
下面是 @nathanfaucett/supports 的源码：
-- -------------------- ---- -------
------ ------- -------- ------------------ ------ -
----- ------- - ------------------------------
--- ----------- - --------------
-- ------- --------------------- --- --------- -
--------------------- - ----- -- ---
------ ------------------------
- ---- -
----- ------ - --------- ----- ---- ------ ----------
----- --------------- - -------------------------------- - ------------------
--- ---- - - -- -- - -------------- - - --- ---- -
-- ------- --------------------- - ---------------- --- --------- -
--------------------- - ---------------- - ----- -- ---
------ ----------------------- - -----------------
-
-
-
------ ------
-该函数接受两个参数，分别是要判断的 CSS 属性名称和属性值。如果当前浏览器支持该属性（或属性值），函数会返回 true，否则返回 false。
函数首先创建一个虚拟元素，然后获取其 style 属性。如果当前浏览器原生支持该属性，就直接在虚拟元素上设置该属性和属性值并判断属性是否生效。如果浏览器不支持该属性，则使用该属性的厂商前缀形式，并在虚拟元素上设置该属性和属性值，再次判断属性是否生效。
总结
@nathanfaucett/supports 是一个方便的 npm 包，用于判断浏览器是否支持一组 CSS 属性和属性值。可以使用该包减少代码量，并提高浏览器兼容性。如果你在开发过程中需要判断浏览器支持性，相信 @nathanfaucett/supports 能大有用处。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcd967216659e2449ce