Normalize.css 介紹與源碼解讀

開始

Normalize.css 是一個可定制的 CSS 文件，使瀏覽器呈現的所有元素，更一致和符合現代標准;是在現代瀏覽器環境下對於CSS reset的替代。 它正是針對只需要統一的元素樣式。該項目依賴於研究瀏覽器默認元素風格之間的差異，精確定位需要重置的樣式。 這是一個現代的，HTML5-ready 的 CSS 重置樣式集。著名的bootstrap就使用了它，github的地址為：https://github.com/necolas/normalize.css/， 據作者描述，Normalize.css做了以下幾件事：

• Preserves useful defaults, unlike many CSS resets. - 保護有用的瀏覽器默認樣式而不是完全去掉它們
• Normalizes styles for a wide range of elements. - 為大部分HTML元素提供一般化的樣式
• Corrects bugs and common browser inconsistencies. - 修復瀏覽器自身的bug並保證各瀏覽器的一致性
• Improves usability with subtle improvements. - 用一些小技巧優化CSS可用性
• Explains what code does using detailed comments. - 用注釋和詳細的文檔來解釋代碼

Normalize對比Reset的優勢

• 1. Normalize.css 保護了有價值的默認值

  Reset通過為幾乎所有的元素施加默認樣式，強行使得元素有相同的視覺效果。 相比之下，Normalize.css保持了許多默認的瀏覽器樣式。 這就意味着你不用再為所有公共的排版元素重新設置樣式。 當一個元素在不同的瀏覽器中有不同的默認值時，Normalize.css會力求讓這些樣式保持一致並盡可能與現代標准相符合。

• 2. Normalize.css 修復了瀏覽器的bug

  它修復了常見的桌面端和移動端瀏覽器的bug。這往往超出了Reset所能做到的范疇。 關於這一點，Normalize.css修復的問題包含了HTML5元素的顯示設置、預格式化文字的font-size問題、在IE9中SVG的溢出、許多出現在各瀏覽器和操作系統中的與表單相關的bug。

• 3. Normalize.css 不會讓你的調試工具變的雜亂

  使用Reset最讓人困擾的地方莫過於在瀏覽器調試工具中大段大段的繼承鏈，如下圖所示。在Normalize.css中就不會有這樣的問題，因為在我們的准則中對多選擇器的使用時非常謹慎的，我們僅會有目的地對目標元素設置樣式。

• 4. Normalize.css 是模塊化的

  這個項目已經被拆分為多個相關卻又獨立的部分，這使得你能夠很容易也很清楚地知道哪些元素被設置了特定的值。因此這能讓你自己選擇性地移除掉某些永遠不會用到部分（比如表單的一般化）。

• 5. Normalize.css 擁有詳細的文檔

  Normalize.css的代碼基於詳細而全面的跨瀏覽器研究與測試。這個文件中擁有詳細的代碼說明並在Github Wiki中有進一步的說明。這意味着你可以找到每一行代碼具體完成了什么工作、為什么要寫這句代碼、瀏覽器之間的差異，並且你可以更容易地進行自己的測試。 這個項目的目標是幫助人們了解瀏覽器默認是如何渲染元素的，同時也讓人們很容易地明白如何改進瀏覽器渲染。

源碼解讀

參考了很多內容，代碼可以在這里找到，以下分模塊逐個分析：

HTML與BODY

html {
    font-family: sans-serif; // 1
    -ms-text-size-adjust: 100%; // 2
    -webkit-text-size-adjust: 100%; // 2
}

body {
    margin: 0;
}

設置所有的字體為sans-serif，關於text-size-adjust是這樣的：iOS設備旋轉后可能會自動調整字體大小（e.g. 豎着的時候是14px，橫着就自動調整成20px）。 將這個屬性設置為100%后Safari就會不會自作主張調整大小。 設置成100%和設置成none的區別是前者在防止瀏覽器自動插手字體大小的同時，可以讓用戶通過縮放控制字體大小，后者會很惱人地讓用戶無法放大縮小字體。 MDN的文檔里有提到如果將這個屬性設為none，基於webkit的電腦瀏覽器也會受到影響，無法放大縮小。 以前有人利用這個特性來繞過電腦chrome字體大小不能小於12px的限制，但是chrome27后已經取消了對這個特性的支持。 不過一般說來，還是不要設none的好，多少讓用戶有點自由控制的余地。具體請參考這里：text-size-adjust和 一定不能設定成-webkit-text-size-adjust:none的原因， 至於body的默認邊距問題，在各個瀏覽器上也都不一致，統一設置。

HTML5 新標簽的display兼容性解決

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}


