1. 什么是 CSS hack
由于不同廠商的瀏覽器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等近速,或者是同一廠商的瀏覽器的不同版本,如IE6和IE7抬旺,對(duì)CSS的解析認(rèn)識(shí)不完全一樣朗和,因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣,得不到我們所需要的頁(yè)面效果按灶。這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫(xiě)不同的CSS,讓它能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果筐咧。
2. 談一談瀏覽器兼容的思路
- 首先考慮要不要做兼容鸯旁。從產(chǎn)品的角度考慮產(chǎn)品的受眾,及受眾使用的各瀏覽器的比例嗜浮,效果優(yōu)先還是基本功能優(yōu)先羡亩。
- 兼容哪些瀏覽器,兼容到什么版本危融,讓哪些瀏覽器支持哪些效果畏铆。
- 漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)的選擇
- 如何做兼容,根據(jù)兼容需求選擇技術(shù)框架吉殃,比如:
- Bootstrap (>=ie8)
- jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
- Vue (>= ie9)
- 根據(jù)兼容需求選擇兼容工具h(yuǎn)tml5shiv.js辞居、respond.js、css reset蛋勺、Modernizr瓦灶、postCSS
- 考慮使用條件注釋、CSS Hack抱完、js 能力檢測(cè)等對(duì)兼容做一些修補(bǔ)贼陶。
3.列舉5種以上瀏覽器兼容的寫(xiě)法
條件注釋
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語(yǔ)句。條件注釋可被用來(lái)向IE提供及隱藏代碼巧娱。
<script>alert(1);</script>
使用了條件注釋的頁(yè)面在 Windows Internet Explorer 9 中可正常工作碉怔,但在 Internet Explorer 10 中無(wú)法正常工作。 IE10不再支持條件注釋-
CSS hack
可以實(shí)現(xiàn)只有IE才能識(shí)別的樣式或html代碼
.box{
color: red;
_color: blue; /ie6/
color: pink; /ie67/
color: yellow\9; /ie/edge 6-8*/
}<!–-[if IE 7]> <link rel="stylesheet" href="ie7.css" type="text/css" /> <![endif]–->
根據(jù)瀏覽器選擇相應(yīng)的樣式
- inline-block: >=ie8
- min-width/min-height: >=ie8
- :before,:after: >=ie8
- div:hover: >=ie7
- background-size: >=ie9
- 圓角: >= ie9
- 陰影: >= ie9
- 動(dòng)畫(huà)/漸變: >= ie10
使用html5shiv.js可以使IE6禁添,7兼容html5標(biāo)簽
使用response.js十一使IE6撮胧,7支持媒體查詢
4. 以下工具/名詞是做什么的
- 條件注釋
作用:在HTML源碼中寫(xiě)出能被IE有條件解釋的代碼,可以向IE提供或隱藏代碼
IE Hack
作用:使用特殊的語(yǔ)句寫(xiě)出只有IE能夠解析的代碼老翘,常見(jiàn)的IE Hack有屬性前置法芹啥、選擇器前置法和IE條件注釋js 能力檢測(cè)
作用:使用js語(yǔ)句檢測(cè)瀏覽器是否支持某種特定的屬性html5shiv.js
作用:可以解決IE9以下版本瀏覽器對(duì)html5標(biāo)簽不識(shí)別的問(wèn)題respond.js
作用:可以使IE6~IE8支持媒體查詢css reset
作用:因?yàn)樵缙诘臑g覽器支持和理解的CSS規(guī)范不同,導(dǎo)致渲染出來(lái)的效果不一樣铺峭,會(huì)出現(xiàn)兼容性問(wèn)題墓怀,css reset通過(guò)重新定義標(biāo)簽的樣式,覆蓋瀏覽器的默認(rèn)樣式normalize.css
作用:是一個(gè)很小的css文件卫键,但它在默認(rèn)的html元素樣式上提供了跨瀏覽器的高度一致性捺疼,相比于reset.css,它是一種現(xiàn)代的永罚,為html5準(zhǔn)備的優(yōu)質(zhì)替代方案Modernizr
作用:用于檢測(cè)出瀏覽器是否支持某種html5和css3的新特性啤呼,瀏覽器是否禁用js等postCSS
是一套使用js插件實(shí)現(xiàn)的轉(zhuǎn)換CSS的工具;這些插件支持變量呢袱、混合語(yǔ)法等等官扣;參考:PostCSS快速入門(mén)使用
- 一般在哪個(gè)網(wǎng)站查詢屬性兼容性?
caniuse :查css屬性 選擇器在各瀏覽器的兼容羞福。
browserhacks:查css屬性 選擇器在各瀏覽器Hack的寫(xiě)法