其實(shí)上面所說的,也就是讓W(xué)3C標(biāo)準(zhǔn)兼容終端,本應(yīng)該終端按照W3C規(guī)范來開發(fā)解析器,但是種種的原意,終端各持己見,置W3C標(biāo)準(zhǔn)于不顧,而用戶體驗(yàn)永遠(yuǎn)是第一位的。所以我們既然遵循標(biāo)準(zhǔn),又要兼容終端。 我們不是標(biāo)準(zhǔn)的制定者,僅僅是實(shí)施者。就要考慮到項目的用戶群體的特性,使用哪個終端多一點(diǎn),顯而易見,IE6的使用者仍然是大多數(shù)的。而且XHTML的嚴(yán)格定義方式不符合IE6的解析方式。通過權(quán)衡,即選擇了W3C的推薦標(biāo)準(zhǔn),雖然不是最新的,也兼容了現(xiàn)有終端的情況。 廢話有點(diǎn)多了,概要的說明一下,選擇一個適合項目大多數(shù)用戶終端的標(biāo)準(zhǔn),就HTML來說,4.0和xhtml1.0(改良后)都是不錯的,但是要遵循HTML的結(jié)構(gòu)化和語義化的要求,標(biāo)簽必須小寫,閉合合理,嵌套正確,摒棄表現(xiàn)型標(biāo)記,結(jié)構(gòu)代碼和表現(xiàn)代碼分離。html1.0也可以編寫成xml結(jié)構(gòu)化的狀態(tài),即時沒有xml聲明。
CSS是最頭疼的一塊,如果嚴(yán)格按照W3C的css2.1規(guī)范,是很難兼容到IE系列瀏覽器的,特別是IE5.5 IE6兩種,他們的解析和W3C相差甚遠(yuǎn),所以CSS文件就必須進(jìn)入hack,一種是css自身的私有屬性和私有識別的代碼,一種是IE瀏覽器特有的條件注釋。細(xì)節(jié)就不多講了。 如何既遵循標(biāo)準(zhǔn),有兼容瀏覽器。那就是使用符合標(biāo)準(zhǔn)或者近似符合的瀏覽器作為主要開發(fā)軟件,我建議安裝有firebug插件的firefox作為第一個調(diào)試工具,等界面完成后,再調(diào)試其他瀏覽器,通過csshack或者條件注釋,或者兩者混搭。 理想的CSS兼容方案是,IE8,firefox這類通過Acid2 測試的瀏覽器使用標(biāo)準(zhǔn)的CSS代碼,對沒有通過測試的(就是IE系列)使用條件注釋。例如:
<link rel="stylesheet" type="text/css" href="w3c.css" /> <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="ie7.css" /> <![endif]--> <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="ie7lt.css" /> <![endif]-->
IE5.5的份額太少,可以考慮不兼容,兼容也主要是盒模型上的兼容。 理想的終究會存在很多現(xiàn)實(shí)的問題,比如IE的請求數(shù)過多,這是速度上的損失,代碼維護(hù)不方面,同一個頁面需要維護(hù)多個css文件,容易產(chǎn)生遺漏,避免這兩個因素,css hack是做好的方式,主樣式+私有樣式解決兼容問題。 針對IE,常見bug的處理,haslayout的觸發(fā),放在標(biāo)準(zhǔn)CSS代碼的后面。比如:
.clearfix:after{content:"\0020"; display:block; height:0; clear:both;} .clearfix{*zoom:1;/*IE haslayout*/} .box {float:left;margin-left:20px;_display:inline;/*雙倍margin bug*/}
以后的瀏覽器對CSS的處理都采用W3C css2.1規(guī)范為主,私有屬性為輔的策略,比如firefox的-moz-,IE8的-ms-,sefari和Chrome的-webkit-,Opera的-o-。
Javascript的標(biāo)準(zhǔn)兼容終端,我不是很清楚,基本的還可以看出,應(yīng)用W3C的DOM操作文檔樹,而不是IE的document.all,摒棄IE的Jscript和VBscript。而且JS是可以去判斷終端的,實(shí)例:
var ua = navigator.userAgent.toLowerCase(); var _isOpera = ua.indexOf('opera') != -1, _isSafari = ua.indexOf('safari') != -1, _isGecko = !_isOpera && !_isSafari && ua.indexOf('gecko') > -1, _isIE = !_isOpera && ua.indexOf('msie') != -1, _isIE6 = !_isOpera && ua.indexOf('msie 6') != -1, _isIE7 = !_isOpera && ua.indexOf('msie 7') != -1;
通過終端的判斷,給IE開小灶,解決IE 的兼容問題。
if (_isIE6) { // IE6 //語句 }
DHTML的歷史遠(yuǎn)遠(yuǎn)大于現(xiàn)在所說的富客戶端,很多經(jīng)驗(yàn)組建都源自于早期的IE平臺上的DHTML,如何保持JS主體代碼的標(biāo)準(zhǔn)化和對IE系列的兼容,我自己還需要再積累積累。
最后,為什么很多團(tuán)隊要求將firefox作為開發(fā)環(huán)境,待代碼完成后再進(jìn)行IE系列的bug調(diào)試。就是基于這個思想,先按照W3C標(biāo)準(zhǔn)規(guī)范編碼,再處理對標(biāo)準(zhǔn)支持不好的瀏覽器的。這樣你才能理解為什么把IE的錯誤解析成為bug,而且頁面工程師的教材也接近統(tǒng)一,那就是W3C的文檔,那是我們權(quán)威的教材。向后,終端都尊重了W3C標(biāo)準(zhǔn),IE8就是很好的例子。
經(jīng)典論壇交流: http://bbs.blueidea.com/thread-2952264-1-1.html
本文鏈接:http://www.95time.cn/tech/web/2009/7055.asp
出處:藍(lán)色理想
責(zé)任編輯:bluehearts
上一頁 悟道Web標(biāo)準(zhǔn):讓W(xué)3C標(biāo)準(zhǔn)兼容終端 [1] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評論。
|