瀏覽器兼容

一、前言

做前端開(kāi)發(fā),必然少不了瀏覽器,然而不同的廠商有著各自版本的瀏覽器,不同的瀏覽器對(duì)css的理解和解析不一樣。那用戶使用不同廠商不同版本的瀏覽器,而我們要給用戶一個(gè)統(tǒng)一的網(wǎng)頁(yè),那我們?cè)趯?xiě)css時(shí)就必須考慮到網(wǎng)頁(yè)在不同的瀏覽器展現(xiàn)所帶來(lái)的問(wèn)題。
  例如,一個(gè)css屬性,在IE 8不可以使用,但是在IE 9可以使用,而我們又使用了這個(gè)css屬性,又必須在IE 8上展示,那我們就需要解決這個(gè)屬性在不同版本的展示,也就是瀏覽器的兼容問(wèn)題。下面通過(guò)一些解決思路和方法來(lái)探討如何解決瀏覽器的兼容問(wèn)題。

二、什么是 CSS hack

不同版本或不同廠商的的瀏覽器(如IE6-IE11,Firefox/Safari/Opera/Chrome等),對(duì)CSS的支持和解析存在著差異,我們?yōu)樵诓煌臑g覽器獲得統(tǒng)一的頁(yè)面展現(xiàn)效果,就需要針對(duì)不同的瀏覽器寫(xiě)特定的CSS樣式。我們把針對(duì)不同的瀏覽器寫(xiě)相應(yīng)的CSS樣式的過(guò)程稱為CSS hack。

三、淺談解決瀏覽器兼容的思路
1、要不要做這個(gè)產(chǎn)品

如果我們要做一個(gè)產(chǎn)品,首先要從成本和回報(bào)的角度來(lái)考慮,這個(gè)產(chǎn)品是否有必要做。
  如果有必要,我們?cè)購(gòu)漠a(chǎn)品的角度思考又是為哪類用戶做。用戶會(huì)通過(guò)哪些瀏覽器來(lái)瀏覽網(wǎng)頁(yè),不同的瀏覽器使用的比例,以及是網(wǎng)頁(yè)展示的功能優(yōu)先還是網(wǎng)頁(yè)展示的效果優(yōu)先。這些問(wèn)題我們都需要了解。
  在這里推薦一個(gè)網(wǎng)站,百度統(tǒng)計(jì),我們可以從這個(gè)網(wǎng)站了解到不同的瀏覽器的市場(chǎng)份額。從這個(gè)網(wǎng)站我們也可以看到,依然有一部分人群,使用比較老版本的瀏覽器(如IE 7、8)。我們的用戶是不是大部分使用這些老版本的瀏覽器的,一般安全性比較高的政府機(jī)關(guān)或者銀行等單位,他們的瀏覽器一般都是比較老的。如果我們的用戶是這些,那我們寫(xiě)CSS時(shí),就要考慮屬性兼容的問(wèn)題。

2、做到什么程度

一般企業(yè)都會(huì)從成本和回報(bào)的角度去考慮,這個(gè)產(chǎn)品做到什么程度。假如產(chǎn)品的重要性我們已經(jīng)了解,那我們要考慮讓哪些瀏覽器來(lái)支持,需不需要老版本的瀏覽器支持,支持到哪個(gè)版本等等都要了解。了解這些過(guò)后,我們?cè)谧鼍W(wǎng)頁(yè)開(kāi)發(fā)時(shí),就會(huì)有一個(gè)清晰的思路,如何讓不支持這個(gè)CSS屬性的瀏覽器,獲得同樣支持的瀏覽器的頁(yè)面統(tǒng)一。

3、常用解決兼容的方法

一般解決兼容有兩個(gè)思路,漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)。
  漸進(jìn)增強(qiáng)(progressive enhancement): 針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面,保證最基本的功能,然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。
  優(yōu)雅降級(jí) (graceful degradation): 一開(kāi)始就構(gòu)建完整的功能,然后再針對(duì)低版本瀏覽器進(jìn)行兼容。

二者區(qū)別:
  “優(yōu)雅降級(jí)”觀點(diǎn)認(rèn)為應(yīng)該針對(duì)那些最高級(jí)、最完善的瀏覽器來(lái)設(shè)計(jì)網(wǎng)站。而將那些被認(rèn)為“過(guò)時(shí)”或有功能缺失的瀏覽器下的測(cè)試工作安排在開(kāi)發(fā)周期的最后階段,并把測(cè)試對(duì)象限定為主流瀏覽器(如 IE、Chrome等)的前一個(gè)版本。

在這種設(shè)計(jì)范例下,舊版的瀏覽器被認(rèn)為僅能提供“簡(jiǎn)陋卻無(wú)妨 ” 的瀏覽體驗(yàn)。你可以做一些小的調(diào)整來(lái)適應(yīng)某個(gè)特定的瀏覽器。但由于它們并非我們所關(guān)注的焦點(diǎn),因此除了修復(fù)較大的錯(cuò)誤之外,其它的差異將被直接忽略。

