HTML5 Boilerplate 這個 Project 是由一些大師們共同維護,幫助在建構網站時能快速導入一個雛型結構,通常我都不以為意的直接就拿來用,但其實裡面有些寫法看到心理都會問,為什麼要這樣子~
我對 HTML 的 Html 與 Head tag 部分有一些疑問,在看過了 Documentation,就瞭解他為何要這麼寫
https://github.com/h5bp/html5-boilerplate/blob/v4.0.1/index.html
上面的一段 IE 的條件式註解
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
1. 可以避免 IE 的 file blocking issue
2. 可以盡量避免寫 CSS Hack
針對 IE8 的 Style
.lt-ie8 {
....
}
針對 IE7 的 Style
.lt-ie7 {
....
}
3. no-js 為當瀏覽器是關閉 JavaScript 的時候所要設定的樣式,若有開啟 JavaScript 則 Modernizr 會將 no-js 拿掉
4. 一定要寫好編碼,<meta charset="utf-8">,避免 IE 的 XSS 攻擊
-
要在 HTML 文件的前 1024 byte,
- 要在 Title 前
5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
能告訴 IE 用最新的 Render engine 來顯示
其他的就到文件上面參考囉!
底下的連結我覺得也蠻多之前沒注意到的事情
https://github.com/h5bp/html5-boilerplate/blob/v4.0.1/doc/extend.md
全站熱搜
留言列表