[CSS] 渐进增强与优雅降级

渐进增强和优雅降级

含义

• 渐进增强：先针对低级浏览器保证基本功能，再针对高级浏览器追加功能；
• 优雅降级：针对那些最高级、最完善的浏览器来设计网站，一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

@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);
}