可點選QR code
文章專區
網頁設計相關文章
瀏覽器支援度檢測－CSS@support的用法
近來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規則，大多時候用來支援較舊式的瀏覽器，並在使用更新的瀏覽器時，套用新屬性，提升用戶體驗。
