CSS 中的 @supports 规则,也被称为 Feature Queries(特征查询),是一个很强大的工具。
通过使用 @supports,你可以在 CSS 中看是否支持某个“特性”(CSS 属性或值),并根据其返回的结果决定是否调用代码块。例如:
@supports (display: grid) {
// 只有在浏览器支持 CSS 网格时才会运行代码
}
如果浏览器支持 display: grid,那么括号内的所有样式都将被应用。否则将跳过所有样式。
另一个有意义的测试:
@supports (initial-letter: 4) or (-webkit-initial-letter: 4) {
p::first-letter {
-webkit-initial-letter: 4;
initial-letter: 4;
color: #FE742F;
font-weight: bold;
margin-right: 0.5em;
}
}
使用 not
@supports (height: 100vh) {
// 使用 viewport height 的布局
}
@supports not (height: 100vh) {
// 老式浏览器另一种布局
}
// 我们希望是这样,但这个代码不是很好
最佳实践:
// 较老浏览器的回退代码
@supports (display: grid) {
// 较新浏览器的代码
// 在需要时覆盖上面的代码
}
浏览器支持: