postcss解决兼容_使用PostCSS进行跨浏览器兼容性

postcss解决兼容

在上一个教程中，我们总结了本系列的“快速入门”部分，现在我们可以继续使用PostCSS生成样式表，并使用各种类型的插件实现各种目的。

在本教程中，我们将使用PostCSS创建设计用于跨浏览器兼容性的样式表。 我们会：

• 自动添加供应商前缀
• 为Internet Explorer版本8、9和10添加一系列后备
• 为尚未得到广泛支持的will-change属性添加后备

让我们开始！

设置您的项目

您需要做的第一件事是根据您的喜好将项目设置为使用Gulp或Grunt。 如果您没有一个或另一个偏好，我建议您使用Gulp，因为您将需要更少的代码来达到相同的目的。

您可以在之前的教程中了解如何为PostCSS设置Gulp或Grunt项目

• PostCSS快速入门指南：Gulp设置或
• PostCSS快速入门指南：Grunt设置

分别。

但是，如果您不想从头开始手动设置项目，则可以下载本教程附带的源文件 ，并将提供的Gulp或Grunt入门项目提取到一个空项目文件夹中。

然后，在终端或命令提示符指向该文件夹的情况下，运行命令npm install 。

安装插件

现在您已经准备好空的Gulp或Grunt + PostCSS项目，我们需要安装将在本教程中使用的插件。

我们将要安装很多插件，因此，我们不会像在Gulp和Grunt的“快速入门指南”中那样一次安装一个插件，而是通过一个命令一次性安装它们。

无论您使用的是Gulp还是Grunt，请在项目文件夹中运行以下命令以安装我们将要使用的插件：

npm install autoprefixer postcss-color-rgba-fallback postcss-opacity postcss-pseudoelements postcss-vmin pixrem postcss-will-change --save-dev

现在已经安装了插件，让我们继续将它们加载到您的项目中。

通过Gulp加载插件

如果您使用的是Gulp，请将这些变量添加到文件中已存在的变量下：

var autoprefixer = require('autoprefixer');
var color_rgba_fallback = require('postcss-color-rgba-fallback');
var opacity = require('postcss-opacity');
var pseudoelements = require('postcss-pseudoelements');
var vmin = require('postcss-vmin');
var pixrem = require('pixrem');
var will_change = require('postcss-will-change');

现在，将每个这些新变量名称添加到processors数组中：

var processors = [
		will_change,
		autoprefixer,
		color_rgba_fallback,
		opacity,
		pseudoelements,
		vmin,
		pixrem
	];

通过运行gulp css命令，然后检查项目的“ dest”文件夹中是否已出现新的“ style.css”文件，来快速测试一切是否正常。

通过Grunt加载插件

如果您使用的是Grunt，请将嵌套在options对象下的processors对象更新为以下内容：

processors: [
          require('postcss-will-change')(),
          require('autoprefixer')(),
          require('postcss-color-rgba-fallback')(),
          require('postcss-opacity')(),
          require('postcss-pseudoelements')(),
          require('postcss-vmin')(),
          require('pixrem')()
        ]