Question

当@supports评估CSS规范支持的键/值对时，仅支持该CSS声明的供应商前缀变体的浏览器是否会应用@supports块中的样式？

例如，IE10识别-ms-flex: flex但不识别display: flex。假设IE10还要识别@supports声明，IE10会在@supports (display: flex){}块中应用代码样式吗？

Answer 1

当 @supports 评估CSS规范支持的键/值对时，会浏览器仅支持该CSS的供应商前缀变体声明是否应用 @supports 块中的样式？

不，您还需要添加前缀值，@supports在其查询中处理它们作为任何其他属性。

这是有意义的，如果你只想针对那些没有前缀的人那么？

以下是https://drafts.csswg.org/css-conditional-3/#at-supports

的示例

.noticebox {
  border: 1px solid black;
  padding: 1px;
}
@supports ( box-shadow: 0 0 2px black inset ) or
          ( -moz-box-shadow: 0 0 2px black inset ) or
          ( -webkit-box-shadow: 0 0 2px black inset ) or
          ( -o-box-shadow: 0 0 2px black inset ) {
  .noticebox {
    -moz-box-shadow: 0 0 2px black inset;
    -webkit-box-shadow: 0 0 2px black inset;
    -o-box-shadow: 0 0 2px black inset;
    box-shadow: 0 0 2px black inset; /* unprefixed last */
    /* override the rule above the @supports rule */
    border: none;
    padding: 2px;
  }
}

@supports如何处理供应商前缀查询？

1 个答案: