什么是 CSS hack
- CSS Hack大致有3種表現(xiàn)形式，CSS屬性前綴法、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack，實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現(xiàn)差異而引入的。1.屬性前綴法(即類內(nèi)部Hack):IE6的"_"和"",IE7的"",IE6~IE10的\9";2.選擇器前綴法(即選擇器Hack);3.IE條件注釋法(即HTML條件注釋Hack)：針對所有IE(注：IE10+已經(jīng)不再支持條件注釋).
談一談瀏覽器兼容的思路
- 要不要做:從產(chǎn)品的角度考慮,產(chǎn)品的受眾,受眾瀏覽器的比例,效果優(yōu)先還是基本功能優(yōu)先;從成本的角度,有沒有必要兼容到很低版本的瀏覽器
- 做到什么程度:根據(jù)需求決定兼容到哪些版本的瀏覽器支持哪些效果
- 如何做:根據(jù)兼容需求選擇技術(shù)框架(要兼容到IE6選擇1.版本的jquery,兼容到ie9選擇2.版本的jquery);根據(jù)兼容需求選擇兼容工具(html5shiv.js,respond.js,css reset,normalize.css,Modernizr);postCSS;條件注釋,css hack,js
能力檢測做一些修補 - 在開發(fā)過程中,要保證基本功能就使用漸進(jìn)增強:先針對低版本瀏覽器構(gòu)建頁面,保證最基本的功能,再針對高級瀏覽器進(jìn)行效果,交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗;想要要過優(yōu)先就使用優(yōu)雅降級:一開始就構(gòu)建完整的功能,然后再針對低版本瀏覽器進(jìn)行兼容
列舉5種以上瀏覽器兼容的寫法
.clearfix:after{content: "";display: block;clear: both;} .clearfix { *zoom:1;}*zoom:1是屬性前綴
- `` if IE 6是ie的條件注釋
-
div{width:500px;height:500px;color:blue;}div\9{color:yellow;}\9是選擇器前綴 -
-moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px;這是瀏覽器內(nèi)核前綴 - 選擇合適的類庫
- 使用工具css reset ,Modernizr 等
以下工具/名詞是做什么的
- 條件注釋 : 于HTML源碼中被IE有條件解釋的語句,可被用來向IE提供及隱藏代碼。
- IE Hack : 指的是IE瀏覽器漏洞，利用IE Hack，我們可以兼容IE低版本
- js 能力檢測 : 檢測當(dāng)前瀏覽器支持和不支持的特性。如Modernizr.js,它會為瀏覽器的html標(biāo)簽生成一批的css的class名稱，標(biāo)記當(dāng)前瀏覽器支持和不支持的特性。我們利用html標(biāo)簽上的類名，就可以為不同版本的不同瀏覽器添加兼容樣式
- html5shiv.js : 使低版本瀏覽器模擬H5的標(biāo)簽
- respond.js : 使低版本瀏覽器模擬媒體查詢
- css reset : css初始化樣式,核心作用就是清除HTML自帶的樣式
- normalize.css : 也是css初始化,保護(hù)有用的瀏覽器默認(rèn)樣式而不是全部清除,修復(fù)一些瀏覽器bug,優(yōu)化css可用性,解釋代碼
- Modernizr : 檢測瀏覽器是否支持一些功能
- postCSS: 是通過自定義插件和工具這樣的生態(tài)系統(tǒng)來改造CSS。把擴展的語法和特性轉(zhuǎn)換成現(xiàn)代的瀏覽器友好的CSS
