CSS漸進增強方案

首先需要明確一點，以往瀏覽器對css的支持是不同的，不同瀏覽器的樣式可能會存在差異，對待這種差異問題，需要寫幾套不同的css來兼容（邊框、圓角、顏色等），這樣是非常麻煩的，瀏覽器css顯示差異化屬于瀏覽器自身的問題，跟我們的css是沒有關系的，好的瀏覽器就有好的顯示，糟糕的瀏覽器就只有普通顯示，我們只需要關注瀏覽器是否支持css屬性即可，
例如:邊框圓角

border-radius : 50%

上面這一句是將邊框變成圓形，但部分瀏覽器可能會顯示為方形，這種樣式的差異問題無需理會，

現在就瀏覽器是否支持css屬性來討論一下漸進增強的適配方案，

1、屬性值差異實作兼容
2、偽類或偽元素實作兼容
3、瀏覽器型別區分實作兼容
4、@supports實作兼容

屬性值差異實作兼容

css的新增屬性低版本瀏覽器是不識別的，通過屬性值差異來實作兼容
案例一：實作圖片旋轉

.images{
    width: 100px;
    height: 100px;
    /*所有瀏覽器識別*/
    background: url(../assets/loading.gif);    
    /* IE10+ 瀏覽器識別 */
    background: url(../assets/loading.png),linear-gradient(transparent,transparent);
    background-size: 100px;
    animation: spin 1s linear infinite;
}

