postcss解决兼容_使用PostCSS进行跨浏览器兼容性-优快云博客

本文介绍了如何利用PostCSS来解决跨浏览器兼容性问题，包括自动添加供应商前缀、为旧版IE提供后备方案、处理未广泛支持的属性等。通过设置项目、安装相关插件，如Autoprefixer、postcss-will-change等，可以简化CSS的编写和维护，确保在不同浏览器中的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

postcss解决兼容

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

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

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

让我们开始！

设置您的项目

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

您可以在之前的教程中了解如何为PostCSS设置Gulp或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')()
        ]

通过运行grunt postcss命令进行快速测试编译，然后检查项目的“目标”文件夹中现在是否包含新的“ style.css”文件。

现在，您已经安装了本教程所需的所有插件，并且可以继续研究如何使用它们来增强样式表的跨浏览器兼容性。

自动添加供应商前缀

我们将介绍的一些跨浏览器兼容性的措施仅在特定的用例中才需要。另一方面，我建议通过Andrey Sitnik创建的Autoprefixer插件对每个项目执行自动供应商前缀。

在任何给定的时间都很难保留哪些属性需要哪些供应商前缀的标签，而不必使用Autoprefixer。将Autoprefixer用作每个项目的一部分，它将根据CanIUse.com的数据检查代码，然后根据需要添加供应商前缀，而无需考虑它。

让我们做一些测试，看看Autoprefixer的作用。将以下动画和flexbox代码添加到项目的“ src / style.css”文件中：

@keyframes animationExample {
    from {
		width: 0;
	}
	to {
		width: 100%;
	}
}

.animateThis {
	animation: animationExample 2s;
	display: flex;
}

运行grunt postcss gulp css或grunt postcss来编译文件，并且您的“ dest / style.css”现在应包含此供应商前缀代码：

@-webkit-keyframes animationExample {
    from {
		width: 0;
	}
	to {
		width: 100%;
	}
}

@keyframes animationExample {
	from {
		width: 0;
	}
	to {
		width: 100%;
	}
}

.animateThis {
	-webkit-animation: animationExample 2s;
	        animation: animationExample 2s;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}

如您所见，根据CanIUse.com在animation和flexbox上提供的数据，供应商前缀已自动添加。

指定浏览器支持级别

Autoprefixer使用Browserlist来确定它将添加支持的浏览器版本。在默认设置下，它将根据需要应用供应商前缀：

> 1％：全球超过百分之一的人使用的浏览器
后2个版本： CanIUse.com跟踪的每个浏览器的后两个版本
Firefox ESR：最新的Firefox版本
Opera 12.1： Opera版本12.1

我们上面运行的示例是在Autoprefixer的默认设置下编译的。这意味着已包括对IE10和Safari 8的支持，因此自动插入了animation和flexbox所需的-ms-和-webkit-前缀。

但是，IE11和Safari 9不需要这些前缀，因此，如果将浏览器列表配置设置为仅支持IE11 +和Safari 9+，则将不再添加这些前缀。

通过将browsers设置传递到Gulpfile或Gruntfile中的Autoprefixer来进行尝试，如下所示：

// In the Gulpfile 'processors' array:
autoprefixer({browsers:'safari >= 9, ie >= 11'}),

// In the Gruntfile 'processors' array:
require('autoprefixer')({ browsers: ['safari >= 9, ie >= 11'] }),

现在，如果您重新编译CSS，您会发现原始代码和已编译代码之间没有区别。这是因为，在没有要求支持Safari 8或IE10的情况下，没有添加供应商前缀来适合它们。

为“将改变”属性添加备用

will-change属性用于使浏览器提前知道设计中的某些元素将被动画化。这使浏览器可以优化渲染过程并防止延迟和闪烁。但是，IE / Edge，Safari或Opera Mini目前不支持此属性。

同样由Andrey Sitnik创建的postcss-will-change插件添加了一个后备功能，可以帮助这些浏览器更好地渲染，即使它们不能有效地支持will-change 。它通过添加backface-visibility属性来实现，该属性触发创建将由GPU处理的合成器层。

例如，将此代码添加到您的“ src / style.css”文件中：

.thisWillChange {
    will-change: transform;
}

编译样式表，您应该会看到回退出现在“ dest / style.css”文件中：

.thisWillChange {
    backface-visibility: hidden;
    will-change: transform;
}

