推薦！構(gòu)建現(xiàn)代化網(wǎng)站的20個(gè)實(shí)用技巧

@傅小黑?在過(guò)去幾年中，我們與web開發(fā)者花了很多時(shí)間交流，聽(tīng)得最多的一件事情就是創(chuàng)建一個(gè)能很好的跨越各種類型瀏覽器版本與各種設(shè)備的網(wǎng)站有多么難。我們?yōu)閖Query項(xiàng)目寫代碼的時(shí)候一直有這個(gè)問(wèn)題。因此我們整理了20條編碼模式與經(jīng)驗(yàn)，它們是從出席無(wú)休止的會(huì)議和讀了幾百篇專稿中摘取出來(lái)的。我們希望能在你建站的時(shí)候給你節(jié)省一些時(shí)間和麻煩。

跨瀏覽器基礎(chǔ)

網(wǎng)站不需要在所有瀏覽器里渲染得一樣

一件普遍被開發(fā)者所關(guān)心的事情是確保他們的網(wǎng)站在所有瀏覽器中渲染得一樣，包括非現(xiàn)代的一些。那一般并不需要。更好的路線是考慮逐漸增強(qiáng)你的網(wǎng)站，對(duì)非現(xiàn)代瀏覽器的用戶提供一個(gè)可靠的工作基線，而給用現(xiàn)代瀏覽器的用戶提供一個(gè)更豐富的UI。

從固體模版開始以簡(jiǎn)化開發(fā)

許多的技巧已經(jīng)創(chuàng)建進(jìn)項(xiàng)目模版如HTML5 Boilerplate?以節(jié)省你一些時(shí)間。這些準(zhǔn)則對(duì)以現(xiàn)代瀏覽器為目標(biāo)的項(xiàng)目和需要舊瀏覽器（一直回退到IE6）支持的項(xiàng)目工作得一樣好。

關(guān)注穩(wěn)定的標(biāo)準(zhǔn)

當(dāng)一個(gè)新又酷的特性出現(xiàn)的時(shí)候很容易令人興奮，但其中的一些可能仍然在為技術(shù)參數(shù)實(shí)驗(yàn)、仍然在開發(fā)中。重要的是要記得，在規(guī)范發(fā)展的早期是很容易變化的，這有可能影響你的網(wǎng)站的穩(wěn)定性和你的用戶的體驗(yàn)。通過(guò)關(guān)注穩(wěn)定的標(biāo)準(zhǔn)，你可以確保你的用戶能獲得他們期望的體驗(yàn)，你的網(wǎng)站會(huì)更易維護(hù)。

用IE兼容檢測(cè)工具幫助你的網(wǎng)站遷移到基于標(biāo)準(zhǔn)的代碼

標(biāo)準(zhǔn)是IE10的一個(gè)核心部分，幫助開發(fā)者遷移他們的代碼以便能發(fā)揮這項(xiàng)長(zhǎng)處，這對(duì)IE工程項(xiàng)目組來(lái)說(shuō)無(wú)比重要。這就是為什么他們創(chuàng)造了IE兼容檢測(cè)工具，它能實(shí)時(shí)分析你的網(wǎng)站，準(zhǔn)確的找到通常問(wèn)題的類型并給出解決方法。通過(guò)在你的代碼中包括一個(gè)簡(jiǎn)單的JavaScript腳本文件，在你的頁(yè)面你就能得到可視化的結(jié)果。它也可以被集成進(jìn)Fidder HTTP 分析工具。

謹(jǐn)慎使用polyfills和shims（模擬標(biāo)準(zhǔn)API）

如果你必須在不同瀏覽器實(shí)現(xiàn)系統(tǒng)的體驗(yàn)，polyfills和shims提供了代碼和標(biāo)簽，可以幫助模擬標(biāo)準(zhǔn)的API和功能。需要謹(jǐn)記的是，確保你引入的代碼適合你的需要，并且可以在日后維護(hù)。

開發(fā)時(shí)多瀏覽器測(cè)試