“漸進(jìn)增強(qiáng)”觀點(diǎn)則認(rèn)為應(yīng)關(guān)注于內(nèi)容本身。內(nèi)容是我們建立網(wǎng)站的誘因。有的網(wǎng)站展示它,有的則收集它,有的尋求,有的操作,還有的網(wǎng)站甚至?xí)陨系姆N種,但相同點(diǎn)是它們?nèi)忌婕暗絻?nèi)容。這使得“漸進(jìn)增強(qiáng)”成為一種更為合理的設(shè)計(jì)范例。

“優(yōu)雅降級(jí)”和“漸進(jìn)增強(qiáng)”都關(guān)注于同一網(wǎng)站在不同設(shè)備里不同瀏覽器下的表現(xiàn)程度。關(guān)鍵的區(qū)別則在于它們各自關(guān)注于何處,以及這種關(guān)注如何影響工作的流程。在實(shí)際的開(kāi)發(fā)當(dāng)中分析準(zhǔn)確,具有什么功能或者效果的網(wǎng)頁(yè),將會(huì)給我們的開(kāi)發(fā)工作減少很多彎路。

在具體的開(kāi)發(fā)當(dāng)中我們一般參考一下幾個(gè)方法,獲得較理想的兼容效果。
方法1:根據(jù)兼容需求選擇技術(shù)框架/庫(kù)(jquery)。
方法2:根據(jù)兼容需求選擇兼容工具(html5shiv.js、respond.js、css resetnormalize.cssModernizr)。
方法3:postCSS
方法4:條件注釋、CSS Hack、js 能力檢測(cè)做一些修補(bǔ)。

四、瀏覽器兼容的寫(xiě)法舉例

以下包含但不限于

1、選擇合適的框架

①、Bootstrap (>=ie8) :即IE 8及以上都可以使用。
②、jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9):jQuery2以下版本,IE6及以后瀏覽器都能識(shí)別;jQuery2以上IE9及以上都能使用。
③、Vue (>= ie9):IE9及以后版本都能使用。

2、條件注釋 (conditional comment)

條件注釋是于HTML源碼中被 Microsoft Internet Explorer 有條件解釋的語(yǔ)句。條件注釋可被用來(lái)向 Internet Explorer 提供及隱藏代碼。也稱:IE hack。
  有兩種“條件注釋”:下層顯示 (downlevel revealed)和下層隱藏(downlevel hidden)。
下層隱藏:
下層顯示 :<![if expression]> HTML <![endif]>
如下是兩個(gè)“下層隱藏”條件注釋的示例。

或者

