瀏覽器私有屬性,CSS hack語法和自動化外掛 - IT人
文章推薦指數: 80 %
為什麼會有瀏覽器相容性問題. 還不是因為瀏覽器廠商太多了! 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{
連線線(中劃線)(-)亦可使用,為了避免與某些帶中劃線的屬性混淆,所以使用下劃線(_)更為合適。
*:選擇IE7及以下。
諸如:(+)與(#)之類的均可使用,不過業界對(*)的認知度更高
\9:選擇IE6+
\0:選擇IE8+和Opera15以下的瀏覽器
舉例
如在不同的IE瀏覽器中設定不同的顏色,注意順序:低版本的相容性寫法放到最後
.test{
color:#090\9;/*ForIE8+*/
*color:#f00;/*ForIE7andearlier*/
_color:#ff0;/*ForIE6andearlier*/
}
複製程式碼選擇符級hack
選擇符級hack是針對一些頁面表現不一致或者需要特殊對待的瀏覽器,在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的字首進行hack。
語法:
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離線安裝教程
延伸文章資訊
- 1在Internet Explorer 11 中使用相容性檢視修正網站顯示問題
您可以將網站從相容性清單中移除,將它關閉。 並非所有網站顯示問題皆由瀏覽器不相容所造成。 網際網路連線中斷、流量太大,或網站本身發生問題,亦會影響頁面的顯示 ...
- 28 款瀏覽器相容性測試工具介紹,需要的趕緊收藏吧! - 程式人生
瀏覽器的相容性問題,是指不同瀏覽器使用核心及所支援的HTML 等網頁語言標準不同,使用者客戶端的環境不同造成的顯示效果不能達到理想效果。
- 3如何手動開啟Edge瀏覽器的IE相容模式? - T客邦
在新版的 Edge 瀏覽器中,微軟特地為舊版網站設計了IE 相容模式, ... 在預設瀏覽器頁面的「Internet Explorer相容性」區塊,將第一個選項的設定 ...
- 4IE相容性設定 - 資訊中心- 僑光科技大學
A1:校務行政相關網頁適用瀏覽器為Internet Explorer,若使用非IE版本的,則可能造成以上錯誤。 Q2:我的瀏覽器是Internet Explorer,為什麼在使用校務行政相關網頁...
- 5各瀏覽器對HTML 與CSS 相容性如何?從一幅畫就可顯出差異
由於這項目的藝術性,因此我不關心跨瀏覽器的相容性,所以即時預覽可能在除Chrome 外的任何瀏覽器看起來都很可笑。 Safari 瀏覽器中,蕾絲的花邊裝飾 ...