介绍
本文将会介绍 npm 包 fam-autoprefixer 的使用方法。该包是一个自动添加 CSS 浏览器前缀的工具，用来避免浏览器间兼容性问题。
安装
你可以通过 npm 安装该包：
npm install fam-autoprefixer --save-dev
使用
在你的项目中使用该包时，你需要先创建一个 gulp 任务来进行 CSS 前缀的添加。下面是一个简单的示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------ - ----------------------------
------------------------- ---------- -
------ ------------------------
--------------------
--------- ------ - -----------
-------- -----
---
-------------------------
---在这个示例中，首先引入 gulp 核心模块和 fam-autoprefixer 包，然后创建了一个名为 autoprefixer 的 gulp 任务，通过获取所有的 CSS 文件，自动为其添加前缀并输出到 dist 目录中。
而 autoprefixer 函数接收一个对象参数，其中包括了两个属性：
- browsers: 用于指定需要支持的浏览器的版本；
- cascade: 用于控制是否要美化代码（即添加缩进和空格）。
深入探讨
浏览器前缀
浏览器前缀是浏览器内核厂商用于实现 CSS3 特性的前缀，其中常见的包括：
- -webkit-：Chrome、Safari；
- -moz-：Firefox；
- -o-：Opera；
- -ms-：Internet Explorer。
为了兼容不同浏览器，我们需要在 CSS3 属性前添加其对应的前缀。
以 CSS3 中的 transform 属性为例，我们将其加上前缀后，代码如下：
transform: rotate(30deg); -webkit-transform: rotate(30deg); /* Chrome, Safari */ -moz-transform: rotate(30deg); /* Firefox */ -o-transform: rotate(30deg); /* Opera */ -ms-transform: rotate(30deg); /* Internet Explorer */
fam-autoprefixer 实现原理
fam-autoprefixer 是基于 Autoprefixer 实现的，其原理是通过分析 CSS 的特性，基于浏览器兼容性数据自动添加前缀，从而自动适配不同浏览器。
Autoprefixer 内置了 Can I Use 和统计浏览器持有率数据，能够优化前缀的添加逻辑，逐渐趋近于自动化和智能化。
而 fam-autoprefixer 则对 Autoprefixer 进行了更进一步的封装，提供了一些默认的浏览器版本的配置项，使得使用更为便利。
完整示例
下面是一个完整的 gulpfile.js 文件，用于将 src 目录中的所有 CSS 文件添加前缀并输出到 dist 目录下。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------ - ----------------------------
------------------------- ---------- -
------ ------------------------
--------------------
--------- ------ - -----------
-------- -----
---
-------------------------
---
-------------------- ------------------在命令行中执行 gulp 命令即可进行 CSS 前缀的添加。
总结
npm 包 fam-autoprefixer 是一种高效便利的工具，可用于自动为 CSS 代码添加浏览器前缀。本文简要介绍了该包的基本使用和工作原理，希望能为前端同学提供有帮助的指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b7881e8991b448d8fb8