CSS中@support的用法

這段時間一直在調試瀏覽器的兼容性問題，了解到了@support的這個屬性，記錄下：
CSS中的@support主要是用於檢測瀏覽器是否支持CSS的某個屬性，其實就是條件判斷，如果支持某個屬性，你可以寫一套樣式，如果不支持某個屬性，你也可以提供另外一套樣式作為替補。但是這里有一點需要注意的是：@support對於瀏覽器的版本也是有要求的，不是說所有的瀏覽器以及其所有的版本都是支持@support的。
下面就來說一下@support的用法：

1.基本語法是這樣的：

1. @support(prop:value){

2. /*自己的樣式*/

3. }

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

注釋：如果瀏覽器支持display:flex屬性的話，那么div的樣式就是display:flex

2.邏輯操作符：“not” 的用法

@supports not (display: flex) { div { float: right; }}

注釋：如果瀏覽器不支持display:flex屬性的話，那么div的樣式就是display:right

3.邏輯操作符：“and”的用法

@supports (display: flex) and ( box-shadow: 2px 2px 2px black ) {
     /*自己的樣式*/
}
注釋：如果瀏覽器支持display:flex和box-shadow的屬性，就執行里面自己的樣式

4.邏輯操作符：“or” 的用法

@supports (display: -webkit-flex) or (display: -moz-flex) or(display: flex) {
       /*自己的樣式 */
}
注釋：如果瀏覽器支持其中一個就可以執行里面自己的樣式

5.混用的例子

“or”和“and”混用，在@supports中“or”和“and”混用時，必須使用括號（）來區分其優先級
@supports ((transition-property: color) or (animation-name: foo)) and (transform: rotate(10deg)) {
     /*自己的樣式 */
}
@supports (transition-property: color) or ((animation-name: foo) and (transform: rotate(10deg))) {
         /*自己的樣式 */
}
“or”、“and” 和 “not” 混用
@supports (display: grid) and (not (transition-property: color) or (animation-name: foo)){
/*自己的樣式 */
}
---------------------
作者：我_曾是少年
來源：CSDN
原文：https://blog.csdn.net/liaobangxiang/article/details/80706922
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！