@supports如何处理以供应商为前缀的查询

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-支持

.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;
}
}