1嗤瞎、什么是 CSS hack
由于不同廠商的瀏覽器佛舱,比如IE, Safari, Mozilla Firefox, Chrome等山憨,或者是同一廠商的瀏覽器的不同版本耐床,如IE6和IE7,對CSS的解析認(rèn)識不完全一樣富拗,因此會導(dǎo)致生成的頁面效果不一樣臼予,得不到我們所需要的頁面效果鸣戴。此時啃沪,針對不同的瀏覽器去寫不同的CSS,使之能在不同的瀏覽器中也能得到想要的頁面效果窄锅,這一過程為CSS hack创千。
2、談一談瀏覽器兼容的思路
(1)考慮需求(要不要做)
- 從產(chǎn)品角度入偷,產(chǎn)品的受眾追驴、受眾瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先疏之。一般是兼容到IE6殿雪、IE8等。
- 從成本角度锋爪,有無必要做丙曙。
(2)考慮范圍(做到什么程度)
讓哪些瀏覽器支持哪些效果。
(3)具體方法- 根據(jù)兼容需求選擇技術(shù)框架/庫(jquery)其骄;
- 根據(jù)兼容需求選擇兼容工具亏镰;html5shiv.js、respond.js拯爽、css reset索抓、normalize.css、Modernizr、 postCSS逼肯;
- 條件注釋耸黑、CSS Hack、js 能力檢測做一些修補 汉矿。
(4)漸進增強:針對低版本瀏覽器進行構(gòu)建頁面崎坊,保證最基本的功能,然后再針對高級瀏覽器進行效果洲拇、交互等改進和追加功能達(dá)到更好的用戶體驗奈揍。
優(yōu)雅降級:一開始就構(gòu)建完整的功能,然后再針對低版本瀏覽器進行兼容赋续。
3男翰、列舉5種以上瀏覽器兼容的寫法
(1)選擇合適的框架,Bootstrap (>=ie8)纽乱、jQuery 1.~ (>=ie6)蛾绎、jQuery
(2)條件注釋,用來向IE提供及隱藏代碼鸦列。
CSS hack
(3)屬性前綴法租冠,IE6能識別下劃線_和星號,IE7能識別星號薯嗤,但不能識別下劃線顽爹;IE6~IE10都認(rèn)識\9,但firefox前述三個都不能認(rèn)識骆姐。
!important镜粤,表示高優(yōu)先級,ie7及以上玻褪,firefox都支持肉渴,ie6認(rèn)識帶!important的樣式屬性,但不認(rèn)識!important的優(yōu)先級带射;
-webkit- 同规,針對safari,chrome瀏覽器的內(nèi)核CSS寫法窟社;
-moz-券勺,針對firefox瀏覽器的內(nèi)核CSS寫法;
-ms-桥爽,針對ie內(nèi)核的CSS寫法朱灿;
-o-,針對Opera內(nèi)核的CSS寫法钠四。
(4)選擇器前綴法
(5)一些和兼容相關(guān)的開發(fā)工具
- Html5shiv.js 讓IE9以下的IE瀏覽器支持html5的一些標(biāo)簽盗扒,可以用html5shiv.js來模擬標(biāo)簽跪楞。
- Respond 媒體查詢(css3新特性),有些瀏覽器不支持媒體查詢侣灶,可以用respond.js來兼容甸祭。
- CSS reset 清除、覆蓋瀏覽器的CSS默認(rèn)屬性褥影。
- Normalize.css 是CSS reset的改良版池户,讓不同的瀏覽器在渲染網(wǎng)頁元素的時候形式更統(tǒng)一。
- Modernizr 可以檢測html5和css3的特性凡怎。
4校焦、以下工具/名詞是做什么的。
條件注釋
统倒,是html源碼中被IE有條件解釋的語句寨典,用來向IE提供及隱藏代碼。IE9以下支持條件注釋房匆,IE10不再支持條件注釋耸成。
IE Hack
,針對IE瀏覽器編寫不同的CSS讓IE能夠正常渲染的過程浴鸿。包括屬性前綴法井氢、選擇器前綴法以及IE條件注釋法。
js能力檢測
岳链,首先檢測瀏覽器是否支持特定的能力花竞,然后可以給出特定的解決方案。
html5shiv.js
宠页,讓IE9以下的IE瀏覽器支持html5的一些標(biāo)簽左胞,可以用html5shiv.js來模擬標(biāo)簽寇仓。
respond.js
举户,對于媒體查詢(css3新特性),有些瀏覽器不支持遍烦,可以用respond.js來兼容俭嘁。
CSS reset
,清除服猪、覆蓋瀏覽器的CSS默認(rèn)屬性供填。
normalize.CSS
,是CSS reset的改良版罢猪,讓不同的瀏覽器在渲染網(wǎng)頁元素的時候形式更統(tǒng)一近她。
modernizr
,是一個JavaScript庫膳帕,可以檢測html5和css3的特性粘捎。
postCSS
薇缅,是一個使用JS插件來轉(zhuǎn)換CSS的工具。
5攒磨、查詢兼容性網(wǎng)站
http://caniuse.com/ 查CSS屬性兼容
http://browserhacks.com/ 查Hack的寫法