瀏覽器私有屬性，CSS hack語法和自動化外掛 - IT人

為什麼會有瀏覽器相容性問題. 還不是因為瀏覽器廠商太多了！ Chrome，Frirefox，Safari，Edge，IE6，IE7，IE8，IE9.. Togglenavigation IT人 IT人 CSS瀏覽器相容性的4個解決方案：瀏覽器CSS樣式初始化、瀏覽器私有屬性，CSShack語法和自動化外掛 蟄伏已久發表於 2019-02-18 CSS 前端是一個苦逼的職業，不僅因為技術更新快，而且要會的東西實在太多了（如果全寫出來，那真是一籮筐），更讓人頭疼的是，還要面臨各種適配、相容性問題。

一直以來都是頭痛醫頭腳痛醫腳，沒有進行系統的梳理，整個思路和方向全是混亂的，所以非常想把最近整理的，CSS瀏覽器相容性的常見解決思路和方案，分享給大家，一起進步。

為什麼會有瀏覽器相容性問題 還不是因為瀏覽器廠商太多了！ Chrome，Frirefox，Safari，Edge，IE6，IE7，IE8，IE9...360安全瀏覽器，qq瀏覽器，世界之窗，TT，搜狗，opera，maxthon（傲遊）…… 關鍵是不同廠商，甚至同一廠商不同版本，對同一段CSS的解析效果也不一致，這就導致了頁面顯示效果不統一，也就帶來了相容性問題。

多麼希望Chrome能夠一統江湖啊~~ 目前各瀏覽器市場份額 瀏覽器這麼多，我們也不可能每一個都要去相容，對於使用者量一般的產品，把主流瀏覽器的適配做好，就已經很不錯啦。

根據世界市場權威調查機構NetMarketShare公佈的2018年10月各瀏覽器市場佔有率，可以看出Chrome的佔有率達到了66.43%，這絕對是一個振奮人心的好訊息。

而根據百度流量研究院提供的2018年11月至2019年1月的資料可以看出，IE系仍然佔有很大比重，任重而道遠啊~ CSS瀏覽器相容性問題的解決思路和方案 今天，不想去關注太多細節問題，比如那個css樣式需要我們去相容，而是想討論一下大的解決思路，主要包括4個方面，瀏覽器CSS樣式初始化、瀏覽器私有屬性，CSShack語法和自動化外掛。

1.瀏覽器CSS樣式初始化 由於每個瀏覽器的css預設樣式不盡相同，所以最簡單有效的方式就是對其進行初始化，相信很多朋友都寫過這樣的程式碼，在所有CSS開始前，先把marin和padding都設為0，以防不同瀏覽器的顯示效果不一樣。

*{ margin:0; padding:0; } 複製程式碼關於瀏覽器CSS樣式初始化，經驗不豐富的話，可能也不知道該初始化什麼，這裡給大家推薦一個庫，Normalize.css，githubstar數量接近4萬，選取展示其中幾個樣式設定，如下 html{ line-height:1.15;/*Correctthelineheightinallbrowsers*/ -webkit-text-size-adjust:100%;/*PreventadjustmentsoffontsizeafterorientationchangesiniOS.*/ } body{ margin:0; } a{ background-color:transparent;/*RemovethegraybackgroundonactivelinksinIE10.*/ } img{ border-style:none;/*RemovetheborderonimagesinsidelinksinIE10.*/ } 複製程式碼通過CSS樣式初始化，相信能解決不少常規的相容性問題，接下來再看看瀏覽器的私有屬性。

2.瀏覽器私有屬性 我們經常會在某個CSS的屬性前新增一些字首，比如-webkit-，-moz-，-ms-，這些就是瀏覽器的私有屬性。

為什麼會出現私有屬性呢？這是因為制定HTML和CSS標準的組織W3C動作是很慢的。

通常，有W3C組織成員提出一個新屬性，比如說圓角border-radius，大家都覺得好，但W3C制定標準，要走很複雜的程式，審查等。

