為什麼會想介紹 CSS Reset 與 CSS normalize ？

因為在很久很久以前（喂～）。咳！重來。

在 W3C 制訂 HTML 與 CSS 規格時，並沒有強制規定各家瀏覽器應該怎樣實作每一個 HTML tag 的 CSS 預設樣式，只有提供資訊參考的範例[1]，加上IE 獨霸的時期，那時候還沒有其他瀏覽器， CSS Reset 的需求主要落在 IE 各版本之間的調整，後來 Firefox、safari、Chrome 陸續出現，網頁設計師必須要針對每個瀏覽器去做調整，因此 CSS Reset 的需求漸漸增加。

CSS-Tricks 在 2008 年就曾經做了一個調查："What CSS Reset Do You Use？"，有 27% 的人使用了 Eric Meyer 的版本 ，有趣的是那時候有 26% 的人根本不知道何謂 CSS Reset 。

（其實很好奇那時候台灣有多少人開始使用 CSS Reset 了？）

CSS Reset

有幾套常見的 CSS Reset

• Reset CSS，此為 Eric Meyer 的版本
• HTML5 Reset Stylesheet，HTML5 Doctor 網站修改自 Eric A. Meyer 的版本。
• CSS Reset - YUI Library ，由 Yahoo UI Library v3 所提供的 CSS Reset 版本。

下面以 Eric Meyer 的版本來說

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

做法是把所有瀏覽器最不一致的地方強制歸 0，可以看到最一開始那一大串 html tag 的 margin、padding、border、outline 全都設為 0

優點是統整、重置了各個瀏覽器的樣式設定。
缺點是必須全部重新做設定，比較沒有彈性，而且在使用開發者工具時會看到一大坨的繼承鏈(inheritance chain)。

因此後來出現了 normalize.css [3]

CSS Normalize

因為 reset.css 重置了各個瀏覽器的樣式設定，使得有些有用、常用標籤的默認樣式必須要重新設定，因為這個問題，有人開發出了 normalize.css [4]

在 Normalize.css 的官方頁面上點出了他們的目標：[5]

• 保留有用的瀏覽器默認設置，而不是將其刪除。
• 為廣泛的 HTML 元素提供一般化的樣式。
• 修正瀏覽器的 Bug 與不一致。
• 透過微妙的改善提高可用性。
• 有詳細的文檔來解釋代碼。(每個樣式都有註解是處理什麼問題。)

因此 Normalize.css 被使用在 Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及其他很多的 framework 和網站上。

最大的特色就是保留原本預設 HTML 標籤的樣式，僅針對不同瀏覽器與各版本間不相容的標籤進行些微調整。

目前 reset.css 與 normalize.css 都有人使用，可以針對需求擇一使用即可。

另外， reset.css 與 normalize.css 不論用哪一套，都是在一開始就要引入網頁，因為它的目的就是在一開始幫你將各瀏覽器之間的差異進行調整。

以上是今天的介紹，各位看倌明天見囉～

參考資料：
[1] https://www.w3.org/TR/CSS2/sample.html
[2] https://css-tricks.com/poll-results-what-css-reset-do-you-use/
[3] https://meyerweb.com/eric/tools/css/reset/
[4] http://necolas.github.io/normalize.css/
[5] http://nicolasgallagher.com/about-normalize-css/
[6] http://blog.darkthread.net/post-2011-07-22-css-reset.aspx
[7] https://blog.miniasp.com/post/2012/03/14/Building-Website-is-not-that-easy-DOCTYPE-and-CSS-Reset-Normalize.aspx