Normalize.css只是一個(gè)很小的css文件，但它在默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性叠纷。相比于傳統(tǒng)的css reset刻帚，Normalize.css是一種現(xiàn)代的，為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案涩嚣。Normalize.css現(xiàn)在已經(jīng)被用于Twitter Bootstrap崇众，HTML5 Boilerplate，GOV.UK缓艳，Rdio，CSS Tricks以及許許多多其他的框架看峻，工具和網(wǎng)站上阶淘。

綜述

Normalize.css是一種CSS reset的替代方案。經(jīng)過(guò)@necolas和@jon neal花了幾百個(gè)小時(shí)來(lái)努力研究不同瀏覽器的默認(rèn)樣式的差異互妓，這個(gè)項(xiàng)目終于變成了現(xiàn)在這樣溪窒。

我們創(chuàng)造normalize.css有下幾個(gè)目的：

保護(hù)有用的瀏覽器默認(rèn)樣式而不是完全去掉它們

一般化的樣式：為大部分HTML元素提供

修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性

優(yōu)化CSS可用性：用一些小技巧

解釋代碼：用注釋和詳細(xì)的文檔來(lái)

Normalize.css支持包括手機(jī)瀏覽器在內(nèi)的超多瀏覽器，同時(shí)對(duì)HTML元素冯勉，排版澈蚌，列表，嵌入的內(nèi)容灼狰，表單和表格都進(jìn)行了一般化宛瞄。盡管這個(gè)項(xiàng)目進(jìn)行了一般化的原則，但我們還是在合適的地方使用了更實(shí)用的默認(rèn)值交胚。

Normalize vs Reset

知道Normalize.css和傳統(tǒng)的區(qū)別是非常有價(jià)值的份汗。

1.Normalize.css保護(hù)了有價(jià)值的默認(rèn)值

Reset通過(guò)為幾乎所有的元素施加默認(rèn)樣式盈电，強(qiáng)行使得元素有相同的視覺(jué)效果。相比之下杯活，Normalize.css保持了許多默認(rèn)的瀏覽器樣式匆帚。這就意味著你不用再為所有的公共排版元素重新設(shè)置樣式。當(dāng)一個(gè)元素在不同的瀏覽器中有不同的默認(rèn)值時(shí)旁钧，Normalize.css會(huì)力求讓這些樣式保持一致并可能與現(xiàn)代標(biāo)準(zhǔn)相符合吸重。

2.Normalize.css修復(fù)了瀏覽器的bug

它修復(fù)了常見(jiàn)的桌面段和移動(dòng)端瀏覽器的bug。這往往超出了Reset所能做到的范疇歪今。關(guān)于這一點(diǎn)嚎幸，Normalize.css修復(fù)的問(wèn)題包含了HTML5元素的顯示設(shè)置，與格式化文字的font-size問(wèn)題彤委，在IE９中SVG的溢出鞭铆，許多出現(xiàn)在各瀏覽器和操作系統(tǒng)中的與表單相關(guān)的bug。

可以看看以下的這個(gè)例子焦影，看看對(duì)于HTML5中新出現(xiàn)的input類型search,Normalize.css是如何保證跨瀏覽器的一致性的车遂。

/** *1.Addresses appearance set to searchfield in ss,Chrome *2Addresses box-size set to border-box in ss,Chrome(include -moz to future-proof) */ input[type="search"]{ -weblit-appearance:textfield;/* 1 */ -moz-box-sizing:content-box; -webkit-box-sizing:content-box;/* 2 */ box-sizing:content-box; } /** *Removes inner padding and search candle button in ss,Chrome on OS X */ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-candle-button{ -webkit-apprance:none; }

3.Normalize.css不會(huì)讓你的調(diào)試工具變得雜亂

使用Reset最讓人困擾的地方莫過(guò)于在瀏覽器調(diào)試工具中使用大段的繼承鏈。在Normalize.css中就不會(huì)有這樣的問(wèn)題斯辰，因?yàn)樵谖覀兊臏?zhǔn)則中對(duì)多選擇器的使用是非常謹(jǐn)慎的舶担，我們僅會(huì)有目的地對(duì)元素設(shè)置樣式。

4.Normalize.css是模塊化的

這個(gè)項(xiàng)目已經(jīng)被拆分為多個(gè)相關(guān)卻又獨(dú)立的部分彬呻，這使得你能夠很容易也很清楚地知道哪些元素被設(shè)置了特定的值衣陶。因此這能讓你自己選擇性地移除掉某些永遠(yuǎn)不會(huì)用到部分（比如表單的一般化）。

5.Normalize.css擁有詳細(xì)的文檔

Normalize.css的代碼基于詳細(xì)而全面的跨瀏覽器研究與測(cè)試闸氮。這個(gè)文件中擁有詳細(xì)的代碼說(shuō)明并在Github Wiki中有進(jìn)一步的說(shuō)明剪况。這意味著你可以知道到每一行代碼具體實(shí)現(xiàn)了什么工作，為什么要寫(xiě)這句代碼蒲跨，瀏覽器之間的差異译断，并且你可以更容易地實(shí)現(xiàn)地進(jìn)行自己的測(cè)試。

這個(gè)項(xiàng)目的目標(biāo)是幫助人們了解瀏覽器默認(rèn)是如何渲染元素的，同時(shí)也讓人們很容易地明白如何改進(jìn)瀏覽器渲染。

如何使用Normalize.css

首先叹螟，安裝或從Github下載Normalize.css鬓催，接下來(lái)有兩種主要途徑去使用它。

-策略一：將Normalize.css作為你自己項(xiàng)目的基礎(chǔ)CSS，自定義樣式值以滿足設(shè)計(jì)師的需求。

-策略二：引入Normalize.css源碼并在從基礎(chǔ)上構(gòu)建，在必要的時(shí)候用到你自己寫(xiě)的CSS覆蓋默認(rèn)值荤堪。

結(jié)語(yǔ)

無(wú)論是從適用范疇還是實(shí)施上，Normalize.css與Reset都有著極大的不同。嘗試一下這兩種方法并看看到底哪一種更適合你的開(kāi)發(fā)偏好是非常值得的逞力。這個(gè)項(xiàng)目在Github上以開(kāi)源的形式開(kāi)發(fā)曙寡。任何人都能夠提交問(wèn)題報(bào)告或者是提交補(bǔ)丁。整個(gè)項(xiàng)目發(fā)展的過(guò)程對(duì)所有人都是可見(jiàn)的寇荧，而每一次改動(dòng)的原因也都卸載commit信息中举庶，這些都是有跡可循的。

來(lái)源：簡(jiǎn)書(shū)

著作權(quán)歸作者所有揩抡。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)户侥，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。