什么是CSS Hack?
針對不同的瀏覽器寫不同的CSS,使它能在不同的瀏覽器中得到想要的頁面效果。
比如IE6能識別""(下劃線)和""(星號);IE7能識別"",不能識別"";IE6~10都識別"\9",但firefox前述三個都不能識別。
表現形式:CSS屬性前綴法;選擇器前綴法;IE條件注釋法。
談一談瀏覽器兼容的思路
首先是要不要做,一是產品的角度:受眾是哪些人群,這些人群所用的瀏覽器是哪些,需要展現完整的效果還是首要展現功能。再是成本角度:時間成本和資金。
然后是做到什么程度,根據分析,讓哪些瀏覽器支持哪些效果。
最后就是如何做,根據兼容需求選擇技術框架/庫;根據兼容需求選擇兼容工具;用條件注釋,CSS Hack,js能力檢測做一些修補。
列舉五種瀏覽器兼容的寫法
條件注釋: IE9支持,IE10及以上不支持
css屬性前綴法:例:.box {color:red;_color:red;*color:red;color:red\9;}
選擇器前綴法:例:*html .box { color: red;}
使用modernizr直接使用其在html中生成的class
如果瀏覽器不支持某標簽,使用html5shiv.js,創建這個標簽,使之可以被渲染。一般結合條件注釋使用。
解釋以下工具/名詞是做什么的
條件注釋
利用語法,很好的在不同的瀏覽器中得到想要的頁面效果。IE Hack
針對不同的IE瀏覽器寫不同的CSS,使它能在不同的瀏覽器中得到想要的頁面效果。js能力檢測
識別瀏覽器的能力,確定瀏覽器對特定屬性是否支持以便做出解決方案。html5shiv.js
創建一個標簽,并使瀏覽器可以渲染。respond.js
模擬CSS3的媒體查詢,使瀏覽器可以渲染。css reset
清除瀏覽器的所有默認樣式。normalize.css
替代css reset,保留一定的瀏覽器默認樣式,修復了瀏覽器自身bug。Modernizr
通過這個工具可以知道瀏覽器對各種標簽和css的支持情況。postCSS
使用 JS 插件來轉換 CSS得到兼容性的代碼的工具。