• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • @supports

    版本:CSS3

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

    示例

    @supports (display: grid) {
      div {
        display: grid;
      }
    }
    
    @supports not (display: grid) {
      div {
        float: right;
      }
    }
    

    在 JavaScript 中,可以通过 CSS 对象模型接口 CSSSupportsRule 来访问 @supports。

    浏览器支持

    IE浏览器 火狐浏览器 opera浏览器 chrome浏览器 safari浏览器
    IE浏览器不支持@supports,其余浏览器都支持@supports

    语法

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

    声明语法

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

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

    函数语法

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

    selector()

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

    @supports selector(A > B) {}

    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 操作符位于表达式的最外层,则没有必要使用圆括号将它括起来。但如果要将该表达式与其他表达式连接起来使用,比如 andor,则需要外面的圆括号。

    and 操作符

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

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

    Multiple conjunctions can be juxtaposed without the need of more parentheses. The following are both equivalent:

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

    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))) {}
    

    注意:在使用 andor 操作符时,如果是为了定义多个表达式的执行顺序,则必须使用圆括号。如果不这样做的话,该条件就是无效的,会导致整个 at-rule 失效。

    示例

    检测是否支持指定的 CSS 属性

    @supports (animation-name: test) {
        … /* 如果支持不带前缀的animation-name,则下面指定的CSS会生效 */
        @keyframes { /* @supports是一个CSS条件组at-rule,它可以包含其他相关的at-rules */
          …
        }
    }
    

    检测是否支持指定的CSS属性或者其带前缀版本

    @supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
                (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
        … /* 如果支持不带前缀以及带前缀的perspective属性,则下面指定的CSS会生效 */
    }
    

    检测是否不支持指定的CSS属性

    @supports ( not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
        … /* 这里的CSS代码用来模拟text-align-last:justify */
    }

    测试是否支持自定义属性

    @supports (--foo: green) {
      body {
        color: var(--varName);
      }
    }

    测试是否支持选择器 (eg. :is())

    这是一个实验中的功能
    此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

    /* This rule won't be applied in browsers which don't support :is() */
    :is(ul, ol) > li {
      … /* CSS applied when the :is(…) selector is supported */
    }
    
    @supports not selector(:is(a, b)) {
      /* Fallback for when :is() is unsupported */
      ul > li,
      ol > li {
        … /* The above expanded for browsers which don't support :is(…) */
      }
    }
    
    @supports selector(:nth-child(1n of a, b)) {
      /* This rule needs to be inside the @supports block, otherwise
         it will be partially applied in browsers which don't support
         the `of` argument of :nth-child(…) is supported */
      :is(:nth-child(1n of ul, ol) a,
      details > summary) {
        … /* CSS applied when the :is(…) selector and
             the `of` argument of :nth-child(…) are both supported */
      }
    }
    

    上篇:@namespace

    下篇:@keyframes