而瀏覽器商市場推廣時間緊，如果一個屬性已經夠成熟了，就會在瀏覽器中加入支援。

但是為避免日後W3C公佈標準時有所變更，會加入一個私有字首，比如-webkit-border-radius，通過這種方式來提前支援新屬性。

等到日後W3C公佈了標準，border-radius的標準寫法確立之後，再讓新版的瀏覽器支援border-radius這種寫法。

常用的字首有： -moz代表firefox瀏覽器私有屬性 -ms代表IE瀏覽器私有屬性 -webkit代表chrome、safari私有屬性 -o代表opera私有屬性 對於私有屬性的順序要注意，把標準寫法放到最後，相容性寫法放到前面 -webkit-transform:rotate(-3deg);/*為Chrome/Safari*/ -moz-transform:rotate(-3deg);/*為Firefox*/ -ms-transform:rotate(-3deg);/*為IE*/ -o-transform:rotate(-3deg);/*為Opera*/ transform:rotate(-3deg); 複製程式碼每個CSS屬性寫這麼一堆相容性程式碼，無疑是對生命最大的浪費，後面我們會講一下通過自動化外掛來處理這塊。

3.CSShack 有時我們需要針對不同的瀏覽器或不同版本寫特定的CSS樣式，這種針對不同的瀏覽器/不同版本寫相應的CSScode的過程，叫做CSShack! CSShack的寫法大致歸納為3種：條件hack、屬性級hack、選擇符級hack。

條件hack 條件hack主要針對IE瀏覽器進行一些特殊的設定 語法： 複製程式碼 取值 keywords if後面跟的條件共包含6種選擇方式：是否、大於、大於或等於、小於、小於或等於、非指定版本 是否：指定是否IE或IE某個版本。

關鍵字：空 大於：選擇大於指定版本的IE版本。

關鍵字：gt（greaterthan） 大於或等於：選擇大於或等於指定版本的IE版本。

關鍵字：gte（greaterthanorequal） 小於：選擇小於指定版本的IE版本。

關鍵字：lt（lessthan） 小於或等於：選擇小於或等於指定版本的IE版本。

關鍵字：lte（lessthanorequal） 非指定版本：選擇除指定版本外的所有IE版本。

關鍵字：! version IE瀏覽器版本，如6、7、8 IE10及以上版本已將條件註釋特性移除，使用時需注意。

舉例 複製程式碼屬性級hack 屬性hack就是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的hack字首。

語法： selector{?property:value?;} 複製程式碼 取值： _：選擇IE6及以下。

連線線（中劃線）（-）亦可使用，為了避免與某些帶中劃線的屬性混淆，所以使用下劃線（_）更為合適。

*：選擇IE7及以下。

諸如：（+）與（#）之類的均可使用，不過業界對（*）的認知度更高 \9：選擇IE6+ \0：選擇IE8+和Opera15以下的瀏覽器 舉例 如在不同的IE瀏覽器中設定不同的顏色，注意順序：低版本的相容性寫法放到最後 .test{ color:#090\9;/*ForIE8+*/ *color:#f00;/*ForIE7andearlier*/ _color:#ff0;/*ForIE6andearlier*/ } 複製程式碼選擇符級hack 選擇符級hack是針對一些頁面表現不一致或者需要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的字首進行hack。