盡管相對(duì)以前，現(xiàn)代瀏覽器已經(jīng)接近統(tǒng)一標(biāo)準(zhǔn)，但還是有不同。偶爾的多瀏覽器測(cè)試避免不會(huì)在最后一刻發(fā)現(xiàn)大問(wèn)題——甚至已經(jīng)上線了。確保查看所有瀏覽器調(diào)試器比如IE的F12 Dev Tools，檢查有沒(méi)有警告或錯(cuò)誤信息。一些老瀏覽器比如IE7沒(méi)有內(nèi)建調(diào)試器，可以用Firebug Lite調(diào)試?；蛘呤褂每鐬g覽器解決方案如BrowserStack。

用工具參與創(chuàng)建過(guò)程來(lái)檢測(cè)錯(cuò)誤和縮小文件大小

有好一批創(chuàng)建工具如?HTML validators,?CSS validators,?Uglify,??JSHint, 或者?GruntJS?，他們能找到潛在的問(wèn)題，增強(qiáng)項(xiàng)目代碼的標(biāo)準(zhǔn)，減少文件的大小提升性能。如果你的IDE或者代碼編輯器支持它們，這些步驟就不會(huì)成為絆腳石。例如，Visual Studio提供了在創(chuàng)建過(guò)程中運(yùn)行外部工具和合并/壓縮腳本文件的能力。

HTML

總是使用標(biāo)準(zhǔn)模式避免怪癖模式

直接用<!DOCTYPE html>吧！現(xiàn)代化網(wǎng)站不需要怪癖模式，不需要考慮90年代中期為了兼容現(xiàn)代化的瀏覽器比如IE6和FireFox 2.大多數(shù)現(xiàn)今的網(wǎng)頁(yè)在怪癖模式下要么文檔聲明無(wú)效，要么出現(xiàn)無(wú)關(guān)文本。很容易導(dǎo)致布局異常，而且很難調(diào)試。

理解有限向后兼容的HTML標(biāo)簽

新HTML5標(biāo)簽比如<section>,<header>和<footer>改善標(biāo)簽的語(yǔ)義化，但需要特殊的輔助腳本讓IE6,7和8認(rèn)識(shí)他們。頁(yè)面在太舊的瀏覽器或者禁止腳本時(shí)無(wú)法使用HTML5標(biāo)簽，那么使用<div>標(biāo)簽是對(duì)這些情況比較靠譜的解決方法。

將CSS在HTML文件頂部引入

在文檔body中引入CSS會(huì)導(dǎo)致頁(yè)面全空，直到CSS加載后才顯示。CSS文件應(yīng)該放在HTML文檔的head中，讓瀏覽器盡早地讀取他們。

將JS在HTML文件底部引入

瀏覽器會(huì)先檢索、解析和執(zhí)行加載的腳本，然后渲染剩余的頁(yè)面內(nèi)容，以防腳本創(chuàng)建新元素。腳本在底部后，瀏覽器可以一直渲染頁(yè)面直到腳本加載完全，以便用戶盡快加載頁(yè)面顯示出來(lái)。

避免HTML中腳本標(biāo)簽

不同于引入腳本，腳本標(biāo)簽需要瀏覽器停止渲染（處理腳本），阻礙后續(xù)資源文件的分析和下載。這導(dǎo)致頁(yè)面初始加載減慢，甚至留下可怕的“空白頁(yè)”體驗(yàn)。而且腳本分散在內(nèi)聯(lián)標(biāo)簽里很難維護(hù)。

不要在HTML元素中使用內(nèi)聯(lián)腳本事件

例如<button onclick="validate()">Validate</button>。這種做法違反了標(biāo)簽、表示和行為之間的清爽原則。而且，如果相關(guān)的腳本實(shí)在文檔底部加載，用戶可能先點(diǎn)擊了頁(yè)面觸發(fā)事件從而嘗試調(diào)用腳本程序，但是其實(shí)腳本還沒(méi)加載——引發(fā)錯(cuò)誤！

CSS

熟悉和使用CSS級(jí)聯(lián)規(guī)則

簡(jiǎn)單的id和class選擇器是好用的，但是這也意味著標(biāo)簽混亂，到處是無(wú)法重用的的id和class。應(yīng)該用標(biāo)簽，子元素標(biāo)簽，同列標(biāo)簽和，小部分的id和class標(biāo)簽組合，使css更簡(jiǎn)單和通用。避免使用“!imporant”。

面向未來(lái)的使用前綴特定屬性

