前言
近期在翻閱陳舊的歷史資料，整理之前飽受爭議的CSS Reset問題，不過好像十多年過去，現在大家統一了口徑，紛紛推薦使用Normalize.css，包括Bootstrap都進行了內建使用，可見它的認可程度之高。
由於文章涉及內容較多，會分為系列文章
第一章，
整理CSS Reset歷史的演變痕跡，從第一份CSS Reset的誕生，到提出No CSS Reset的思想，再到國產CSS Reset 1.0驕傲的誕生；最終時過境遷，CSS Reset被Normalize.css所替代;
隨後開始認識Normalize.css，瞭解它都做了那些事情，訴說與CSS Reset的區別，突出優勢，告訴你為什麼要使用它。
第二章，
由於Normalize.css只提供了英文文件，沒有提供對應的中文版本，所以從這章開始對其原始碼進行翻譯整理與解讀，本章包含 html與body，HTML5元素，連結，語義化文字標籤，內嵌元素，群組元素等內容解讀。
第三章，
繼續來介紹原始碼中的表單和表格部分，並且整理一份normalize-zh.css中文註釋的版本上傳至Github，供大家參考使用，敬請期待
CSS Reset 歷史回顧
第一份 CSS Reset
為什麼會有CSS Reset的存在呢？那是因為早期的瀏覽器支援和理解的CSS規範不同，導致瀏覽器在渲染頁面時效果不一致，出現很多相容性問題。 關於 瀏覽器的預設樣式 請點選查閱！
根據玉伯的文章中透漏，最早的一份CSS Reset來自Tantek 的undohtml.css，從URL中的日期可以看出時間是2004年，Tantek根據自身需要對於一些標籤進行了簡單的重置，原始碼如下：
|
1 2 3 4 5 6 7 8 9 |
/* undohtml.css */ /* (CC) 2004 Tantek Celik. Some Rights Reserved. */ :link,:visited { text-decoration:none } ul,ol { list-style:none } h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; } ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote, fieldset,input{ margin:0; padding:0 } a img,:link img,:visited img { border:none } address { font-style:normal } |
CSS Reset 核心程式碼與作用
隨後加入到CSS RESET的行列的大牛越來越多，比如業界領袖 YUI團隊 以及Eric Meyer把這份CSS Reset變的更加充實，但是大家不難發現程式碼的核心部分還是重置，從此可以結論出早期的CSS Reset的作用就是清除所有瀏覽器預設樣式，讓它一切歸零！
|
1 |
* { margin:0; padding:0 } |
不過在此之後一段時間，有人開始批判這種暴力清零的CSS Reset方式，隨後部分前端開發者們也傳來一些爭議聲音，比如：
*{ margin:0; padding:0; }會帶來效能問題- 使用萬用字元存在隱性問題
- 過渡的標籤重置等於畫蛇添足
- 過渡的標籤重置導致語言元素失效
注：由於都是一些陳舊的老問題，就不提供出處了，再此不過多討論，感興趣Google~
No CSS Reset 思想
Jonathan Snook是第一個提出No CSS Reset思想，其核心是Less is more，少即是多，不提倡使用暴力歸零的方法。
玉伯後來也在《Reset CSS研究》文章中闡述說明，其實 Eric Meyer 並不期望大家下載他的 CSS Reset 後直接就拿去用，而是應該按照自己的需求，適量裁剪和修改後再使用。
後來YUI更新了cssreset，還配套有 cssfonts 和 cssbase。cssreset只負責清除預設樣式,而CSS fonts 和 CSS base 則將一些元素的預設樣式重設回來，這就消除了之前的爭議，這一又迅速成為大家的通用解決方法了。
YUI 提供的cssfonts.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
/* YUI 3.18.1 (build f7e7bcb) Copyright 2014 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/ */ /** * Percents could work for IE, but for backCompat purposes, we are using keywords. * x-small is for IE6/7 quirks mode. */ body { font:13px/1.231 arial,helvetica,clean,sans-serif; *font-size:small; /* for IE */ *font:x-small; /* for IE in quirks mode */ } /** * Nudge down to get to 13px equivalent for these form elements */ select, input, button, textarea { font:99% arial,helvetica,clean,sans-serif; } /** * To help tables remember to inherit */ table { font-size:inherit; font:100%; } /** * Bump up IE to get to 13px equivalent for these fixed-width elements */ pre, code, kbd, samp, tt { font-family:monospace; *font-size:108%; line-height:100%; } /* YUI CSS Detection Stamp */ #yui3-css-stamp.cssfonts { display: none; } |
國產 CSS Reset
這是YUI最新更新的一次版本V3.18.1，但是很尷尬的發現，YUI 提供的 cssfonts 和 cssbase 只考慮了西歐文字，對漢字的支援卻不多，這就導致很多使用者只使用了cssreset，而沒有使用其他兩個。
據說nake和adiaos兩大運動品牌到天朝後，有些運動科技會縮水，但是萬萬沒想到，萬能的程式碼到了天朝也是會縮水的。 – -!
於是乎，有些大牛不甘心，不僅厭倦了國內抄來抄去的CSS Reset，也受夠了只考慮西歐洲字型，不考慮漢字的缺陷，大廠們就開始摸索制定屬於自己的CSS Reset，比如2009年阿里Kissy框架 (原始碼連線已失效，主頁留紀念) 的第一份CSS Reset：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
/* KISSY CSS Reset 理念：清除和重置是緊密不可分的 特色：1.適應中文 2.基於最新主流瀏覽器 維護：玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com) */ /* 清除內外邊距 */ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 結構元素 */ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文字格式元素 */ fieldset, lengend, button, input, textarea, /* form elements 表單元素 */ th, td { /* table elements 表格元素 */ margin: 0; padding: 0; } /* 設定預設字型 */ body, button, input, select, textarea { /* for ie */ /*font: 12px/1 Tahoma, Helvetica, Arial, "宋體", sans-serif;*/ font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字元表示，使得在任何編碼下都無問題 */ } h1 { font-size: 18px; /* 18px / 12px = 1.5 */ } h2 { font-size: 16px; } h3 { font-size: 14px; } h4, h5, h6 { font-size: 100%; } address, cite, dfn, em, var { font-style: normal; } /* 將斜體扶正 */ code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 統一等寬字型 */ small { font-size: 12px; } /* 小於 12px 的中文很難閱讀，讓 small 正常化 */ /* 重置列表元素 */ ul, ol { list-style: none; } /* 重置文字格式元素 */ a { text-decoration: none; } a:hover { text-decoration: underline; } abbr[title], acronym[title] { /* 注：1.ie6 不支援 abbr; 2.這裡用了屬性選擇符，ie6 下無效果 */ border-bottom: 1px dotted; cursor: help; } q:before, q:after { content: ''; } /* 重置表單元素 */ legend { color: #000; } /* for ie6 */ fieldset, img { border: none; } /* img 搭車：讓連結裡的 img 無邊框 */ /* 注：optgroup 無法扶正 */ button, input, select, textarea { font-size: 100%; /* 使得表單元素在 ie 下能繼承字型大小 */ } /* 重置表格元素 */ table { border-collapse: collapse; border-spacing: 0; } /* 重置 hr */ hr { border: none; height: 1px; } /* 讓非ie瀏覽器預設也顯示垂直滾動條，防止因滾動條引起的閃爍 */ html { overflow-y: scroll; } |
記得玉伯在寫完第一版本的CSS Reset後，在文章的結尾還是千叮嚀，萬囑咐說：
請記住：永遠不存在萬能解決方案，永遠沒有銀彈。
因此我的建議和 Eric 是一樣的：請根據具體需求，適量裁剪和修改後再使用。
CSS Reset 替代品 Normalize.css
我們把歷史拉回到今天，時過境遷，CSS Reset 逐漸淡出的前沿前端的視野，被取而代之就是Normalize.css，關於對CSS Reset 與 Normalize.css的區別？可以引用知乎上 張小核桃 的一個回答：
CSS Reset 是革命黨，CSS Reset 裡最激進那一派提倡不管你小子有用沒用，通通給我脫了那身衣服，憑什麼你 body 出生就穿一圈 margin，憑什麼你姓 h 的比別人吃得胖，憑什麼你 ul 戴一胳膊珠子。於是 *{margin:0;} 等等運動，把人家全拍扁了。看似是眾生平等了，實則是浪費了資源又佔不到便宜，有求於人家的時候還得賤賤地給加回去，實在需要人家的預設樣式了怎麼辦？人家鍋都扔爐子裡燒了，自己看著辦吧。
Normalize.css 是改良派。他們提倡，各個元素都有其存在的道理，簡單粗暴地一視同仁是不好的。body 那一圈確實擠壓了頁面的生存空間，那就改掉。士農工商，誰有誰的作用，給他們制定個規範，確保他們在任何瀏覽器裡都幹好自己的活兒。
下一章節會對Normalize.css進行簡單的介紹，關於兩者的差異區別可以看問答平臺的問題：
使用normalize.css遇到的問題？
Normalize.css 和 Reset CSS 有什麼本質區別沒？
Normalize.css 簡單介紹
關於對Github的介紹，這裡引用 咀嚼之味 針對 官方介紹 翻譯的的 中文版本。
簡要概述
Normalize.css 是@necolas和@jon_neal 兩位大牛花了幾百個小時來研究不同瀏覽器的預設樣式的差異而得出的結晶，感謝前輩們的貢獻。
Normalize.css 只是一個很小的CSS檔案，但它在預設的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比於傳統的CSS Reset，Normalize.css是一種現代的、為HTML5準備的優質替代方案。Normalize.css現在已經被用於Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及許許多多其他框架、工具和網站上。
目前Normalize.css 已經成為了CSS Reset的替代方案是無可爭議的事情了。國內著名的AliceUI，AmazeUI 框架都是基於或者借鑑Normalize.css進行的制定化版本。
可以從這裡下載：
Github：https://github.com/necolas/normalize.css/
做了那些事
Normalize.css做了以下幾件事：
- Preserves useful defaults, unlike many CSS resets.
保護有用的瀏覽器預設樣式而不是完全去掉它們 - Normalizes styles for a wide range of elements
一般化的樣式：為大部分HTML元素提供 - Corrects bugs and common browser inconsistencies
修復瀏覽器自身的bug並保證各瀏覽器的一致性 - Improves usability with subtle improvements
優化CSS可用性：用一些小技巧 - Explains what code does using detailed comments
解釋程式碼：用註釋和詳細的文件來
優勢對比
前面講到CSS Reset的核心作用就是清零，而且過於暴力；那麼作為後者Normalize.css，到底有什麼優勢可以完全取代前者呢？
1.Normalize.css 保護了有價值的預設值
Reset通過為幾乎所有的元素施加預設樣式，強行使得元素有相同的視覺效果。 相比之下，Normalize.css保持了許多預設的瀏覽器樣式。 這就意味著你不用再為所有公共的排版元素重新設定樣式。 當一個元素在不同的瀏覽器中有不同的預設值時，Normalize.css會力求讓這些樣式保持一致並儘可能與現代標準相符合。
2.Normalize.css 修復了瀏覽器的bug
它修復了常見的桌面端和移動端瀏覽器的bug。這往往超出了Reset所能做到的範疇。 關於這一點，Normalize.css修復的問題包含了HTML5元素的顯示設定、預格式化文字的font-size問題、在IE9中SVG的溢位、許多出現在各瀏覽器和作業系統中的與表單相關的bug。
3.Normalize.css 修復了瀏覽器的bug
使用Reset最讓人困擾的地方莫過於在瀏覽器除錯工具中大段大段的繼承鏈。在Normalize.css中就不會有這樣的問題，因為在我們的準則中對多選擇器的使用時非常謹慎的，我們僅會有目的地對目標元素設定樣式。
4.Normalize.css 是模組化的
這個專案已經被拆分為多個相關卻又獨立的部分，這使得你能夠很容易也很清楚地知道哪些元素被設定了特定的值。因此這能讓你自己選擇性地移除掉某些永遠不會用到部分（比如表單的一般化）。
5.Normalize.css 擁有詳細的文件
Normalize.css的程式碼基於詳細而全面的跨瀏覽器研究與測試。這個檔案中擁有詳細的程式碼說明並在Github Wiki中有進一步的說明。這意味著你可以找到每一行程式碼具體完成了什麼工作、為什麼要寫這句程式碼、瀏覽器之間的差異，並且你可以更容易地進行自己的測試。
這個專案的目標是幫助人們瞭解瀏覽器預設是如何渲染元素的，同時也讓人們很容易地明白如何改進瀏覽器渲染。
原始碼解析
雖然Normalize.css第五條優勢是提供了詳細的文件，但是它並沒有提供對應的中文版本，英文註釋首先看起來不夠清晰，其次對問題的解析程度也不夠細化，而且也不包含問題案例，所以接下來會分章節對模組進行原始碼解讀與整理。