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

 

arrow
arrow
    全站熱搜

    zack9433 發表在 痞客邦 留言(1) 人氣()