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

【问题标题】：How does @supports handle vendor prefixed queries?@supports 如何处理供应商前缀查询？
【发布时间】：2017-11-03 00:59:41
【问题描述】：

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

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

【问题讨论】：

你能举个例子吗？我很难理解你在问什么......但如果我认为你是对的，那么查看规范化库将减轻你对供应商特定代码的痛苦
@LuisBrazilva 这是一个人为的情况jsfiddle.net/Zacc206/m1jqr68r。我对如何评估键/值对以及是否在评估非前缀属性中包含供应商前缀变体特别感兴趣。对于这个人为的示例，它不起作用，因为 IE10 不支持功能查询，所以我想知道在浏览器支持功能查询和前缀 CSS 声明的情况下会发生什么。

标签： css cross-browser flexbox media-queries

【解决方案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 ( box-shadow: 0 0 2px black inset ) 会严格检查该确切的键/值对，而 -moz-box-shadow: 0 0 2px black inset 也不是从它派生的？
@ZachB 是的，并更新了我的答案以明确说明