關於HTML5 boilerplate 的一些筆記

標籤：des   style   blog   http   color   os   使用   io   檔案   

最近在研究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）都是空函數，這樣被調用不會有任何效果但是也不會報錯。

怎樣同時使用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的鏡像

關於HTML5 boilerplate 的一些筆記