iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 21
11

為什麼會想介紹 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

下面以 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 BootstrapHTML5 BoilerplateGOV.UKRdioCSS 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


上一篇
Day20:小事之 CSS 權重 (css specificity)
下一篇
Day22:小事之 Media Query
系列文
前端路上那些重要與不重要的小事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

8
Kuro Hsu
iT邦新手 1 級 ‧ 2018-01-09 12:29:40

問題來了,什麼時候會用 reset, 什麼時候會用 normalize 呢?

在「大部分」的情況下我會選用 reset,尤其在專案團隊有配置視覺設計師的時候,設計師針對畫面樣式的規定不一定會與瀏覽器的預設相符。

然而有個場景是非得用 normalize 來處理的,就是那個區塊得用 rich-text editor (如 ckeditor等) 上稿的時候,如果沒有透過 normalize 來還原預設狀態,上稿人員可是會跳腳的,像是 「我的標題字級不對」、「超連結怎麼沒底線」之類的問題 XD

感謝 Kuro Hsu大大分享,
我是在純手刻的時候會用 reset ,有點類似大大的『大部分情況』, 如果用了 CSS Framework 例如 Bootstrap 的時候就直接用它的 normalize 了~哈~

1
Kuro Hsu
iT邦新手 1 級 ‧ 2018-01-09 12:29:42

問題來了,什麼時候會用 reset, 什麼時候會用 normalize 呢?

在「大部分」的情況下我會選用 reset,尤其在專案團隊有配置視覺設計師的時候,設計師針對畫面樣式的規定不一定會與瀏覽器的預設相符。

然而有個場景是非得用 normalize 來處理的,就是那個區塊得用 rich-text editor (如 ckeditor等) 上稿的時候,如果沒有透過 normalize 來還原預設狀態,上稿人員可是會跳腳的,像是 「我的標題字級不對」、「超連結怎麼沒底線」之類的問題 XD

我要留言

立即登入留言