渐进增强和优雅降级
含义
- 渐进增强:先针对低级浏览器保证基本功能,再针对高级浏览器追加功能;
- 优雅降级:针对那些最高级、最完善的浏览器来设计网站,一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
@supports
使用@supports
可以查询相关的声明是否能被浏览器支持,然后后续可以针对性的使用低级或者高级的CSS语法。
示例代码:
/* 来源于 MDN */
@supports (display: grid) {
div {
display: grid;
}
}
@supports not (display: grid) {
div {
float: right;
}
}
@supports(-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)){
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: rgba($color-black, 0.3);
}
标签:降级,浏览器,渐进,blur,filter,backdrop,10px,supports,CSS
From: https://www.cnblogs.com/feixianxing/p/18011927/css-progressive-enhancement-graceful-degrad