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

Question

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

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

Answer 1

When @supports evaluates a key/value pair for CSS spec support, would browsers that support only the vendor-prefixed variant of that CSS declaration apply the styles within the @supports block?

不，您还需要添加前缀值，并且 @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 如何处理供应商前缀查询？

How does @supports handle vendor prefixed queries?

css

cross-browser

media-queries

flexbox