/* 鍵字 "from" 和 "to"（代表 0％（開始）和 100％（完成）） */
@keyframes spin{
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

分析：
css部分寫了 background: url(../assets/loading.gif); 這一句是所有瀏覽器都識別的，圖片為加載的gif動圖；此外我們又多添加了 background: url(../assets/loading.png),linear-gradient(transparent,transparent);這一句，其中linear-gradient為IE10+才會識別的，如果當前瀏覽器是IE10以下則顯示動圖，如果是IE10+則顯示png靜態圖片，配合animation(IE10+)來實作影片效果，

案例二：實作邊框陰影
IE8以下的瀏覽器是不支持box-shadow屬性的，如果想要實作樣式的浮動效果，可以通過border來實作，IE9+支持box-shadow，那么就可以用陰影實作，

.panel{
    width: 50px;
    height: 50px;
    margin: 10px;
    /* 所有瀏覽器識別 */
    border: 1px solid #ddd;
    /* IE9+ 瀏覽器識別 */
    border:1px solid rgba(0,0,0,0);
    box-shadow: 2px 2px;
}

rgba也是IE9+才支持的，所以這里可以添加一個rgba(0,0,0,0)覆寫原來的border效果，這樣邊框透明，底部陰影的效果就出現了，

偽類或偽元素實作兼容

上面利用css屬性差異實作兼容只適合單行的css屬性，如果要適配整個代碼塊，可以使用偽類或偽元素，IE8以下不會識別偽元素，IE9+識別偽元素，
關于偽元素的說明：

詳細的請看w3school檔案：https://www.w3school.com.cn/css/css_pseudo_classes.asp

 .pseudo{
    width: 150px;
    height: 50px;
    margin: 10px;
    border: 1px solid #ddd;
 }
 /* IE9+識別 */
 _::before,.pseudo{
    border:1px solid rgba(0,0,0,0);
    box-shadow: 2px 2px #608dfa;
 }

上面這里重寫了之前的box-shadow的案例，IE8以下識別pseudo代碼塊，IE9+識別_::before,.pseudo代碼塊，并且按照執行順序覆寫相同屬性，

_::before，偽元素前的下劃線是作為一個標簽選擇器用來占位的，本身不會產生任何匹配，

可以通過該案例以此類推
IE10+瀏覽器支持表單驗證相關的偽類
IE11+支持::-ms-backdrop偽元素（IE需要加ms前綴，其它瀏覽器不需要）
Edge12+使用@supports
Edge13+支持:in-range或:out-of-range
....

瀏覽器型別區分

瀏覽器支持參考手冊：https://www.w3school.com.cn/cssref/css_browsersupport.asp
瀏覽器配合偽元素：
Firefox瀏覽器識別，可以使用帶有-moz-私有前綴的偽類或偽元素

/* Firefox */
_::-moz-progress-bar, .sth-class{}

主流瀏覽器識別

_:default, .sth-class{}

webkit瀏覽器識別：只可使用帶有-webkit-前綴的偽類，不能使用帶有-webkit-前綴的偽元素，因為Firefox瀏覽器會認為帶有-webkit-前綴的偽元素是合法的，

/* webkit瀏覽器 */
:-webkit-any(_),.sth_class{}

Chromium Edge瀏覽器識別

/* Chromium Edge */
_::-ms-any,.sth-class{}

偽元素處理兼容性有風險，如果瀏覽器哪天不支持某個偽類，那么就會出問題，這種方法只能解決一些特殊問題，需要注意，

@supports的兼容

@supports可以用來檢測當前瀏覽器是否支持某個css特性，用來處理css漸進增強是最正規的，
@supports的支持是從Edge12瀏覽器開始的，目前的主流瀏覽器都支持，

.div_supports{
    width: 50px;
    height: 50px; 
    background: url(../assets/music.gif);  /* 被覆寫 */
    background-size: 50px;
}

/* Edge12+瀏覽器 */
@supports (animation : none){  // 支持
    .div_supports{
        background: url(../assets/loading.png);
        background-size: 50px;
        animation:  supp 1s linear infinite;
    }
}
@keyframes supp {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

使用@supports實作加載影片，在Edge12之前的瀏覽器，使用gif動圖，Edge12+的瀏覽器則使用png靜態圖片配合影片效果實作，

@supports (animation : none) {}  /*支持*/
@supports (border-radius : aaa){} /* 不支持 */

語法：@supports CSS at-rule 可以指定依賴于瀏覽器中的一個或多個特定的 CSS 功能的支持宣告，這被稱為特性查詢，該規則可以放在代碼的頂層，也可以嵌套在任何其他條件組規則中，如果引數部分的語法是支持的則回傳true，否則就是false，

下面是運算子的應用：

/* 支持彈性布局 */
@supports (display: flex){}

/* 不支持彈性布局 */
@supports not (display: flex){}

/* 同時支持彈性布局和網格布局 */
@supports (display: flex) and (display: grid){}

/* 彈性布局或網格布局滿足其一即可 */
@supports (display: flex) or (display: grid){}

@supports可以連續做多個判斷

注意：不能將支持和不支持的語法直接放在一起，會報錯

@supports (display: flex) and not (display: grid){} /* 報錯 */

解決方法：類似js中的優先級嵌套，用()括起來即可

/* 支持彈性布局但不支持網格布局*/
@supports (display: flex) and (not (display: grid)){}

/* 支持彈性布局 但不支持網格布局或影片 */
@supports (display: flex) and ((not (display: grid)) or (not (animation :none))){} 

驗證是否支持嵌套：

.supports_12{
    width: 300px;
    border: 1px solid red;
}

/* 支持彈性布局并且不支持border-radius: 'aaa'這種語法*/
@supports (display: flex) and (not (border-radius: 'aaa')){
    .supports_12 {
        color:red;
    }
} 

/* 支持彈性布局，(不支持border-radius: 50% 或(滿足其一) width:'aaa') */
@supports (display: flex) and ((not (border-radius: 50%)) or (not (width:'aaa'))){
    .supports_12 {
        color:cyan;
    }
}

案例原始碼：https://gitee.com/wang_fan_w/css-diary

如果覺得這篇文章對你有幫助，歡迎點贊、收藏、轉發哦~

標籤：其他

上一篇：創建型：工廠模式-工廠方法、抽象工廠

下一篇：如何在新的電腦中編輯現有的github倉庫內代碼？