構建現(xiàn)代化網(wǎng)站的20個技巧(一)

2021-09-11 分類：網(wǎng)站建設

一.跨瀏覽器基礎

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

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

2.從固體模版開始以簡化開發(fā)

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

3.關注穩(wěn)定的標準

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

4.用IE兼容檢測工具幫助你的網(wǎng)站遷移到基于標準的代碼

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

5.謹慎使用polyfills和shims（模擬標準aPI）

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

6.開發(fā)時多瀏覽器測試

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

7.用工具參與創(chuàng)建過程來檢測錯誤和縮小文件大小

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

!二.HTML

8.總是使用標準模式避免怪癖模式

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

9.理解有限向后兼容的HTML標簽

新HTML5標簽比如

和