2015~2016年间,CSS 新增了一个功能:根据用户代理是否至此特定的 CSS 属性及其值应用一段样式。这个功能称为特性查询(feature query)
特性查询是渐进增强样式的完美方式。
下面是一个示例:
@supports (color: cyan) {
body {
color: cyan
}
}
上述代码的意思是:“如果你能识别并处理 color: cayn 这样的属性和值组合,那就应用这段样式;否则,跳过这段样式。”
特性查询可以嵌套,可以嵌套在媒体查询中,反过来嵌套也可以
@supports (display: flex) {
@media scrren {} /* 针对屏幕媒体的弹性盒样式 */
@media print {} /* 针对因数媒体的弹性盒样式 */
}
@media screen and (max-width: 30em) {
@supports (display: flex) {}
}
网友评论