Reset CSS 與 Normalize.css 差異

發表於 2021-08-07 分類於 CSS

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

很久很久沒有寫跟 CSS 相關的文章了，所以這一篇就稍微寫一下 Reset CSS 跟 Normalize.css 的差異。

前言

很久很久沒有寫跟 CSS 相關的文章了，所以這一篇就稍微寫一下 Reset CSS 跟 Normalize.css 的差異。

Reset CSS (meyerweb CSS)

講 Reset CSS 或許你會沒有印象，但是如果我講 meyerweb CSS 或許會比較有印象一點，那麼顧名思義這是一個重置 CSS 的 CSS 樣式表。

最知名的 Reset CSS 就是 meyerweb 的版本，那麼為什麼會需要重置 CSS 呢？最主要原因是每一個瀏覽器所使用的 HTML 預設樣式皆不同，或許你在 Firefox 上看到的 table 標籤是有線條的，但是在 Chrome 卻又是無線條的，更不用說 IE、Edge 可能 table 有 margin-top: 10px(向上推擠 10 px) 等等狀況，那麼如果我們不統一全部瀏覽器樣式的話，屆時我們在製作前端畫面時就會顯得很痛苦，而 Eric A. Meyer 也就是撰寫 Reset CSS 的作者就整理了一份 Reset CSS

/* 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 之前，也就是一開始，盡可能在執行 CSS 樣式表之前就先清空 HTML 全部樣式，注意是全部樣式。

而 Eric A. Meyer 作者自已本身也常常被各家瀏覽器的預設樣式不同所困擾，甚至特別強調過 IE 真的很雷

The maddening barrier to this is, yes, Internet Explorer.

雖然時至今日 IE 已經功成身退，而各家瀏覽器的預設樣式也越來越統一，可是還是有機會遇到不統一的問題，畢竟每一個瀏覽器更新的版本都不同，因此對於 W3C 制訂的支援程度也就會跟著不同。

而我們也可以發現 2.0 的版本最後更新於 2011 年距離至今也十年了，所以代表著 HTML5 很早就已經開始實作，但是開始大量使用也只不過是近期的事情而已。

而 Reset CSS 並沒有使用到過度難以理解的語法，主要是這些：

margin: 0; - 外邊界
padding: 0; - 內邊界
border: 0; - 線條
font-size: 100%; - 字體大小
font: inherit; - 字型風格
vertical-align: baseline; - 垂直方向
display: block; - 顯示類型
line-height: 1; - 間距
list-style: none; - 列表樣式
quotes: none; - 引號樣式
content: ''; - 內容（通常用於偽元素）
content: none; - 內容（通常用於偽元素）
border-collapse: collapse; - 邊框分開或合併的設置
border-spacing: 0; - 邊框的距離

可以看到這邊比較特別的是常用於偽元素的 content 寫了兩次，主要原因是當時的瀏覽器大多都只支援 none 的屬性，但是當時 Safari 與 Chrome 卻只支援 '' 方式，因此假使 content: none;不被支援的時候，就會改走 content: ''; 這樣才能夠確保瀏覽器樣式樣式的統一性。

Normalize.css

Normalize.css 也是一種 Reset CSS，但是它與 meyerweb CSS 最大差異在於它保留了瀏覽器預設的樣式，而它的特色有以下：

保留預設樣式(也支援 HTML5)
修正瀏覽器本身的 Bug
清楚的註解

那麼因為 Normalize.css 內容較多，因此建議直接到它的官方網站觀看。

保留預設樣式

在 meyerweb 版本我們可以看到 h1, h2, h3, h4, h5, h6, 樣式都是被清空清除的，那麼 Normalize.css 則是選擇保留這些預設樣式，這也代表著你不用針對 h1, h2, h3, h4, h5, h6, 標籤重新給予樣式。

那麼為什麼他們敢這樣子做呢？因為 Normalize.css 作者花了數百小時去了解各家瀏覽器的默認樣式差異，然後再去做調整，除非有特定瀏覽器的預設樣式改變了才會去額外調整，否則基本上會盡可能去保留原始的瀏覽器樣式，舉例來講 h1 標籤在各家瀏覽器上就有稍微不同：

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

基本上唯獨可以比較明顯的發現每一個瀏覽器的 body 間距都是不同的：

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

修正瀏覽器本身的 Bug

這一個算是滿好玩的設置，舉例來講在 iOS 和 Safari 中會有無法設置點擊的樣式問題：

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

清楚的註解

這是另一個我個人滿喜歡 Normalize.css 的地方，每一行的設置它都會清楚說明這是在做什麼，畢竟如果有寫清楚的話，我們也可以知道為什麼它這樣子做(這邊就不示範了，前面範例都有一推註解)。

而它官方 GitHub 也都有詳細的 README 可以閱讀。

至今 Normalize.css 依然有在持續依據瀏覽器版本去更新，所以許多 CSS 框架都會以 Normalize.css 作為首選，例如：最知名的 Bootstrap 就是內建使用 Normalize.css。

Normalize.css VS Reset CSS

最後應該會萌生一個想法，所以我實際上開發應該用 Reset CSS 還是 Normalize.css？

看完前面的分析之後，我們可以了解到 Reset CSS 的優缺點如下：

優點 - 所有預設樣式統一，盡可能統一所有樣式初始化
缺點 - 每一個標籤都必須重新寫樣式，你也必須先知道有哪些標籤被清空了

Normalize.css 呢？

優點 - 保留預設樣式，減少重新撰寫樣式的美送。
缺點 - 有非常低的機率發生樣式不統一，但這個機會已經很少了。

基本上我們可以知道 Normalize.css 與 Reset CSS 各有優缺點，但是你可能會想說 Normalize.css 感覺比較好，畢竟可以不用針對每一個標籤重新寫樣式，沒有錯，這確實是一個不爭的事實。

但實際上來講，其實我自己使用 Reset 機率依然是比較高的，因為往往設計師可能所要求的樣式會與原本 Normalize.css 所提供的預設樣式不同，那麼在這種情況之下其實選擇 Reset CSS 會比較乾脆直接，除非今天設計師就直接參考 Bootstrap 來製作畫面，那麼這種時候 Normalize.css 就會變成首選。

因此你說該選擇 Reset CSS 還是 Normalize.css 呢？不，這決定權在設計師身上。

但是這邊要注意如果你使用 Reset CSS 之後若搭配一些…例如 CKEditor、TinyMCE 這種網頁編輯器來開發的話，可能會發生標題、連結與項目列表都沒有樣式的囧事，所以在選擇 CSS 樣式時，請務必多加注意這一點。

前言