語法： selector{sRules} 複製程式碼 取值： 常見的選擇符級hack有 *html*字首只對IE6生效 *+html*+字首只對IE7生效 @mediascreen\9{...}只對IE6/7生效 @media\0screen{body{background:red;}}只對IE8有效 @media\0screen\,screen\9{body{background:blue;}}只對IE6/7/8有效 @mediascreen\0{body{background:green;}}只對IE8/9/10有效 @mediascreenand(min-width:0\0){body{background:gray;}}只對IE9/10有效 @mediascreenand(-ms-high-contrast:active),(-ms-high-contrast:none){body{background:orange;}}只對IE10有效 複製程式碼 舉例： *html.test{color:#090;}/*ForIE6andearlier*/ *+html.test{color:#ff0;}/*ForIE7*/ 複製程式碼看到這裡，我不得不為前端人員自豪，這也太難了吧~~ 不過花大力氣解決這些相容性問題，並不能給我們技術上帶來什麼大的提升，無非是給各個瀏覽器廠商填坑罷了，隨著時間的流逝，這些技術的價值也會越來越小，怎麼花最小的力氣解決css相容性問題，讓我們把更多的時間留給美好的生活，才是關鍵，好在有一些自動化外掛可以幫我們從繁重的相容性處理中解脫處理。

4.自動化外掛 Autoprefixer是一款自動管理瀏覽器字首的外掛，它可以解析CSS檔案並且新增瀏覽器字首到CSS內容裡，使用CanIUse（caniuse網站）的資料來決定哪些字首是需要的。

把Autoprefixe新增到資源構建工具（例如Grunt）後，可以完全忘記有關CSS字首的東西，只需按照最新的W3C規範來正常書寫CSS即可。

如果專案需要支援舊版瀏覽器，可修改browsers引數設定。

//我們編寫的程式碼 div{ transform:rotate(30deg); } //自動補全的程式碼，具體補全哪些由要相容的瀏覽器版本決定，可以自行設定div{ -ms-transform:rotate(30deg); -webkit-transform:rotate(30deg); -o-transform:rotate(30deg); -moz-transform:rotate(30deg); transform:rotate(30deg); } 複製程式碼目前webpack、gulp、grunt都有相應的外掛，如果還沒有使用，那就趕緊應用到我們的專案中吧，別再讓CSS相容性浪費你的時間！ 限於技術水平，文中肯定有很多遺漏或者錯誤，大家還有什麼好的方法可以一起討論，歡迎關注我們的公眾號，一起學習，一起進步。

相關文章 修改python語法注意 2020-11-20 Python 資料多次分攤方案二 2020-11-21 win10瀏覽器不能聯網，電腦上其他軟體可以聯網 2020-11-21 Win10 瀏覽器是怎樣渲染網頁的呢？ 2020-11-21 CSS基礎——浮動（float）【學習筆記】 2020-11-21 CSS Android螢幕適配：最全面的解決方案 2020-11-21 Android 檔案屬性 2020-11-21 技術方案設計的方法 2020-11-21 三、金融業企業服務匯流排鏈路追蹤監控分析平臺的建設實踐--CASSANDRA儲存方案 2020-11-21 CSS技術筆記 2020-11-22 CSS 650【畢設課設】基於微控制器大氣壓監測報警系統電路方案設計 2020-11-22 關於elementuiinput標籤的改造樣式 2020-11-22 8種方案解決重複提交問題！你選擇哪一種呀？ 2020-11-22 如何自定義python語法. 2020-11-22 Python 分散式事務解決方案-RocketMQ實現可靠訊息最終一致性 2020-11-22 background屬性 2020-11-22 【CSS】關於表單樣式 2020-11-22 CSS 010-jQuery獲取和設定內容屬性 2020-11-22 jQuery 最新文章 CMR：印度手機遊戲調查報告 大咖說·圖書分享|HaaS物聯網裝置雲端一體開發框架 話實踐，行實幹，成實事：“巡禮”數字化的中國大地 構建安全程式碼防止供應鏈攻擊 【推薦閱讀】超有用的漏洞掃描工具合集! 國密SM演算法有哪些？ 為什麼伺服器選擇Linux系統 ApacheFlinkML2.1.0釋出公告 乾貨｜作為前端開發者如何邁向獨立開發者 助力開發者，全方位解讀APISIX測試案例 得物資料庫中介軟體平臺“彩虹橋”演進之路 KubeSphere3.3.0離線安裝教程