網頁制作poluoluo文章簡介:如何遵循標准,其實標准有很多,結構標准,表現標准,行為標准。選擇標准規范,就優先選擇W3C推薦的標准。
接著上一篇,統一思想,遵循標准。如何遵循標准,其實標准有很多,結構標准,表現標准,行為標准。選擇標准規范,就優先選擇W3C推薦的標准。
結構標准可選項
看下維基百科的HTML推薦標准都有哪些:
http://zh.wikipedia.org/wiki/HTML#HTML
N多標准,建議選擇適合你公司和團隊的標准,其實核心理念還是讓項目統一遵循一個標准,嚴格的XHTML是這樣的。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Virtual Library</title>
</head>
<body>
<p>Moved to <a href="example.org.http://example.org/">example.org</a>.</p>
</body>
</html>
XHTML的媒體類型是application/xhtml+xml ,而不是被大多設備都識別的text/html。增加xml頭部聲明還會造成IE6的quirks模式。總得來說,不是通用性很強的標准,使用的時候需要捨棄W3C的一些說明,改良後的應該是去掉xml聲明,去掉媒體類型是application/xhtml+xml。不要給你們團隊的開發造成不必要的困擾。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Introduction to HTML</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
</body>
</html>
我這裡建議選擇XHTML1.0標准的過渡型,如果你覺得XHTML過於花俏,不適用,HTML4.0的嚴格型也是很好的選擇。HTML2.0已經被HTML5所取代,貌似看起來HTML4還是更具有向後的延續性。
網頁制作poluoluo文章簡介:如何遵循標准,其實標准有很多,結構標准,表現標准,行為標准。選擇標准規范,就優先選擇W3C推薦的標准。
其實上面所說的,也就是讓W3C標准兼容終端,本應該終端按照W3C規范來開發解析器,但是種種的原意,終端各持己見,置W3C標准於不顧,而用戶體驗永遠是第一位的。所以我們既然遵循標准,又要兼容終端。
我們不是標准的制定者,僅僅是實施者。就要考慮到項目的用戶群體的特性,使用哪個終端多一點,顯而易見,IE6的使用者仍然是大多數的。而且XHTML的嚴格定義方式不符合IE6的解析方式。通過權衡,即選擇了W3C的推薦標准,雖然不是最新的,也兼容了現有終端的情況。
廢話有點多了,概要的說明一下,選擇一個適合項目大多數用戶終端的標准,就HTML來說,4.0和xhtml1.0(改良後)都是不錯的,但是要遵循HTML的結構化和語義化的要求,標簽必須小寫,閉合合理,嵌套正確,摒棄表現型標記,結構代碼和表現代碼分離。html1.0也可以編寫成xml結構化的狀態,即時沒有xml聲明。
CSS是最頭疼的一塊,如果嚴格按照W3C的css2.1規范,是很難兼容到IE系列浏覽器的,特別是IE5.5 IE6兩種,他們的解析和W3C相差甚遠,所以CSS文件就必須進入hack,一種是css自身的私有屬性和私有識別的代碼,一種是IE浏覽器特有的條件注釋。細節就不多講了。
如何既遵循標准,有兼容浏覽器。那就是使用符合標准或者近似符合的浏覽器作為主要開發軟件,我建議安裝有firebug插件的firefox作為第一個調試工具,等界面完成後,再調試其他浏覽器,通過csshack或者條件注釋,或者兩者混搭。
理想的CSS兼容方案是,IE8,firefox這類通過Acid2 測試的浏覽器使用標准的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的份額太少,可以考慮不兼容,兼容也主要是盒模型上的兼容。
理想的終究會存在很多現實的問題,比如IE的請求數過多,這是速度上的損失,代碼維護不方面,同一個頁面需要維護多個css文件,容易產生遺漏,避免這兩個因素,css hack是做好的方式,主樣式+私有樣式解決兼容問題。
針對IE,常見bug的處理,haslayout的觸發,放在標准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規范為主,私有屬性為輔的策略,比如firefox的-moz-,IE8的-ms-,sefari和Chrome的-webkit-,Opera的-o-。
Javascript的標准兼容終端,我不是很清楚,基本的還可以看出,應用W3C的DOM操作文檔樹,而不是IE的document.all,摒棄IE的Jscript和VBscript。而且JS是可以去判斷終端的,實例:
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的歷史遠遠大於現在所說的富客戶端,很多經驗組建都源自於早期的IE平台上的DHTML,如何保持JS主體代碼的標准化和對IE系列的兼容,我自己還需要再積累積累。
最後,為什麼很多團隊要求將firefox作為開發環境,待代碼完成後再進行IE系列的bug調試。就是基於這個思想,先按照W3C標准規范編碼,再處理對標准支持不好的浏覽器的。這樣你才能理解為什麼把IE的錯誤解析成為bug,而且頁面工程師的教材也接近統一,那就是W3C的文檔,那是我們權威的教材。向後,終端都尊重了W3C標准,IE8就是很好的例子。