關於HTML5 boilerplate 的一些筆記

最近在研究HTML5 boilerplate的模版，以此爲線索能夠有條理地學習一些前端的best practice，好過在W3C的文檔汪洋裏大海撈針……啊哈哈哈……

開頭的IE探測與no-js類是什麼？

Modernizer探測到瀏覽器啓用了js的時候會將.no-js替換成.js，這樣在CSS裏能夠爲禁用js或者啓用js的瀏覽器添加額外的規則，像這樣

.no-js xx {
    /* Some CSS code for browsers with js disabled */
}

算是對沒有if-else的CSS的一種workaround。其餘lt-ie*的類也是同理。

參見： What is the purpose of the HTML 「no-js」 class?

<meta http-equiv="X-UA-Compatible" content="IE=edge">

用於讓IE使用可用的最高版本的模式，e.g. IE8用IE8模式，IE9用IE9模式。 參見What's the difference if <meta http-equiv="X-UA-Compatible" content="IE=edge"> exists or not?

舊版的HTML5 boilerplate還帶了chrome=1這個值，是爲了讓有Google Chrome Frame這個插件的IE能夠用上chrome的特性和JS引擎，可是這個插件已經退役了，因此新版的HTML5 boilerplate也去掉了這個值。

注意這段代碼過不了W3C提供的validation，固然也能夠義正詞嚴地無視它啊哈哈哈。若是實在是很在乎，能夠用.htaccess，參考這個討論，或者直接在服務器代碼裏發送這個header（好比端口不是80又想兼容IE的）。

關於favicon

爲iOS從safari放置到桌面的web app設置圖標：Configuring Web Applications

關於favicon，通常最好用ico（一些舊版的瀏覽器不支持png= =），還有一些逗比瀏覽器（e.g.360）只肯使用網站根目錄下的favicon.ico（連端口都不能有），這些點要注意。

參考：

• Adding a favicon to a static HTML page
• [架站] 為什麼網站的根目錄最好有 favicon.ico 和 robots.txt 存在？

charset放在哪裏

爲了防止被利用不正確的編碼進行攻擊（好比IE會猜到用utf-7），必定要聲明charset，並且要放在HTML文件的前1024byte（參考HTML5標準），最好放在title的前面（參考Google Dcotype）

viewport

width=device-width, initial-scale=1通常會在移動端瀏覽器下取得比較好的效果（尤爲是在有響應式設計的時候。不設的話一般移動端的瀏覽器會按電腦屏幕的尺寸繪圖，一打開網頁長得跟個PC版的略縮圖同樣……）

這個入門slides蠻好的

normalize.css

注意如今維護的normalize.cssv3對IE只支持到IE8，IE6~7須要已經再也不維護的normalize.cssv1（不過想用HTML5的就不會考慮照顧這些低版本IE了吧2333）

源代碼的註釋也是學習各瀏覽器兼容性的好材料。

main.css

裏面自帶了一大堆helper class以及一些opinionated的默認值（e.g.默認文本顏色設爲#222而不是比較刺眼的純黑），另外設置了一堆打印格式和用於設置隱藏的樣式。

modernizr

頗有名的處理瀏覽器新特性兼容性的JS庫，略複雜，參考官網便可

plugins.js

用來放各類插件（包括jQuery插件）。裏面有一段代碼是用來防止一些逗比瀏覽器沒有console致使報錯的，運行完後這類瀏覽器會多出一個windows.console，裏面的各類各樣的方法（e.g. window.console.log）都是空函數，這樣被調用不會有任何效果可是也不會報錯。

追記： 昨晚剛看到這個，今天就遇到了…………沒按F12前的IE9就是沒有console的。若是遇到IE裏javascript失效，按了F12以後又生效，就能夠刪掉使用console的地方或者將這段代碼放到開頭的js裏。（固然更好的作法就是用工具清理一遍代碼後再用於測試233）

怎樣同時使用HTML5 boilerplate與bootstrap

使用Initializr便可

參考：Is Bootstrap a complement or an alternative to HTML5 Boilerplate or viceversa?

引用外站文件的時候爲何用//作協議

爲了讓瀏覽器對不一樣的協議（https/http）載入不一樣的文件，這樣不會有煩人的提示跑出來，參考The Protocol-relative URL

WebpageTest

在挖官方文檔和相關連接的時候偶然發現了這個好東西：WebpageTest，能夠檢測不一樣地點裏多種瀏覽器（包括部分移動端瀏覽器）下頁面載入的性能與網絡IO，這樣就能夠爲一些沒有開發者工具的瀏覽器作profiling啦~

Google Doctype

一些web開發小知識的集合，原來的地址已經掛了，不過在google code上存着鏡像：Google Doctype的鏡像