關於CSS Reset 那些事（一）之 歷史演變與Normalize.css

前言

近期在翻閱陳舊的歷史資料，整理以前飽受爭議的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根據自身須要對於一些標籤進行了簡單的重置，源碼以下：

/* 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的行列的大牛愈來愈多，好比業界領袖 YUI團隊 以及Eric Meyer把這份代碼內容變的更加充實，可是不難發現代碼的核心部分仍是對樣式進行重置，在此能夠結論出早期的CSS Reset的做用就是清除全部瀏覽器默認樣式，讓它一切歸零！

* { margin:0; padding:0 }

不過在此以後一段時間內，有人開始批判這種暴力清零的CSS Reset方式，隨後部分前端開發者們也傳來一些爭議聲音，好比：

1. *{ margin:0; padding:0; }會帶來性能問題
2. 使用通配符存在隱性問題
3. 過渡的標籤重置等於多此一舉
4. 過渡的標籤重置致使語言元素失效

注：因爲都是一些陳舊的老問題，就不提供出處了，再此不過多討論，感興趣Google~

No CSS Reset 思想

其實面對於爭議問題，國外的大牛Jonathan Snook是第一個提出No CSS Reset思想，其核心是Less is more，少便是多，再也不提倡使用暴力歸零的方法。

後來玉伯也在《Reset CSS研究》文章中闡述說明，其實 Eric Meyer 並不指望你們下載他的 CSS Reset 後直接就拿去用，而是應該按照本身的需求，適量裁剪和修改後再進行使用。

後來YUI更新了CSS Reset，還配套了 cssfonts.css 和 cssbase.css。cssreset.css只負責清除默認樣式,而cssfonts.css和 cssbase.css 則負責將一些元素的默認樣式再重設回來，這樣就消除了以前的爭議，這一方案迅速被你們接受了，又開始愉快的拷貝使用起來。

YUI 提供的cssfonts.css

/*
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.css 和 cssbase.css 只考慮了西歐文字，對漢字的支持卻很少，這就致使中國不少用戶只使用了cssreset.css，而沒有使用其餘兩個。

聽說nake和adiaos兩大運動品牌到天朝後，有些運動科技會縮水，可是萬萬沒想到，萬能的代碼到了天朝也是會縮水的。

因而乎，有些大牛不甘心，不只僅厭倦了國內抄來抄去的CSS Reset現狀，也受夠了YUI只考慮西歐洲字體，不考慮漢字的缺陷，大廠們就開始摸索制定屬於本身的CSS Reset，好比2009年阿里Kissy框架 (源碼鏈接已失效，主頁留記念) 的第一份CSS Reset：

/* 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 是同樣的：請根據具體需求，適量裁剪和修改後再使用。

替代品 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第五條優點是說提供了詳細的文檔，可是它並無提供對應的中文版本，首先英文註釋看起來不夠清晰，其次對問題的解析程度也不夠細化，並且也不包含問題案例，因此接下來一章會對Normalize.css源碼進行模塊解讀與翻譯整理。