CSS @supports特性查询

一、基本介绍

@supports可以指定依赖于浏览器中的一个或多个特定的CSS功能的支持声明。这被称为特性查询。该规则可以放在代码的顶层,也可以嵌套在任何其他条件组规则中。

示例:

@supports (display: grid) {
  div {
    display: grid;
  }
}

二、语法

@supports由一组样式声明和一条支持条件构成。支持条件由一条或多条使用 逻辑与(and)、逻辑或(or)、逻辑非(not)结合的名称-值对(name-value pair)组成。可以使用圆括号调整操作符的优先级。

2.1、声明语法

最基本的支持条件就是 CSS 声明,也就是一个 CSS 属性后跟一个值,中间用冒号分开。如果 transform-origin 的实现语法认为 5% 5% 是有效的值,则下面的表达式会返回 true。

@supports (transform-origin: 5% 5%) {}

2.2、函数语法

第二种基本支持条件是支持函数,几乎所有浏览器都支持这种语法,但函数本身仍在标准化进程中。

测试浏览器是否支持经过测试的选择器语法。如果浏览器支持子组合器,则以下示例返回true:

@supports selector(A > B) {}

2.3、not操作符

将 not 操作符放在任何表达式之前就能否定一条表达式。如果 transform-origin 的实现语法认为 10em 10em 10em 是无效的,则下面的表达式会返回 true。

@supports not (transform-origin: 10em 10em 10em) {}

和其他操作符一样,not 操作符可以应用在任意复杂度的表达式上。下面的几个例子中都是合法的表达式:

@supports not (not (transform-origin: 2px)) {}
@supports (display: grid) and (not (display: inline-grid)) {}

注意:如果 not 操作符位于表达式的最外层,则没有必要使用圆括号将它括起来。但如果要将该表达式与其他表达式连接起来使用,比如 and 和 or,则需要外面的圆括号。

2.4、and操作符

and 操作符用来将两个原始的表达式做逻辑与后生成一个新的表达式,如果两个原始表达式的值都为真,则生成的表达式也为真。在下例中,当且仅当两个原始表达式同时为真时,整个表达式才为真:

@supports (display: table-cell) and (display: list-item) {}

可以将多个合取词并置而不需要更多的括号。以下两者都是等效的:

@supports (display: table-cell) and (display: list-item) and (display:run-in) {}
@supports (display: table-cell) and ((display: list-item) and (display:run-in)) {}

2.5、or操作符

or 操作符用来将两个原始的表达式做逻辑或后生成一个新的表达式,如果两个原始表达式的值有一个或者都为真,则生成的表达式也为真。在下例中,当两个原始表达式中至少有一个为真时,整个表达式才为真:

@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}

可以将多个析取词并置而不需要更多的括号。以下两者都是等效的:

@supports (transform-style: preserve) or (-moz-transform-style: preserve) or
          (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {}

@supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or
          ((-o-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {}

参考

Author: Yakima
关于作者:楠溪江人,出生于1991年,目前坐标上海。读书时代跳过级、保过送,工作后转过行。2013年本科毕业于北药。看书、码字、敲代码、打羽毛球是我花时间的爱好。曾在某上市药企任国际药品注册岗,现在某高新企业任前端管理岗。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据