supports_使用@supports规则检测浏览器CSS支持

由于浏览器对包含哪些功能有自己的决定，因此我们的Web开发人员经常必须确定浏览器是否支持特定功能，然后我们使用Polyfills （如果需要）填补空白。 处理这种情况的流行方法是使用Modernizr，但是您知道我们也可以仅使用CSS来做到这一点吗？

W3C草案中正在制定一条名为 @supports的新规则。 在本文中，我们将引导您逐步了解此规则的工作原理，以使您可以通过CSS检测浏览器功能。

使用@support规则

与Modernizr不同， @supports规则需要属性和指定的值。 假设我们只想将CSS3网格应用于支持它的浏览器。 我们可以这样写。

@support (display: grid;) {
	.selector {
		display: grid;
		grid-column: 3;
		grid-row: 1;
		grid-row-span: 2;
	}
}

@support下CSS规则仅在条件返回true时适用 。 给定以上示例，如果浏览器支持display: grid ，则将应用该示例。 否则，浏览器将在@support之外应用其他等效规则。

混合条件

此外，我们允许使用and ， or而not运算符来组合多个条件。 例如，假设我们仅在浏览器满足以下条件时才应用规则：

• 它支持CSS3 Grid或CSS3 Flexbox 。
• 它支持CSS3 Columns 。

在这种情况下，我们可以编写条件规则，如下所示。

@support 
	((display: grid;) or (display:flexbox;)) 
	and (column-count:3;)	{
	/*
		Your CSS rules here
	*/
}

请记住，如果您在一个规则集中包含多个运算符，则如上所示，每个运算符应放在括号内。

以下列方式编写它是无效的，并且会混淆浏览器。

@support 
	(display: grid;) or (display:flexbox;) and (column-count:3;)	{
	/*
		Your CSS rules here
	*/
}

最终思想

此功能很棒，在某些情况下将非常有用。

为了进行测试，浏览器必须支持该规则。 否则，此方法将失败。 在撰写本文时， Opera似乎是唯一实现此功能的浏览器。 因此，在规格稳定并被所有其他浏览器覆盖之前，请延迟使用此方法在生产阶段进行测试。 不过，要进行实验，请全力以赴。

更多资源

• CSS条件规则模块级别3 — W3C

翻译自: https://www.hongkiat.com/blog/css-supports-rule/