CSS / 前端技術 / 筆記 · 2019-10-02

CSS @support瀏覽器支援度檢測

當瀏覽器支援display: flex時,即套用該屬性。

@supports (display: flex) {
  div { display: flex; }
}

當瀏覽器不支援display: flex時,改為display: inline-block

@supports not(display: flex) {
div { display: inline-block; }
}

使用or或and串接多個CSS設定 ,例 :針對舊型和新型瀏覽器設定不同的CSS規則

@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex){
     div{
     display: -webkit-flex;
            display: -moz-flex;
            display: flex
         }
}