Normalize.css 相比于傳統(tǒng)的 CSS reset 來說，它是一種現(xiàn)代的、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案。它使瀏覽器更佳一致的呈現(xiàn)所有元素，并且符合現(xiàn)代標(biāo)準(zhǔn)，它只針對那些需要規(guī)范化的樣式。它非常非常的輕量級，以至于源代碼也只有 6KB 左右?，F(xiàn)在已經(jīng)被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及許許多多其他框架、工具和網(wǎng)站上。
概述
Normalize.css 是一個(gè) CSS resets 代替方案。經(jīng)過 @necolas 和 @jon neal 花了幾百個(gè)小時(shí)來努力研究不同瀏覽器的默認(rèn)樣式的差異，這個(gè)項(xiàng)目終于變成了現(xiàn)在這樣。
Normalize.css 的目標(biāo)：
- 保護(hù)有用的瀏覽器默認(rèn)樣式而不是去掉它們；
- 正?；瘶邮?/strong>來服務(wù)于更多的 HTML 元素；
- 修復(fù)瀏覽器的 Bug并確保瀏覽器的一致性；
- 優(yōu)化可用性通過細(xì)微的改進(jìn)；
- 解釋代碼通過注釋和詳細(xì)的文檔；
它支持大部分瀏覽器（包括移動端瀏覽器），包括規(guī)范了 HTML5 元素、排版、列表、嵌入內(nèi)容、表單和表格的 CSS。
盡管該項(xiàng)目基于規(guī)范化原則，但是還是在適合的地方使用了更佳實(shí)用的默認(rèn)值。
Normalize vs Reset
我們是有必要去了解更多的關(guān)于 Normalize 和傳統(tǒng)的 CSS resets 之間的區(qū)別的：
Normalize.css 保護(hù)有用的默認(rèn)值
Resets 幾乎將所有元素的默認(rèn)樣式重新設(shè)置，強(qiáng)行將默認(rèn)樣式設(shè)置了同樣的視覺效果。相比于 Normalize.css，它保留了瀏覽器的許多默認(rèn)樣式。這意味著你不必為所有常見的排版元素重新聲明樣式。
當(dāng) HTML 元素在不同的瀏覽器中有不同的默認(rèn)樣式時(shí)，Normalize.css 的目的在于讓這些樣式更佳的一致并符合現(xiàn)代瀏覽器的標(biāo)準(zhǔn)。
Normalize.css 修復(fù)了瀏覽器的 Bug
它解決了桌面和移動端瀏覽器的常見 bug，當(dāng)然這些 bug 超出了 Resets 的范圍。這些 bug 包括 HTML5 元素的顯示設(shè)置、預(yù)格式化文本的字體大小、IE9 中 SVG 的溢出以及瀏覽器和操作系統(tǒng)中眾多表單相關(guān)的 bug。
例如，下面是 Normalize.css 修復(fù)了 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 通常錯誤的將所有瀏覽器都一致的設(shè)置元素的呈現(xiàn)方式。特別是對于表單來說，Normalize.css 會提供更佳重要的幫助。
Normalize.css 不會讓你的調(diào)試工具雜亂無章
使用 Reset 時(shí)，最大的災(zāi)難是在瀏覽器 CSS 調(diào)試工具中使用大段的繼承鏈。
在 Normalize.css 中不會存在這樣的問題，因?yàn)樵谖覀兊臏?zhǔn)則中對多選擇器的使用是非常謹(jǐn)慎的，我們只會有目的地對元素設(shè)置樣式。
Normalize.css 是模塊化的
這個(gè)項(xiàng)目已經(jīng)拆分成多個(gè)相對獨(dú)立的部分，讓你更佳容易的區(qū)分哪些元素設(shè)置了特定的樣式。此外，它可以讓你去除你不需要的部分（例如，表單模塊）。
Normalize.css 擁有豐富的文檔
Normalize.css 的代碼是基于跨瀏覽器的設(shè)計(jì)和系統(tǒng)性的測試。它在 Github Wiki 上有詳細(xì)的文檔和說明。這意味著你可以知道每一行代碼的意義：為什么有這些代碼、瀏覽器之間的不同并且可以簡單的運(yùn)行在自己的測試中。
這個(gè)項(xiàng)目旨在幫助人們了解瀏覽器如何在默認(rèn)情況下渲染元素，并且使得它們更佳容易參與和改進(jìn)。
如何使用
首先，安裝或者從 GitHub 中下載 Normalize.css，接下來有兩種途徑來使用它：
- 用 Normalize.css 當(dāng)作你自己的基礎(chǔ)樣式，自定義樣式值來符合設(shè)計(jì)師的標(biāo)準(zhǔn)；
- 引入 Normalize.css 源碼并從基礎(chǔ)上開始構(gòu)建，有必要時(shí)需要用到你自己的 CSS 覆蓋默認(rèn)值。
結(jié)束語
Normalize.css 在適用范圍上與 CSS reset 上有很大的不同之處。我們值得嘗試一下，看看它是否符合你的開發(fā)方式和偏好。
〖堅(jiān)強(qiáng)的一俢〗