audio,
canvas,
progress,
video {
  display: inline-block; // 1
  vertical-align: baseline; // 2
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

IE8不認識HTML5的新元素 beta版的IE9認識新元素，但沒有定義正確的顯示 IE10/11的details 和 summary不是block-level IE11的main不是block-level Chrome, Firefox, 和Opera的progress沒有以baseline垂直對齊，如果audio標簽沒有控制欄，則應該隱藏，有點暴力啊！hidden屬性是在HTML5中新加入的屬性，可能有些人覺得和規范一直倡導的樣式分離有所背離，但HTML5設計的一條重要的原理就是實用性。 這個屬性會幫助屏幕閱讀器更方便地識別。template標簽用於HTML模板，現代Web開發中，HTML模板使用很多，這個標簽是順應實際需求。 但模板又要求不能在界面上顯示的，所以統一樣式，兼容舊瀏覽器。關於垂直居中，可以參見 CSS vertical-align 屬性和我對css-vertical-align的一些理解與認識（一）

鏈接修復

a {
  background-color: transparent;
}

a:active,
a:hover {
  outline: 0;
}

在IE10下，在點擊超鏈接（active）的時候，會出現一個灰色背景，去掉。在active或hover時，把默認的outline樣式去掉（針對所有瀏覽器）。

語義化文字標簽修復

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
    font-style: italic;
}

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

mark {
    background: #ff0;
    color: #000;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

• abbr標簽的語義是表示縮小，在標簽的title屬性中會添加此縮寫的完整版本。此標簽在FF中默認有下邊框（1px dotted），在Safari和Chrome中則無此樣式，此處統一設置了下邊框。
• Firefox 4+, Safari和Chrome給b和strong設置的其實是bolder而不是bold，對於一些有一整套web font的網站會落到不想要的字重。但是HTML標准里已經說了要bolder啊 而且設為bold的話是不能疊加着越來越粗的
• dfn標簽可標記那些對特殊術語或短語的定義，在Safari和Chrome里不是斜體
• 重置h1樣式
• mark標簽是HTML5中的標簽，IE8/9不支持，所以需要重置樣式。
• 不同瀏覽器下的small大小不一致，這里定為80%
• HTML標准里對small，sub和sup的大小要求都是smaller，但是normalize.css給small設的是80%，sub和sup卻是75%，這里為了保持一致+不影響其他元素的行高，把兩者的line-height設為0，vertical-align從baseline開始，然后用top和bottom手動設置兩者偏移量。

其他標簽修復

 

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}


pre {
  overflow: auto;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

• 在舊版IE瀏覽器中，圖片默認會出現一個藍色的外框。
• IE 9/10/11中，SVG的hidden顯示不正常
• figure的margin在IE 8/9 and Safari不生效
• 在FF中，hr元素的默認樣式很多，和其它瀏覽器主要的差異是設置了height為2px，box-sizing為border-box，樣式中正是重置了這兩個影響布局的樣式。關於box-sizing請看： CSS3 Box-sizing
• 大部分瀏覽器的pre在overflow的時候會直接溢出去，這里加上overflow:auto讓它出現滾動條

Form系

button,
input,
optgroup,
select,
textarea {
  color: inherit; // 1
  font: inherit; // 2
  margin: 0; // 3
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"], // 1
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; // 2
  cursor: pointer; // 3
}

button[disabled],
html input[disabled] {
  cursor: default;
}
        
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; // 1
  padding: 0; // 2
}
        
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: textfield; // 1
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; // 2
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0; // 1
  padding: 0; // 2
}
        
textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

• 部分瀏覽器會把form里面的輸入框（textarea，text，button， select）的字體設置為用戶的系統字體或者是瀏覽器本身的字體（還有顏色），並不會繼承自父元素。所以需要重置輸入框的默認樣式。
• IE 8/9/10/11里的button默認的overflow是hidden，這里設為和群眾一致的visible
• 可點擊的按鈕，設置鼠標樣式為pointer，提高了可用性。 關於-webkit-appearance 參見： 使用CSS3的appearance屬性改變元素的外觀
• 給disabled的再補充一個cursor:default
• 移除 Firefox 4+ 內部的內邊距
• 統一search類型輸入框的默認樣式，讓search類型輸入框和普通輸入框樣式一樣。
• fieldset元素的默認樣式在各瀏覽器中的差異較大，尤其是IE瀏覽器和其它瀏覽器，統一一下很有必要。
• IE里的文本框就算文本高度沒有超過指定高度，都會默認加上一個沒有滾動條的滾動欄，設置overflow: auto可以去掉
• 關於form的box-sizing方法的糾正，清繼續參考 CSS3 Box-sizing

Table系

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

table的默認樣式很難看，大部分瀏覽器設置table的border-collapse為separate，border-spacing為2，一般項目中都會重置此樣式。

參考

• http://www.cnblogs.com/peak/articles/1446998.html
• http://www.dang-jian.com/?p=284
• http://www.cnblogs.com/joyeecheung/p/3941475.html
• http://devework.com/normalize-css-a-better-css-reset.html
• http://segmentfault.com/blog/jerryzou/1190000002239676
• http://www.w3cplus.com/css3/changing-appearance-of-element-with-css3.html
• http://www.w3cplus.com/content/css3-box-sizing
• https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
• http://www.document-write.com/html/xhtml-css/42.html
• http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp
• http://www.zhangxinxu.com/wordpress/2010/05/我對css-vertical-align的一些理解與認識（一）/
• http://www.zhangxinxu.com/wordpress/2010/06/css-vertical-align的深入理解（二）之text-top篇/
• http://zhidao.baidu.com/link?url=IZGJu5fhKl7_JdpHaqMx1-NzpFdHWNapNuznsIFsdXitDek5SkBQ7fIRQdTArtQAT2gH3dILC8ORphdwdPUenq