在前端开发中，我们常常会需要对 CSS 样式进行前缀处理以解决不同浏览器对样式的兼容性问题。而一个常用的方法是使用 Less 或 Sass 进行编译，但如果你只是想使用原生的 CSS，那么你可以使用 npm 包 css-prefix。本文将提供详细的使用教程，并且包含相关示例代码。
安装
使用 npm 安装：
npm install css-prefix --save
使用 yarn 安装：
yarn add css-prefix
使用
安装成功后，在 JavaScript 文件中引入 CSSPrefix：
const CSSPrefix = require('css-prefix')或使用 ES6 模块语法：
import CSSPrefix from 'css-prefix'
prefix(css: string, opts: object): string
css: 待前缀处理的原生 CSS 代码字符串。opts: 进一步配置前缀生成情形的可选项对象。
-- -------------------- ---- -------
----- --------- - ---------------------
----- --- - -
---- -
-------- -----
---------------- -------
-
-
----- -------- - ---------------------
---------------------输出结果：
-- -------------------- ---- ------- ---- - -------- ------------ -------- ------------- -------- ------------ -------- ----- ----------------- ------- ------------------------ ------- -------------- ------- ---------------- ------- -
$vendor: object
除了默认情况，CSSPrefix 还提供了预定制前缀对象，让你可以根据需要获取相应的前缀。当然，如果不选用也没有关系，CSSPrefix 会自动根据浏览器引擎生成相应的前缀。这里介绍三种预定制的 $vendor 字符串值（即对象的键名），分别为：
$vendor.chrome$vendor.firefox$vendor.safari
这些键名所对应的值均为对应浏览器引擎特定的前缀字符串。以 Chrome 浏览器为例，代码如下：
-- -------------------- ---- -------
----- --------- - ---------------------
----- --- - -
---- -
-------- -----
---------------- -------
-
-
----- -------- - --------------------- -
-------- ------------------------
--
---------------------输出结果：
-- -------------------- ---- ------- ---- - -------- ------------ -------- --------- -------- ------------- -------- ------------ -------- ----- ----------------- ------- -------------- ------- ------------------------ ------- -------------- ------- ---------------- ------- -
$keepUnprefixed: boolean
CSSPrefix 还提供了一个可选项 $keepUnprefixed，默认为 false。开启时，该选项将保留原始的无厂商前缀的 CSS 属性。以 Chrome 浏览器为例：
-- -------------------- ---- -------
----- --------- - ---------------------
----- --- - -
---- -
-------- -----
---------------- -------
-
-
----- -------- - --------------------- -
-------- -------------------------
---------------- ----
--
---------------------输出结果：
-- -------------------- ---- ------- ---- - -------- ------------ -------- --------- -------- ------------- -------- ------------ -------- ----- ----------------- ------- -------------- ------- ------------------------ ------- -------------- ------- ---------------- ------- -
CSSPrefix 将在前面的每个前缀之前保留无厂商前缀的属性。如果该属性已经在加了厂商前缀，它将在任何情况下都不会被保留。
理解
在 Webkit 内核的浏览器中，例如 Chrome 和 Safari，使用 display: -webkit-box; 会让元素采用 Flexbox 盒模型，而在 Firefox 中，这个样式将解释为 旧版 Box 盒模型，这可能不是你想要的。
通过使用 CSSPrefix 包，你不用再为某个属性不同的浏览器的前缀担心。不用为写成这样的代码：display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; 感到疲倦。CSSPrefix 将会自动帮你处理它！
结论
CSSPrefix 简单易用，能快速地处理 CSS 样式的前缀问题。在某些情况下，CSSPrefix 甚至可以直接替代 CSS 预处理器的作用。使用 npm 包 css-prefix，在你的大型托管库或开源项目中轻松处理样式前缀问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/css-prefix