Normalize.css介紹，作用，使用方法，normalize.css

Normalize.css介紹，作用，使用方法，normalize.css

介紹

 

 Normalize.css 是一個很小的CSS檔案（V5.0.0版本大小8KB），但它在預設的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比於傳統的CSS reset，Normalize.css是一種現代的、為HTML5準備的優質替代方案。

• Normalize.css 項目地址
• Normalize.css 在GitHub上的源碼
• 從Bootstrap 2開始被用於重設樣式

 

作用&優點

 

• 保留有用的瀏覽器預設樣式而不是像一些初始化代碼一樣刪除它們
• 正常化大部分HTML元素
• 更正瀏覽器自身的bug並保證各瀏覽器的一致性
• 用一些小技巧最佳化CSS可用性
• 用注釋和詳細的文檔來解釋代碼

 

Normalize.css VS 傳統初始化代碼（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中有進一步的說明。這意味著你可以找到每一行代碼具體完成了什麼工作、為什麼要寫這句代碼、瀏覽器之間的差異，並且你可以更容易地進行自己的測試。

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

 

支援的瀏覽器

 

• Chrome (last two)
• Edge (last two)
• Firefox (last two)
• Firefox ESR
• Internet Explorer 8+
• Opera (last two)
• Safari 6+

Normalize.css v1 提供一些舊版瀏覽器支援 (IE 6+, Safari 4+), 但是已經不再積極開發了。

 

用法

 

 從下載Normalize.css，或者使用CDN，直接link到html文檔中 或者 import到html文檔/css文檔中，

1.將normalize.css作為自己項目的基礎CSS，自訂樣式值以滿足設計師的需求。

2.引入normalize.css源碼並在此基礎上構建，在必要的時候將Normalize.css引入的位置放在自己寫的css檔案前面覆蓋預設值。

 

總結

 

引用知乎gNahZ tuNlAw的一個回答就是：

CSS Reset 是革命黨，CSS Reset 裡最激進那一派提倡不管你小子有用沒用，通通給我脫了那身衣服，憑什麼你 body 出生就穿一圈 margin，憑什麼你姓 h 的比別人吃得胖，憑什麼你 ul 戴一胳膊珠子。於是 *{margin:0;} 等等運動，把人家全拍扁了。看似是眾生平等了，實則是浪費了資源又占不到便宜，有求於人家的時候還得賤賤地給加回去，實在需要人家的預設樣式了怎麼辦？人家鍋都扔爐子裡燒了，自己看著辦吧。
Normalize.css 是改良派。他們提倡，各個元素都有其存在的道理，簡單粗暴地一視同仁是不好的。body 那一圈確實擠壓了頁面的生存空間，那就改掉。士農工商，誰有誰的作用，給他們制定個規範，確保他們在任何瀏覽器裡都幹好自己的活兒。

作者：gNahZ tuNlAw
連結：https://www.zhihu.com/question/20094066/answer/25004727
來源：知乎
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。

 

v5.0.0 源碼解讀

 

見Nirvana-zsy的另一篇部落格