新草案制定時(shí)，一些瀏覽器廠商會(huì)通過(guò)添加前綴以實(shí)現(xiàn)可能支持的標(biāo)準(zhǔn)。為了確保CSS標(biāo)簽以后可用，帶前綴的和標(biāo)準(zhǔn)的屬性名稱都用上最好。這篇文章還提供了一個(gè)JavaScript解決方法。

用優(yōu)雅的CSS處理兼容性，而不是hack

CSS hack隨著瀏覽器的更新，顯得不可靠。解決方法是為html或body標(biāo)簽添加特定瀏覽器的class，并在css規(guī)則中使用。條件注釋也可以在特定瀏覽器版本時(shí)使用需要的CSS文件。

JavaScript

總是將功能探測(cè)優(yōu)先于瀏覽器(navigator.userAgent)探測(cè)

判斷是否存在一個(gè)特定功能（或錯(cuò)誤）時(shí)，'userAgent'字符串是一個(gè)糟糕的指標(biāo)。更嚴(yán)重的是，解析userAgent的代碼是錯(cuò)誤的。例如，一個(gè)瀏覽器探測(cè)庫(kù)期待主版本號(hào)是一個(gè)一位數(shù)字，所以會(huì)把Firefox 15報(bào)告為Firefox 1，把IE 10報(bào)告為IE 1！更可靠的是直接探測(cè)功能或問(wèn)題，并用它作為代碼分支決策的標(biāo)準(zhǔn)。我們推薦Modernizr，它是實(shí)現(xiàn)功能探測(cè)的最簡(jiǎn)單方法。

盡可能在Ready后立刻執(zhí)行腳本

技術(shù)上如jQuery的$(document).ready()使腳本在HTML頁(yè)面加載完后立即執(zhí)行，也是腳本可以安全執(zhí)行的最早時(shí)刻。然而復(fù)雜的腳本會(huì)讓頁(yè)面顯得遲緩，并阻止用戶立刻操作頁(yè)面。所以，一些比如tooltip（提示框）,dialog（對(duì)話框）在需要顯示時(shí)初始化，不造成頁(yè)面卡頓。

如果Ajax關(guān)系用戶交互，越早請(qǐng)求越好

Ajax請(qǐng)求會(huì)花費(fèi)很長(zhǎng)時(shí)間，而且不需要等待HTML頁(yè)面渲染就可以發(fā)起請(qǐng)求。所以，把$(document).ready()放在Ajax請(qǐng)求完成回調(diào)函數(shù)中更好。

延遲加載非必要的腳本（如Facebook Like，Google +1，Twitter）

所有人都希望他們的網(wǎng)頁(yè)在社交網(wǎng)絡(luò)上流行，但是社交網(wǎng)絡(luò)的腳本往往很大，可能會(huì)引起用戶響應(yīng)遲緩。在請(qǐng)求這些腳本前等待頁(yè)面加載完畢，可以使頁(yè)面響應(yīng)更快。更妙的是，重新考慮這些按鈕是否有必要，以及它們是否改善了你的頁(yè)面整體體驗(yàn)。

 

原文地址：modern.IE
譯者：開源中國(guó)：傅小黑、super05550、Lax（小編找不到兩位童鞋的微博，親看到了可私信 → 承遠(yuǎn)Rotel，將修改艾特，見(jiàn)諒 ?: ?）

================關(guān)于優(yōu)設(shè)網(wǎng)================
“優(yōu)設(shè)網(wǎng)uisdc.com“是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)講座：每月邀請(qǐng)國(guó)內(nèi)互聯(lián)網(wǎng)公司設(shè)計(jì)前輩及行業(yè)總監(jiān)在群內(nèi)及YY語(yǔ)音（YY頻道：15335158）分享實(shí)戰(zhàn)經(jīng)驗(yàn)。
設(shè)計(jì)微博：擁有粉絲量41萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì)?，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的”福利”嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：

推薦！構(gòu)建現(xiàn)代化網(wǎng)站的20個(gè)實(shí)用技巧
 

程遠(yuǎn)鐵粉

文章 6813 人氣 30960.8w

優(yōu)設(shè) 內(nèi)容總監(jiān)
收藏
點(diǎn)贊

復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng)，未經(jīng)允許不得轉(zhuǎn)載。

繼續(xù)閱讀本文相關(guān)話題

文章目錄