Normalize.css 相比于傳統(tǒng)的 CSS reset 來說旺拉，它是一種現(xiàn)代的价说、為HTML5準備的優(yōu)質替代方案。它使瀏覽器更佳一致的呈現(xiàn)所有元素胚鸯，并且符合現(xiàn)代標準骨稿，它只針對那些需要規(guī)范化的樣式。它非常非常的輕量級姜钳，以至于源代碼也只有 6KB 左右√构冢現(xiàn)在已經(jīng)被用于Twitter Bootstrap、HTML5 Boilerplate哥桥、GOV.UK辙浑、Rdio、CSS Tricks 以及許許多多其他框架拟糕、工具和網(wǎng)站上判呕。
概述
Normalize.css 是一個 CSS resets 代替方案倦踢。經(jīng)過 @necolas 和 @jon neal 花了幾百個小時來努力研究不同瀏覽器的默認樣式的差異，這個項目終于變成了現(xiàn)在這樣侠草。
Normalize.css 的目標：
- 保護有用的瀏覽器默認樣式而不是去掉它們辱挥；
- 正常化樣式來服務于更多的 HTML 元素边涕；
- 修復瀏覽器的 Bug并確保瀏覽器的一致性般贼；
- 優(yōu)化可用性通過細微的改進；
- 解釋代碼通過注釋和詳細的文檔奥吩；
它支持大部分瀏覽器（包括移動端瀏覽器），包括規(guī)范了 HTML5 元素蕊梧、排版霞赫、列表、嵌入內容肥矢、表單和表格的 CSS端衰。
盡管該項目基于規(guī)范化原則，但是還是在適合的地方使用了更佳實用的默認值甘改。
Normalize vs Reset
我們是有必要去了解更多的關于 Normalize 和傳統(tǒng)的 CSS resets 之間的區(qū)別的：
Normalize.css 保護有用的默認值
Resets 幾乎將所有元素的默認樣式重新設置旅东，強行將默認樣式設置了同樣的視覺效果。相比于 Normalize.css十艾，它保留了瀏覽器的許多默認樣式抵代。這意味著你不必為所有常見的排版元素重新聲明樣式。
當 HTML 元素在不同的瀏覽器中有不同的默認樣式時忘嫉，Normalize.css 的目的在于讓這些樣式更佳的一致并符合現(xiàn)代瀏覽器的標準荤牍。
Normalize.css 修復了瀏覽器的 Bug
它解決了桌面和移動端瀏覽器的常見 bug，當然這些 bug 超出了 Resets 的范圍庆冕。這些 bug 包括 HTML5 元素的顯示設置康吵、預格式化文本的字體大小、IE9 中 SVG 的溢出以及瀏覽器和操作系統(tǒng)中眾多表單相關的 bug访递。
例如晦嵌，下面是 Normalize.css 修復了 HTML5 input 的 search 類型的跨瀏覽器一致性和樣式的 bug：
/**
* 1. Addresses appearance set to searchfield in S5, Chrome
* 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Removes inner padding and search cancel button in S5, Chrome on OS X
*/
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
Resets 通常錯誤的將所有瀏覽器都一致的設置元素的呈現(xiàn)方式。特別是對于表單來說拷姿，Normalize.css 會提供更佳重要的幫助惭载。
Normalize.css 不會讓你的調試工具雜亂無章
使用 Reset 時，最大的災難是在瀏覽器 CSS 調試工具中使用大段的繼承鏈响巢。
在 Normalize.css 中不會存在這樣的問題棕兼，因為在我們的準則中對多選擇器的使用是非常謹慎的，我們只會有目的地對元素設置樣式抵乓。
Normalize.css 是模塊化的
這個項目已經(jīng)拆分成多個相對獨立的部分伴挚，讓你更佳容易的區(qū)分哪些元素設置了特定的樣式靶衍。此外，它可以讓你去除你不需要的部分（例如茎芋，表單模塊）颅眶。
Normalize.css 擁有豐富的文檔
Normalize.css 的代碼是基于跨瀏覽器的設計和系統(tǒng)性的測試。它在 Github Wiki 上有詳細的文檔和說明田弥。這意味著你可以知道每一行代碼的意義：為什么有這些代碼涛酗、瀏覽器之間的不同并且可以簡單的運行在自己的測試中。
這個項目旨在幫助人們了解瀏覽器如何在默認情況下渲染元素偷厦，并且使得它們更佳容易參與和改進商叹。
如何使用
首先，安裝或者從 GitHub 中下載 Normalize.css只泼，接下來有兩種途徑來使用它：
- 用 Normalize.css 當作你自己的基礎樣式剖笙，自定義樣式值來符合設計師的標準；
- 引入 Normalize.css 源碼并從基礎上開始構建请唱，有必要時需要用到你自己的 CSS 覆蓋默認值弥咪。
結束語
Normalize.css 在適用范圍上與 CSS reset 上有很大的不同之處。我們值得嘗試一下十绑，看看它是否符合你的開發(fā)方式和偏好聚至。
〖堅強的一俢〗
