要說起前端工程師最痛恨的是什么,相信大多數人都會回答你,那就是萬惡的IE瀏覽器。
為何要痛恨IE瀏覽器?主要就是因為IE8、IE7甚至IE6在國內的占有率過高,從而使得前端工程師不得不考慮自身web應用在這些瀏覽器上的兼容性問題。
而這三者瀏覽器性能差,不兼容HTML5和CSS3技術,大大延緩了國內網站建設領域的發(fā)展腳步。
而為了做到兼容這些瀏覽器,前段人員不得不在CSS中寫入了對應的CSS Hack,從而滿足不同瀏覽器的需求。
什么是CSS Hack?
由于IE、Chrome、Firefox、Safari等瀏覽器對CSS的解析方式不同,從而使得某些效果需要不同的CSS代碼才能實現。
而通過編寫不同的CSS代碼用于不同的瀏覽器效果展現的行為,就稱為CSS Hack。
而當今的高級瀏覽器(IE9以上、Chrome、Firefox、Safari)的內核對CSS解析大體相同,所以不需要獨特的代碼去區(qū)分,主要用到CSS Hack的還是在IE的前幾個版本中。
CSS Hack如何運作?
CSS Hack的主要原理是基于不同瀏覽器對于CSS代碼的不同解析方式,從而采用只有該瀏覽器才能識別的編碼形式進行編碼,以達到與其他瀏覽器區(qū)分的目的。
例如IE6能夠識別“*”和“_”,而IE7只能識別“*”,高級瀏覽器兩者都不能識別。
那么我們就能通過類似 .test { background: #000; (Firefox下背景色為黑色) *background: #f00; (IE7下背景色為紅色) _background: #fff; (IE6下背景色為白色) } 來對不同瀏覽器的背景色進行設置。
其他CSS Hack寫法?
除了之前提到的星號和下劃線之外,還有\(zhòng)9(選擇IE6以上的瀏覽器),\0(選擇IE8及以上瀏覽器),以及important(IE6無法識別)
如果我們想要實現不同瀏覽器下的不同字體顏色,那么需要從高到底地進行設置,由于CSS的特性,后面的屬性會對前面進行覆蓋。 .font { color: #fff; (所有瀏覽器均能識別) color: #000\9;(IE6以上瀏覽器均覆蓋之前的顏色) color: #f00\0;(IE8覆蓋之前顏色) *color: #0f0;(IE6和IE7覆蓋之前顏色) _color: #00f;(IE6覆蓋之前顏色) } 所以該代碼在瀏覽器上字體顏色分別為:IE6藍色,IE7綠色,IE8紅色,IE9及以上黑色,其他高級瀏覽器白色。