文章專區

網頁設計相關文章

瀏覽器支援度檢測-[email protected]的用法

近來CSS有不少新增的屬性,然而各個兼容性不一,我們可以用@support標記來檢測該瀏覽器是否有支援。

基本用法:
@supports (該CSS屬性規則) {
div {該CSS屬性規則}
}
範例:
@supports (display: flex) {
div { display: flex; }
}
意思是當瀏覽器支援display: flex時,即套用該屬性。
 
我們可以用not來設定該屬性不支援時的替換CSS,來應付不支援時的情況。
範例:
@supports not(display: flex) {
div { display: inline-block; }
}
意思是當瀏覽器不支援display: flex時,改為display: inline-block
 
你也可以使用or或and串接多個CSS設定
範例:
@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex){
    div{
    display: -webkit-flex;
            display: -moz-flex;
            display: flex
         }
}
@support可以針對舊型和新型瀏覽器設定不同的CSS規則,大多時候用來支援較舊式的瀏覽器,並在使用更新的瀏覽器時,套用新屬性,提升用戶體驗。