精品国产一区二区三区久久狼5月精品国产一区二区三区麻豆免费观看完整版 ,日韩三级免费,久久精品中文字幕电影

推薦！構建現代化網站的20個實用技巧

@傅小黑?在過去幾年中，我們與web開發者花了很多時間交流，聽得最多的一件事情就是創建一個能很好的跨越各種類型瀏覽器版本與各種設備的網站有多么難。我們為jQuery項目寫代碼的時候一直有這個問題。因此我們整理了20條編碼模式與經驗，它們是從出席無休止的會議和讀了幾百篇專稿中摘取出來的。我們希望能在你建站的時候給你節省一些時間和麻煩。

跨瀏覽器基礎

網站不需要在所有瀏覽器里渲染得一樣

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

從固體模版開始以簡化開發

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

關注穩定的標準

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

用IE兼容檢測工具幫助你的網站遷移到基于標準的代碼

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

謹慎使用polyfills和shims（模擬標準API）

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

開發時多瀏覽器測試

盡管相對以前，現代瀏覽器已經接近統一標準，但還是有不同。偶爾的多瀏覽器測試避免不會在最后一刻發現大問題——甚至已經上線了。確保查看所有瀏覽器調試器比如IE的F12 Dev Tools，檢查有沒有警告或錯誤信息。一些老瀏覽器比如IE7沒有內建調試器，可以用Firebug Lite調試。或者使用跨瀏覽器解決方案如BrowserStack。

用工具參與創建過程來檢測錯誤和縮小文件大小

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

HTML

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

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

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

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

將CSS在HTML文件頂部引入

在文檔body中引入CSS會導致頁面全空，直到CSS加載后才顯示。CSS文件應該放在HTML文檔的head中，讓瀏覽器盡早地讀取他們。

將JS在HTML文件底部引入

瀏覽器會先檢索、解析和執行加載的腳本，然后渲染剩余的頁面內容，以防腳本創建新元素。腳本在底部后，瀏覽器可以一直渲染頁面直到腳本加載完全，以便用戶盡快加載頁面顯示出來。

避免HTML中腳本標簽

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

不要在HTML元素中使用內聯腳本事件

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

CSS

熟悉和使用CSS級聯規則

簡單的id和class選擇器是好用的，但是這也意味著標簽混亂，到處是無法重用的的id和class。應該用標簽，子元素標簽，同列標簽和，小部分的id和class標簽組合，使css更簡單和通用。避免使用“!imporant”。

面向未來的使用前綴特定屬性

新草案制定時，一些瀏覽器廠商會通過添加前綴以實現可能支持的標準。為了確保CSS標簽以后可用，帶前綴的和標準的屬性名稱都用上最好。這篇文章還提供了一個JavaScript解決方法。

用優雅的CSS處理兼容性，而不是hack

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

JavaScript

總是將功能探測優先于瀏覽器(navigator.userAgent)探測

判斷是否存在一個特定功能（或錯誤）時，'userAgent'字符串是一個糟糕的指標。更嚴重的是，解析userAgent的代碼是錯誤的。例如，一個瀏覽器探測庫期待主版本號是一個一位數字，所以會把Firefox 15報告為Firefox 1，把IE 10報告為IE 1！更可靠的是直接探測功能或問題，并用它作為代碼分支決策的標準。我們推薦Modernizr，它是實現功能探測的最簡單方法。

盡可能在Ready后立刻執行腳本

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

如果Ajax關系用戶交互，越早請求越好

Ajax請求會花費很長時間，而且不需要等待HTML頁面渲染就可以發起請求。所以，把$(document).ready()放在Ajax請求完成回調函數中更好。

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

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

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

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