注意：此插件应在Gulpfile / Gruntfile中的Autoprefixer 之前加载。这是为了允许Autoprefixer将供应商前缀添加到backface-visibility属性中，如下所示：

/* Fallback with vendor prefixes */
.thisWillChange {
    -webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	will-change: transform;
}

添加旧版IE问题的后备广告

得益于Microsoft改进的浏览器版本，以及主要团体在放弃对旧IE的支持方面处于领先地位，我们正逐渐趋近于不必始终考虑存在问题的旧版浏览器的后备方法和变通方法。微软本身将在2016年放弃对IE8的支持。 Bootstrap 4 Alpha是最近发布的，它也放弃了对IE8的支持。 Google于2012年停止支持IE8，并于2013 年放弃了对IE9的支持。

综上所述，每个项目结束时都必须根据具体情况进行评估，如果您针对的是使用旧版浏览器的高使用率的人群，那么您别无选择，只能尽力而为支持他们。在这种情况下，以下插件可以帮助您减轻痛苦。

创建`rgba()`颜色后备

IE8不支持rgba()颜色，因此Guillaume Demesy的postcss-color-rgba-fallback插件添加了平坦的十六进制颜色作为后备颜色。

例如，将此代码添加到您的“ src / style.css”文件中：

.rgbaFallback {
    background: rgba(0,0,0,0.5);
}

进行编译，您应该会看到十六进制代码回退到了“ dest / style.css”文件中：

.rgbaFallback {
    background: #000000;
    background: rgba(0,0,0,0.5);
}

创建`opacity`后备

IE8无法处理opacity属性，因此Vincent De Oliveira的postcss-opacity插件添加了IE特定的过滤器以实现相同的效果。

将此代码添加到您的源样式表中：

.opacityFallback {
    opacity: 0.5;
}

编译后，您应该看到添加了适当的-ms-filter后备：

.opacityFallback {
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

在伪元素上将`::`转换为`:`

它被认为是最好的做法产生伪元素，例如当.element::before使用双冒号符号:: 。这是为了帮助将它们与伪类（如.element:hover区分开，伪类应使用单个冒号: 。

但是，IE8不支持双冒号符号::来创建伪元素，它仅支持单个冒号: 。通过使用Sven Tschui的postcss-pseudoelements插件，您可以根据最佳实践进行编码，并且可以自动更改表示法。

添加以下double ::符号代码：

.pseudo-element::before {
    content: '';
}

编译文件，您应该看到它已简化为单个:表示法：

.pseudo-element:before {
    content: '';
}

通过按照最佳实践进行编码并使用此插件，IE8完全停用后，您就可以在不使用插件的情况下重新处理CSS并使用适当的语法。

为`vmin`添加`vm` Fallback

在IE9中，不支持视口相对单位vmin ，而是使用等效单位vm 。如果你是迎合IE9中， postcss-VMIN文森特·奥利维拉插件将增加vm台作为备用。

将此代码添加到您的“ src / style.css”文件中：

.vmFallback {
    width: 50vmin;
}

重新编译，结果代码应在以下位置添加vm单元后备：

.vmFallback {
    width: 50vm;
    width: 50vmin;
}

为`rem`单位添加`px`后备广告

IE8根本不支持rem单元，在IE9和IE10中， psuedo-elements和font速记声明均不支持它们。使用Vincent De Oliveira和Rob Wierzbowski的node-pixrem插件，无论使用rem单位如何，都可以自动添加基于px的后备。

将此代码添加到您的源样式表中：

.remFallback {
    height: 10rem;
	font: 2rem Arial;
}

.remFallback::before {
	content: '';
	line-height: 1rem;
}

重新编译，您应该看到添加了所有适当的px后备：

.remFallback {
    height: 160px;
    height: 10rem;
	font: 32px Arial;
	font: 2rem Arial;
}

.remFallback:before {
	content: '';
	line-height: 16px;
	line-height: 1rem;
}

回顾一下

总结一下以上内容：

Autoprefixer是每个项目的必备工具
可以将Autoprefixer配置为根据需要支持的浏览器添加供应商前缀
如果在项目中使用动画，请考虑使用插件postcss-will-change
如果支持IE8，请考虑使用插件postcss-color-rgba-fallback ， postcss-opacity ， postcss-pseudoelements和postcss-vmin 。
如果支持IE8，IE9，IE10，请考虑使用node-pixrem插件