為什麼需要Reset CSS

這其實是有一些歷史的，在W3C制定規格的時候，事實上並沒有規定每一家的瀏覽器如何去實作樣式，好幾年前是IE一統天下的時代，因此這個課題在當時是沒有任何理由去探討的。而如今各家瀏覽器紛紛出來搶市場，網頁在每個瀏覽器上都會有差異, 相容性等問題，很誇張的是IE6~IE11的預設都是不一樣的呀，因此CSS Reset的需求也不斷增加。

預設CSS

CSS本身就有預設值，但是事實上預設值時常在排版的時候帶來很大的不便，尤其各家的瀏覽器又有各自的預設值，使開發者需要花一些時間成本去針對各瀏覽器的CSS去做調整，使得Reset CSS開始熱門。

未使用Reset CSS

在還沒聽過Reset CSS這個東西之前，相信大家都看過下面這個東西：

1
* {}

這個選取器可以選取網頁上面所有的標籤，因此在效能上也是可以想像的。
在這個效能隨時會影響SEO的時代，CSS渲染的速度也是不能小看的。

使用Reset CSS

Eric A. Meyer針對CSS時常發生的問題，寫成了一個Reset CSS。
例如：大家很討厭的margin歸0，還有其他間距, 行高……
只要掛上去，全部的樣式都統一啦～

讓我們來看看原始碼：

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
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
 
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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

大大真的是太貼心啦～程式碼不短不長，卻解決了大家一直以來困擾的問題了！
下載點我
網址

其他Reset CSS

CSS Reset - YUI Library - Yahoo UI Library
HTML5 Reset Stylesheet - HTML5 Doctor

Reset CSS的有缺點

有優點，當然也有缺點啦！因為每次都要重新設定，因此很不彈性，打開Development Tools後，還會看到一大坨的inheritance chain。
因此之後就有Normalize CSS了。

Normalize CSS

Normalize.css在頁面點出了幾點作為主要目標：

  • 保留原有預設而非刪除 - Preserve useful browser defaults rather than erasing them.
  • 一般化HTML樣式 - Normalize styles for a wide range of HTML elements.
  • 修正網頁的Bugs - Correct bugs and common browser inconsistencies.
  • 提升可用性 - Improve usability with subtle improvements.
  • 詳細的文件 - Explain the code using comments and detailed documentation.

真的要說最大的特點就是，在保留預設HTML的樣式的情況下，針對不同瀏覽器與各版本之間不相容的Tag進行微調。
更多的內容請參考文件。

多少人使用

有份問卷 - What CSS Reset Do You Use？針對使用比例進行統計，也意外發現有1/4左右的人不知道什麼是Reset CSS。

使用情境

任何東西沒有絕對的，因此也要看你的專案當時是遇到什麼樣的狀況而使用。
此外，其實你已經用過Normalize了，你有沒有遇過，當你import了一個Bootstrap後，發現你的網頁整個跑版之類的問題？這個就是一種Normalize。
但是通常如果是手刻的CSS，比較會用到Reset CSS。
如果是已經有在用CSS Framework，例如：Bootstrap，那當然直接用他的Normalize就行了。