漸進增強是指先針對低級瀏覽器保證基本功能，再針對高級瀏覽器追加功能；而優雅降級是指針對那些最高級、最完善的瀏覽器來設計網站，一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。

漸進增強和優雅降級

含義

• 漸進增強：先針對低級瀏覽器保證基本功能，再針對高級瀏覽器追加功能；
• 優雅降級：針對那些最高級、最完善的瀏覽器來設計網站，一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。

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