Normalize.css到底有什麼用？

Normalize.css 是 * ?

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

• Normalize.css 專案位址

• #Normalize.css 在GitHub上的原始碼

#Normalize.css到底有什麼用

Normalize.css是一種CSS reset的替代方案。經過@necolas和@jon_neal花了幾百個小時來努力研究不同瀏覽器的預設樣式的差異，這個專案終於變成了現在這樣。

我們創造normalize.css有下面這幾個目的：

• #保護有用的瀏覽器預設樣式而不是完全去掉它們

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

• 修復瀏覽器本身的bug並保證各瀏覽器的一致性

• #優化CSS可用性：用一些小技巧

• 解釋程式碼：用註解和詳細的文件來

Normalize.css支援包括手機瀏覽器在內的超多瀏覽器，同時對HTML5元素、排版、清單、嵌入的內容、表單和表格都進行了一般化。儘管這個項目是基於一般化的原則，但我們還是在合適的地方使用了更實用的預設值。

如何使用 normalize.css

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

• 策略一：將normalize.css作為你自己專案的基礎CSS，自訂樣式值以滿足設計師的需求。

• 策略二：引入normalize.css原始碼並在此基礎上構建，在必要的時候用你自己寫的CSS覆蓋預設值。

# 問題： 那我同時link兩個css的話，會不會有衝突？

詳細說：我使用Normalize.css是為了像你所說的對幾乎所有的預設樣式進行重置，讓所有的瀏覽器上對於未定義的樣式瀏覽效果達到一致，那我再link我自己的style.css是不是也可以在他的基礎上達到我的效果？

回答：把Normalize.css裡面的所有內容放在自己的style.css的最上面，那樣如果有衝突的話，寫在後面的CSS設定預設是會覆蓋掉寫在前面的

normalize.css實實在在的價值優點

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与Reset都有极大的不同。尝试一下这两种方法并看看到底哪种更适合你的开发偏好是非常值得的。这个项目在Github上以开源的形式开发。任何人都能够提交问题报告或者提交补丁。整个项目发展的过程对所有人都是可见的，而每一次改动的原因也都写在commit信息中，这些都是有迹可循的。

以上是Normalize.css到底有什麼用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！