-
自然排名 點擊多少均不要錢喲！
可能會幫您的生意提高幾倍，幾十倍 -
網站建設之讓W3C標準兼容終端
發(fā)布日期：2010-2-9 20:34:0 發(fā)布者：飛鳥網站建設 頁面功能： 【字體：大 中 小】
接著上一篇，統一思想，遵循標準。如何遵循標準，其實標準有很多，結構標準，表現標準，行為標準。選擇標準規(guī)范，就優(yōu)先選擇W3C推薦的標準。
結構標準可選項看下維基百科的HTML推薦標準都有哪些：N多標準，建議選擇適合你公司和團隊的標準，其實核心理念還是讓項目統一遵循一個標準，嚴格的XHTML是這樣的。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"">
<html xmlns="" xml:lang="en" lang="en">
<head>
<title>Virtual Library</title>
</head>
<body>
<p>Moved to <a href="">example.org</a>.</p>
</body>
</html>
XHTML的媒體類型是application/xhtml+xml ，而不是被大多設備都識別的text/html。增加xml頭部聲明還會造成IE6的quirks模式?？偟脕碚f，不是通用性很強的標準，使用的時候需要舍棄W3C的一些說明，改良后的應該是去掉xml聲明，去掉媒體類型是application/xhtml+xml。不要給你們團隊的開發(fā)造成不必要的困擾。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"">
<html lang="en-US" xml:lang="en-US" xmlns="">
<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還是更具有向后的延續(xù)性。
其實上面所說的，也就是讓W3C標準兼容終端，本應該終端按照W3C規(guī)非凹復開發(fā)解析器，但是種種的原意，終端各持己見，置W3C標準于不顧，而用戶體驗永遠是前幾位的。所以我們既然遵循標準，又要兼容終端。
我們不是標準的制定者，**是實施者。就要考慮到項目的用戶群體的特性，使用哪個終端多一點，顯而易見，IE6的使用者仍然是大多數的。而且XHTML的嚴格定義方式不符合IE6的解析方式。通過權衡，即選擇了W3C的推薦標準，雖然不是更新的，也兼容了現有終端的情況。
廢話有點多了，概要的說明一下，選擇一個適合項目大多數用戶終端的標準，就HTML來說，4.0和xhtml1.0(改良后)都是不錯的，但是要遵循HTML的結構化和語義化的要求，標簽必須小寫，閉合合理，嵌套正確，摒棄表現型標記，結構代碼和表現代碼分離。html1.0也可以編寫成xml結構化的狀態(tài)，即時沒有xml聲明。
CSS是更頭疼的一塊，如果嚴格按照W3C的css2.1規(guī)范，是很難兼容到IE系列瀏覽器的，特別是IE5.5 IE6兩種，他們的解析和W3C相差甚遠，所以CSS文件就必須進入hack，一種是css自身的私有屬性和私有識別的代碼，一種是IE瀏覽器特有的條件注釋。細節(jié)就不多講了。
如何既遵循標準，有兼容瀏覽器。那就是使用符合標準或者近似符合的瀏覽器作為主要開發(fā)軟件，我建議安裝有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的觸發(fā)，放在標準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的標準兼容終端，我不是很清楚，基本的還可以看出，應用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作為開發(fā)環(huán)境，待代碼完成后再進行IE系列的bug調試。就是基于這個思想，先按照W3C標準規(guī)范編碼，再處理對標準支持不好的瀏覽器的。這樣你才能理解為什么把IE的錯誤解析成為bug，而且頁面工程師的教材也接近統一，那就是W3C的文檔，那是我們**的教材。向后，終端都尊重了W3C標準，IE8就是很好的例子。
網站建設之讓W3C標準兼容終端，謝謝閱讀。
