什么是 CSS hack
CSS hack由于不同廠商的瀏覽器犬绒,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等彤枢,或者是同一廠商的瀏覽器的不同版本,如IE6和IE7亏掀,對CSS的解析認識不完全一樣角塑,因此會導(dǎo)致生成的頁面效果不一樣铺遂,得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS士袄,讓它能夠同時兼容不同的瀏覽器悲关,能在不同的瀏覽器中也能得到我們想要的頁面效果。簡單的說娄柳,CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器寓辱。當(dāng)然,我們也可以反過來利用CSS hack為不同版本的瀏覽器定制編寫不同的CSS效果赤拒。
CSS Hack大致有3種表現(xiàn)形式
- CSS屬性前綴法
- 選擇器前綴法
- IE條件注釋法(即HTML頭部引用if IE)Hack秫筏,實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現(xiàn)差異而引入的诱鞠。注:IE條件注釋法(即HTML條件注釋Hack):針對所有IE(注:IE10+已經(jīng)不再支持條件注釋): ,針對IE6及以下版本: 这敬。這類Hack不僅對CSS生效航夺,對寫在判斷語句里面的所有代碼都會生效。
談一談瀏覽器兼容的思路
要不要做
產(chǎn)品的角度(產(chǎn)品的受眾崔涂、受眾的瀏覽器比例阳掐、效果優(yōu)先還是基本功能優(yōu)先)
成本的角度 (有無必要做某件事)做到什么程度
讓哪些瀏覽器支持哪些效果
如何做
根據(jù)兼容需求選擇技術(shù)框架/庫(jquery)
根據(jù)兼容需求選擇兼容工具(html5shiv.js、[respond.js]- (https://github.com/scottjehl/Respond)堪伍、css reset锚烦、normalize.css、Modernizr)postCSS
條件注釋帝雇、CSS Hack涮俄、js 能力檢測做一些修補
列舉5種以上瀏覽器兼容的寫法
條件注釋
<script>alert(1);</script>
CSS hack
.box{ color: red; _color: blue; /*ie6*/ *color: pink; /*ie67*/ color: yellow\9; /*ie/edge 6-8*/}
以下工具/名詞是做什么的
條件注釋
條件注釋 (conditional comment) 是于HTML源碼中被 Microsoft Internet Explorer 有條件解釋的語句。條件注釋可被用來向 Internet Explorer 提供及隱藏代碼
IE Hack
使用特殊的符號或者方式寫出只有IE瀏覽器可以解析的代碼尸闸,有CSS屬性前綴法彻亲、選擇器前綴法以及IE條件注釋法
js 能力檢測
使用JS的語法檢測瀏覽器支持的屬性,以便展示效果html5shiv.js用于解決IE9以下版本瀏覽器對HTML5新增標(biāo)簽不識別吮廉,并導(dǎo)致CSS不起作用的問題苞尝。
respond.js
讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。
css reset
通過重新定義標(biāo)簽樣式宦芦,“覆蓋”瀏覽器的CSS默認屬性
normalize.css
Normalize.css 只是一個很小的CSS文件宙址,但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統(tǒng)的CSS reset调卑,Normalize.css是一種現(xiàn)代的抡砂、為HTML5準備的優(yōu)質(zhì)替代方案。
Modernizr
Modernizr是一個 JavaScript 庫恬涧,用于檢測用戶瀏覽器的 HTML5 與 CSS3 特性注益。
postCSS
PostCSS是一個JS插件轉(zhuǎn)換樣式表的工具。這些插件能夠檢驗?zāi)愕腃SS溯捆、支持變量和混合丑搔,轉(zhuǎn)化css3的新特性語法、行內(nèi)圖片等提揍。
一般在哪個網(wǎng)站查詢屬性兼容性啤月?
caniuse :查css屬性 選擇器在各瀏覽器的兼容。browserhacks:查css屬性 選擇器在各瀏覽器Hack的寫法