这是我参与8月更文挑战的第21天，活动详情查看：8月更文挑战
上一篇文章我们讲了一个非常重要的工具——browserslist，可以说，在当前涉及前端工程化的项目中，都会用到这个工具。而我们在安装 webpack 时，这个工具也已经帮我们安装好了。当然，我们也已经说过，这个工具其实也是借助于 caniuse-lite 这个小工具去帮助我们查询要适配的浏览器的。但是，我们不需要直接去用这个 caniuse-lite 工具，我们只需要使用 browserslist 这个工具就可以了（比如在命令行终端运行命令 npx browserslist 查看当前项目中配置的条件匹配哪些浏览器；（MacOS 上）运行命令 npx browserslist "> 1%, last 2 versions, not dead" 来验证命令中传入的条件匹配哪些浏览器）。
再次强调一下，browserslist 这个工具非常重要（帮助我们查询要适配的浏览器，并且很多工具（babel、postcss 等）都会依赖它去查询），大家一定要知道如何使用它，最好还要知道它的原理（即到底是如何查询的，上一章我们也已经讲了哈）。因为我们待会要讲到的 postcss 以及后面要讲到的 babel 其实都是会用到这个 browserslist 工具的。
下面，我们要讲的一个工具也会在 webpack 中用到，在其它很多地方比如 gulp、rollup 里面也都会用到它，这个工具就是 PostCSS。
-
什么是
PostCSS呢？PostCSS是一个通过JavaScript来转换样式的工具（也就是说这个工具里面其实是一些js代码，通过js代码来对样式做一些转换），并且它是一个独立的工具（即可以单独使用）；- 这个工具可以帮助我们进行一些
CSS的转换和适配，比如自动添加浏览器前缀（以便某些样式做多个浏览器的适配）、css样式的重置（以便统一多个浏览器中的某些样式）； - 但是实现这些功能，我们需要借助于
PostCSS对应的插件（因为PostCSS本身能做的事情非常少，要想实现某个功能，必须依赖为这个功能编写的对应的PostCSS插件）；
-
如何使用
PostCSS呢？主要就是两个步骤：- 第一步：查找
PostCSS在构建工具中的扩展，比如webpack中的postcss-loader（只有通过这个loader才能引入postcss这个工具，然后在webpack中进行使用）； - 第二步：选择你完成某个特定功能所需要的
PostCSS相关的插件，然后进行添加（将这个插件配置到某个位置，让postcss工具在使用时可以去加载这个插件）；
- 第一步：查找
下面，先来演示一下单独使用 PostCSS（不依赖 webpack）的过程，我们直接使用这个工具来给某个样式添加前缀。
命令行使用 postcss
-
我们能不能直接在终端使用
PostCSS呢？- 也是可以的，但是我们需要单独安装一个工具——
postcss-cli（因为只有安装了这个工具，才能在命令行中使用postcss，这里的cli是command line interface的意思）
- 也是可以的，但是我们需要单独安装一个工具——
好，那首先我们先来安装 postcss（有了 postcss，待会才能去使用它呀），在命令行终端运行命令：
npm install postcss -D
好，安装完 postcss 以后，项目的 node_modules 目录下就已经有 postcss 了，下面就可以使用它了，但是，这里不好直接使用（就是说不能直接运行 npx postcss），还需要安装 postcss-cli 这个工具。只有安装了 postcss-cli，才能在命令行中去使用 postcss（安装 postcss-cli 的目的是为了在命令行中使用 postcss）。
npm install postcss-cli -D
安装完 postcss-cli 后，我们就可以使用它了。
我们在 ./src/css 目录下新建 test.css 文件，在里面编写如下代码：
/* :fullscreen：一个伪类，可以选中全屏里面的所有的元素。如果想做多个浏览器的适配，需要添加浏览器前缀 */
:fullscreen {
}
.content {
/* 使用 user-select，也需要加浏览器前缀 */
user-select: none;
/* 使用 transition，因为现在很多浏览器已经支持它了，所以加不加浏览器前缀都可以 */
transition: all 2s ease;
}
补充：你可能会问，哪些东西需要加浏览器前缀，哪些东西不需要加浏览器前缀呢？这里有一个网站——autoprefixer.github.io/，我们可以在这个网站上测试查看。
好，上面 test.css 文件中的代码应该是要加浏览器前缀的，那么我们就要使用 postcss 对上述代码进行处理，来给相关代码加上对应的浏览器前缀。如何处理呢？我们可以运行以下命令：
npx postcss -o result.css ./src/css/test.css
下面就上述命令做解释：
npx postcss：相当于去执行./node_modules/.bin/postcss.cmd（MacOS中为postcss）；-o：表示输出路径，后面跟输出路径，这里即输出到当前目录下的result.css文件中；./src/css/test.css：表示要用postcss处理的文件；
合起来就是：用 postcss 对 ./src/css/test.css 进行处理，处理完后输出到 result.css。
运行上述命令后，效果如下：
可以看到在当前目录下生成了 result.css 文件，里面也确实生成了内容，但是，并没有添加上任何浏览器前缀。这是为甚莫呢？其实，运行上述命令时，终端中的提示信息已经告诉我们原因了，我们前面也已经说过，postcss 这个工具本身能做的事情很少，如果我们需要它帮忙处理一些额外的东西，就必须依赖这个工具对应的一些插件（就是说必须告诉 postcss 要使用哪些插件，然后这些插件再去帮助我们去进行特定的操作）。那我们现在需要什么插件呢？我们需要一个给样式添加前缀的插件——autoprefixer。下面，首先安装这个插件：
npm install autoprefixer -D
安装完成后，我们再来运行之前的命令，但这次我们还要通过 --use 参数告诉 PostCSS 本次处理要使用的插件：
npx postcss --use autoprefixer -o result.css ./src/css/test.css
（注意：运行上述命令的前提是已经安装好 autoprefixer 了，安装过之后，运行上述命令，PostCSS 就会去找这个插件。）
运行上述命令后，效果如下：
可以看到，这次不再出现刚才的提示了，而且，:fullscreen 和 user-select 也都加上了浏览器前缀，但是，这里的 transition 没有添加任何浏览器前缀，这是因为当前要适配的浏览器默认都已经支持 transition 了，那么这种情况下就不需要加前缀啦。（我尝试在 .browserslistrc 中修改了一些条件再做测试，结果还是没有给 transition 添加上前缀，可能直接在命令行终端使用 postcss 时不会去读 .browserslistrc 这个文件......）但 transition 这个属性确确实实是跟我们要适配的浏览器是有关系的，如果要适配的浏览器不支持 transition，到时就会给 transition 加上前缀，而如果支持，就不会添加任何东西。
以上，就是关于直接在命令行中使用 postcss，同时结合 autoprefixer 这个插件，给我们的有关样式添加浏览器前缀的操作方法。