第一個(gè)示例中的指令將會(huì)讓 IE 8 讀取指定的CSS文件,而 IE 7 或者其它版本的 IE 將會(huì)忽略它。非 IE 的瀏覽器同樣會(huì)把它忽略因?yàn)樗雌饋?lái)像一條標(biāo)準(zhǔn)的 HTML 注釋。第二條示例里的標(biāo)記將會(huì)讓 IE 5 至 7 讀取其內(nèi)的 CSS 樣式。通過(guò)對(duì)這種標(biāo)記的不同的使用你也可以挑出 IE 6, IE 5 或者比指定版本更新(大)或更舊(?。┌姹镜?IE。

這里解釋一下標(biāo)準(zhǔn) HTML 注釋:標(biāo)準(zhǔn) HTML 注釋:
  注釋標(biāo)簽用于在源代碼中插入注釋。注釋不會(huì)顯示在瀏覽器中。您可使用注釋對(duì)您的代碼進(jìn)行解釋,這樣做有助于您在以后的時(shí)間對(duì)代碼的編輯。當(dāng)您編寫(xiě)了大量代碼時(shí)尤其有用。
  使用注釋標(biāo)簽來(lái)隱藏瀏覽器不支持的腳本也是一個(gè)好習(xí)慣(這樣就不會(huì)把腳本顯示為純文本)。

3、CSS hack

CSS Hack大致有3種表現(xiàn)形式,CSS屬性前綴法、選擇器前綴法以及IE條件注釋法(即HTML頭部引用if IE)Hack,實(shí)際項(xiàng)目中CSS Hack大部分是針對(duì)IE瀏覽器不同版本之間的表現(xiàn)差異而引入的。browserhacks 查 Hack 的寫(xiě)法網(wǎng)站。

(1)屬性前綴法(即類內(nèi)部Hack):例如 IE6能識(shí)別下劃線""和星號(hào)" * ",IE7能識(shí)別星號(hào)" * ",但不能識(shí)別下劃線"",IE6~IE10都認(rèn)識(shí)"\9",但firefox前述三個(gè)都不能認(rèn)識(shí)。
示列:
background-color:red; /* All browsers */ background-color:blue !important;/* All browsers but IE6 */ *background-color:black; /* IE6, IE7 */ +background-color:yellow;/* IE6, IE7*/ background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */ background-color:purple\0; /* IE8, IE9, IE10 */ background-color:orange\9\0;/*IE9, IE10*/ _background-color:green; /* Only works in IE6 */
(2)選擇器前綴法(即選擇器Hack)。
示例:
*html *前綴只對(duì)IE6生效 *+html *+前綴只對(duì)IE7生效 @media screen\9{...}只對(duì)IE6/7生效
(3)IE條件注釋法(即HTML條件注釋Hack):上文已談到條件注釋,此處不再贅述。

4、常見(jiàn)屬性的兼容情況

inline-block: >=ie8
min-width/min-height: >=ie8
:before,:after: >=ie8
div:hover: >=ie7
inline-block: >=ie8
background-size: >=ie9
圓角: >= ie9
陰影: >= ie9
動(dòng)畫(huà)/漸變: >= ie10

五、一些和兼容相關(guān)的開(kāi)發(fā)利器

1、html5shiv.js
HTML5 Shiv支持在舊版Internet Explorer中使用HTML5細(xì)分元素,并為Internet Explorer 6-9,Safari 4.x(和iPhone 3.x)和Firefox 3.x提供基本的HTML5樣式。
2、respond.js
此腳本的目標(biāo)是提供一個(gè)快速和輕量級(jí)(3kb縮小/ 1kb gzipped)腳本,以便
在不支持CSS3媒體查詢的瀏覽器中啟用響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì),特別是Internet Explorer 8及更低版本。
3、css reset:其目的是將所有的瀏覽器的自帶樣式重置掉,這樣更易于保持各瀏覽器渲染的一致性。不過(guò),由于出現(xiàn)了更加優(yōu)秀的Normalize.css,所以css reset基本上被替代了。
4、normalize.css
Normalize.css只是一個(gè)很小的CSS文件,但它在默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統(tǒng)的CSS reset,Normalize.css是一種現(xiàn)代的、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案。
Normalize.css現(xiàn)在已經(jīng)被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、RdioCSS Tricks 以及許許多多其他框架、工具和網(wǎng)站上。
5、Modernizr
Modernizr是一套JavaScript 庫(kù),用來(lái)偵測(cè)瀏覽器是否支持HTML5與CSS3等規(guī)格。如果瀏覽器不支持,Modernizr會(huì)使用其他的解決方法來(lái)進(jìn)行模擬。
許多HTML5與CSS 3的功能已經(jīng)在許多主流的瀏覽器中實(shí)現(xiàn)出來(lái)。Modernizr能夠告訴開(kāi)發(fā)者,瀏覽器是否已經(jīng)實(shí)現(xiàn)他們想要的功能。這讓開(kāi)發(fā)者在瀏覽器上可以充分利用這些新功能,或者嘗試制作解決方案來(lái)支持那些老舊的瀏覽器。
6、Postcss
PostCSS是一個(gè)使用JS插件轉(zhuǎn)換樣式的工具。這些插件可以刪除您的CSS,支持變量和混合,透明未來(lái)的CSS語(yǔ)法,內(nèi)聯(lián)圖像等。

六、task12完

保持饑餓保持學(xué)習(xí)
注:CSS所有的屬性我們都可以在這個(gè)網(wǎng)站去查[caniuse.com]
參考資料:
1、 http://blog.csdn.net/freshlover/article/details/12132801
2、http://blog.csdn.net/xiongzhengxiang/article/details/7999525
3、https://zh.wikipedia.org/zh-hans/%E6%9D%A1%E4%BB%B6%E6%B3%A8%E9%87%8A
4、http://www.w3school.com.cn/tags/tag_comment.asp
5、http://jerryzou.com/posts/aboutNormalizeCss/
6、https://zh.wikipedia.org/wiki/Modernizr

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 一、如何調(diào)試 IE 瀏覽器? IE調(diào)試的一般方法(css): 使用高版本IE控制臺(tái)(對(duì)于IE7以上)IE11的開(kāi)發(fā)...
    婷樓沐熙閱讀 563評(píng)論 0 6
  • CSS Hack 不同的瀏覽器對(duì)某些CSS代碼解析會(huì)存在一定的差異,因此就會(huì)導(dǎo)致不同瀏覽器下給用戶展示的頁(yè)面效果不...
    zx9426閱讀 407評(píng)論 0 0
  • 做前端多年,雖然不是經(jīng)常需要hack,但是我們經(jīng)常會(huì)遇到各瀏覽器表現(xiàn)不一致的情況?;诖?,某些情況我們會(huì)極不情愿的...
    大女表哥閱讀 1,131評(píng)論 0 9
  • 什么是 CSS hack 由于不同廠商的瀏覽器,比如Internet Explorer,Safari,Mozill...
    阿魯提爾閱讀 270評(píng)論 0 2
  • 本文版權(quán)歸饑人谷和本人所有 1.什么是 CSS hackCSS hack由于不同廠商的瀏覽器,比如Internet...
    饑人谷_xxxxx閱讀 313評(píng)論 0 0