HTML + CSS 寶典 第七節 瀏覽器兼容性

                                                       瀏覽器兼容性

---

兼容性問題產生的原因：

1. 市場競爭，    官方(W3C）標準制定 延後了,  各個瀏覽器 廠家 自行 添加新的屬性，造成了市場混亂；

2. 標準版本的變化， 官方的標準也會發生變化，

 

廠商前綴 ：

還未成爲  W3C 標準   或者標準還在討論當中， 但是某廠商 提前支持的屬性 ，

比如： box-sizing;     谷歌舊的瀏覽器會要求這麼寫：     -webkit-box-sizing：border-box

 

常見的廠商前綴

• IE                -ms-

• Chrome       -webkit-

• Safari          -webkit-

• Opera          -o-

• FireFox        -moz-

 

    <style>
        div {
            border: 2px solid;
            width: 200px;
            height: 200px;
            padding: 50px;
            box-sizing: border-box;
            -ms-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -o-box-sizing: border-box
        }
    </style>

 

左邊是 火狐瀏覽器，          右邊是谷歌瀏覽器

瀏覽器在處理樣式 或者元素 時， 使用如下方式：

• 當瀏覽器遇到 無法識別樣式 的代碼時，  直接略過

 

VSCode 插件可以，自動幫助我們 填充 廠商前綴

 

CSS  hack

根據不同的 瀏覽器（主要針對 IE），設置不同的樣式 和 元素

   1 .樣式

   IE 中，CSS 的特殊前綴

• *屬性，         表示：  兼容  IE5，IE6， IE7
• _屬性，        表示：  兼容  IE5 ~ IE6
• 屬性值\9,      表示：  兼容  IE5 ~ IE11
• 屬性值\0       表示：  兼容  IE8 ~ IE11
• 屬性值\9\0    表示：  兼容  IE9 ~ IE10

div {
    width: 200px;
    height: 200px;
    background: red;
    *background: blue;
    _background: yellow;
    background: orangered\9;
    background: orangered\0;
    background: black\9\0;
}

    

 兩種解決 兼容性問題的思路，會影響代碼書寫的風格

•  - 漸進增強： 先適應大部分瀏覽器，然後針對新版本瀏覽器 加入新的樣式；

          書寫代碼時， 先避免書寫有兼容性問題的代碼，完成之後 在逐步加入新標準中的代碼

•  - 優雅降級： 先製作完整功能，然後針對低版本瀏覽器 進行特殊處理

          書寫代碼時，先不用特別在意兼容性，完成整個功能之後， 再針對低版本瀏覽器處理樣式

 

 

查找 CSS 兼容性：

[caniuse.com] https://caniuse.com/