Normalize.css的使用及下載

Normalize.css 只是一個很小的CSS文件，但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比於傳統的CSS reset，Normalize.css是一種現代的、爲HTML5準備的優質替代方案。Normalize.css如今已經被用於Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及許許多多其餘框架、工具和網站上。

 

 

• Normalize.css 項目地址

• Normalize.css 在GitHub上的源碼

 

Normalize.css是一種CSS reset的替代方案。通過@necolas和@jon_neal花了幾百個小時來努力研究不一樣瀏覽器的默認樣式的差別，這個項目終於變成了如今這樣。

 

Normalize.css支持包括手機瀏覽器在內的超多瀏覽器，同時對HTML5元素、排版、列表、嵌入的內容、表單和表格都進行了通常化。儘管這個項目基於通常化的原則，但咱們仍是在合適的地方使用了更實用的默認值。

 

 

Normalize vs Reset

知道Normalize.css和傳統Reset的區別是很是有價值的。

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

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

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

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

能夠看如下這個例子，看看對於HTML5中新出現的input類型search，Normalize.css是如何保證跨瀏覽器的一致性的。

/**
 * 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;}

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

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

4. Normalize.css 是模塊化的

這個項目已經被拆分爲多個相關卻又獨立的部分，這使得你可以很容易也很清楚地知道哪些元素被設置了特定的值。所以這能讓你本身選擇性地移除掉某些永遠不會用到部分（好比表單的通常化）。

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

Normalize.css的代碼基於詳細而全面的跨瀏覽器研究與測試。這個文件中擁有詳細的代碼說明並在Github Wiki中有進一步的說明。這意味着你能夠找到每一行代碼具體完成了什麼工做、爲何要寫這句代碼、瀏覽器之間的差別，而且你能夠更容易地進行本身的測試。

這個項目的目標是幫助人們瞭解瀏覽器默認是如何渲染元素的，同時也讓人們很容易地明白如何改進瀏覽器渲染。

 

如何使用 normalize.css

首先，安裝或從Github下載Normalize.css，接下來有兩種主要途徑去使用它。

• 策略一：將normalize.css做爲你本身項目的基礎CSS，自定義樣式值以知足設計師的需求。

• 策略二：引入normalize.css源碼並在此基礎上構建，在必要的時候用你本身寫的CSS覆蓋默認值。

 

結語

不管從適用範疇仍是實施上，Normalize.css與Reset都有極大的不一樣。嘗試一下這兩種方法並看看到底哪一種更適合你的開發偏好是很是值得的。這個項目在Github上以開源的形式開發。任何人都可以提交問題報告或者提交補丁。整個項目發展的過程對全部人都是可見的，而每一次改動的緣由也都寫在commit信息中，這些都是有跡可循的。

 

原文連接：http://www.colotu.com/html/gcs/24.html