摘要：下面開(kāi)始對(duì)進(jìn)行簡(jiǎn)單的介紹，關(guān)于兩者的差異區(qū)別可以看問(wèn)答平臺(tái)使用遇到的問(wèn)題和有什么本質(zhì)區(qū)別沒(méi)簡(jiǎn)單介紹關(guān)于對(duì)的介紹，這里引用咀嚼之味針對(duì)官方介紹翻譯的的中文版本。目前已經(jīng)成為了的替代方案是無(wú)可爭(zhēng)議的事情了。

近期在翻閱陳舊的歷史資料，整理之前飽受爭(zhēng)議的CSS Reset問(wèn)題，不過(guò)好像十多年過(guò)去，現(xiàn)在大家統(tǒng)一了口徑，紛紛推薦使用Normalize.css，包括Bootstrap都進(jìn)行了內(nèi)置使用，可見(jiàn)它的認(rèn)可程度之高。

由于文章涉及內(nèi)容較多，會(huì)分為章節(jié)進(jìn)行介紹：

第一章，
整理CSS Reset歷史的演變痕跡，從第一份CSS Reset的誕生，到提出No CSS Reset的思想，再到國(guó)產(chǎn)CSS Reset 1.0版本的驕傲誕生；最終時(shí)過(guò)境遷，CSS Reset被Normalize.css所替代;
隨后開(kāi)始認(rèn)識(shí)Normalize.css，了解它都做了那些事情，訴說(shuō)與CSS Reset的區(qū)別，突出優(yōu)勢(shì)，告訴你為什么要使用它。

第二章，
由于Normalize.css只提供了英文文檔，沒(méi)有提供對(duì)應(yīng)的中文版本，所以從這章開(kāi)始對(duì)其源碼進(jìn)行翻譯整理與解讀，本章包含 html與body，HTML5元素，鏈接，語(yǔ)義化文本標(biāo)簽，內(nèi)嵌元素，群組元素等內(nèi)容解讀。

第三章，
繼續(xù)來(lái)介紹源碼中的表單和表格部分，并且整理一份normalize-zh.css中文注釋的版本上傳至Github，供大家參考使用，敬請(qǐng)期待

為什么會(huì)有CSS Reset的存在呢？那是因?yàn)樵缙诘臑g覽器支持和理解的CSS規(guī)范不同，導(dǎo)致渲染頁(yè)面時(shí)效果不一致，會(huì)出現(xiàn)很多兼容性問(wèn)題。 關(guān)于 瀏覽器的默認(rèn)樣式 請(qǐng)點(diǎn)擊查閱！

根據(jù)玉伯的文章中透漏，最早的一份CSS Reset來(lái)自Tantek 的undohtml.css，從URL中的日期可以看出時(shí)間是2004年，Tantek根據(jù)自身需要對(duì)于一些標(biāo)簽進(jìn)行了簡(jiǎn)單的重置，源碼如下：

/* 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的行列的大牛越來(lái)越多，比如業(yè)界領(lǐng)袖 YUI團(tuán)隊(duì) 以及Eric Meyer把這份代碼內(nèi)容變的更加充實(shí)，但是不難發(fā)現(xiàn)代碼的核心部分還是對(duì)樣式進(jìn)行重置，在此可以結(jié)論出早期的CSS Reset的作用就是清除所有瀏覽器默認(rèn)樣式，讓它一切歸零！

* { margin:0; padding:0 }

不過(guò)在此之后一段時(shí)間內(nèi)，有人開(kāi)始批判這種暴力清零的CSS Reset方式，隨后部分前端開(kāi)發(fā)者們也傳來(lái)一些爭(zhēng)議聲音，比如：

*{ margin:0; padding:0; }會(huì)帶來(lái)性能問(wèn)題

使用通配符存在隱性問(wèn)題

過(guò)渡的標(biāo)簽重置等于畫蛇添足

過(guò)渡的標(biāo)簽重置導(dǎo)致語(yǔ)言元素失效

注：由于都是一些陳舊的老問(wèn)題，就不提供出處了，再此不過(guò)多討論，感興趣Google~

其實(shí)面對(duì)于爭(zhēng)議問(wèn)題，國(guó)外的大牛Jonathan Snook是第一個(gè)提出No CSS Reset思想，其核心是Less is more，少即是多，不再提倡使用暴力歸零的方法。

后來(lái)玉伯也在《Reset CSS研究》文章中闡述說(shuō)明，其實(shí) Eric Meyer 并不期望大家下載他的 CSS Reset 后直接就拿去用，而是應(yīng)該按照自己的需求，適量裁剪和修改后再進(jìn)行使用。

后來(lái)YUI更新了CSS Reset，還配套了 cssfonts.css 和 cssbase.css。cssreset.css只負(fù)責(zé)清除默認(rèn)樣式,而cssfonts.css和 cssbase.css 則負(fù)責(zé)將一些元素的默認(rèn)樣式再重設(shè)回來(lái)，這樣就消除了之前的爭(zhēng)議，這一方案迅速被大家接受了，又開(kāi)始愉快的拷貝使用起來(lái)。

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; }

上面展現(xiàn)的是YUI最新版本V3.18.1，但是很尷尬的發(fā)現(xiàn)，YUI 提供的 cssfonts.css 和 cssbase.css 只考慮了西歐文字，對(duì)漢字的支持卻不多，這就導(dǎo)致中國(guó)很多用戶只使用了cssreset.css，而沒(méi)有使用其他兩個(gè)。

據(jù)說(shuō)nake和adiaos兩大運(yùn)動(dòng)品牌到天朝后，有些運(yùn)動(dòng)科技會(huì)縮水，但是萬(wàn)萬(wàn)沒(méi)想到，萬(wàn)能的代碼到了天朝也是會(huì)縮水的。

于是乎，有些大牛不甘心，不僅僅厭倦了國(guó)內(nèi)抄來(lái)抄去的CSS Reset現(xiàn)狀，也受夠了YUI只考慮西歐洲字體，不考慮漢字的缺陷，大廠們就開(kāi)始摸索制定屬于自己的CSS Reset，比如2009年阿里Kissy框架 (源碼連接已失效，主頁(yè)留紀(jì)念) 的第一份CSS Reset：

/* KISSY CSS Reset
理念：清除和重置是緊密不可分的
特色：1.適應(yīng)中文 2.基于最新主流瀏覽器
維護(hù)：玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com)
*/

/* 清除內(nèi)外邊距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 結(jié)構(gòu)元素 */
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;
}

/* 設(shè)置默認(rèn)字體 */
body,
button, input, select, textarea { /* for ie */
    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋體", sans-serif;*/
    font: 12px/1 Tahoma, Helvetica, Arial, "5b8b4f53", sans-serif; 
    /* 用 ascii 字符表示，使得在任何編碼下都無(wú)問(wèn)題 */
}

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; } /* 統(tǒng)一等寬字體 */
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 下無(wú)效果 */
 border-bottom: 1px dotted;
 cursor: help;
}

q:before, q:after { content: ""; }

/* 重置表單元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; } /* img 搭車：讓鏈接里的 img 無(wú)邊框 */
/* 注：optgroup 無(wú)法扶正 */
button, input, select, textarea {
    font-size: 100%; /* 使得表單元素在 ie 下能繼承字體大小 */
}

/* 重置表格元素 */
table {
 border-collapse: collapse;
 border-spacing: 0;
}

/* 重置 hr */
hr {
    border: none;
    height: 1px;
}
/* 讓非ie瀏覽器默認(rèn)也顯示垂直滾動(dòng)條，防止因滾動(dòng)條引起的閃爍 */
html { overflow-y: scroll; }

這應(yīng)該是國(guó)內(nèi)的第一份CSS Reset，是玉伯和另外一位前輩完成的，向他們致敬，記得玉伯在寫完第一版本后，在總結(jié)文章的結(jié)尾還是千叮嚀，萬(wàn)囑咐說(shuō)：

  
請(qǐng)記住：永遠(yuǎn)不存在萬(wàn)能解決方案，永遠(yuǎn)沒(méi)有銀彈。

      因此我的建議和 Eric 是一樣的：請(qǐng)根據(jù)具體需求，適量裁剪和修改后再使用。

再把歷史拉回到今天，時(shí)過(guò)遷境，中國(guó)的前端職位越發(fā)的火熱，開(kāi)發(fā)者們也變得更為專業(yè)，CSS Reset 泛濫使用逐漸淡出的前端的視野，被取而代之就是Normalize.css，關(guān)于對(duì)CSS Reset 與 Normalize.css的區(qū)別？可以引用知乎上 張小核桃 的一個(gè)回答：

  
CSS Reset 是革命黨，CSS Reset 里最激進(jìn)那一派提倡不管你小子有用沒(méi)用，通通給我脫了那身衣服，憑什么你 body 出生就穿一圈 margin，憑什么你姓 h 的比別人吃得胖，憑什么你 ul 戴一胳膊珠子。于是 *{margin:0;} 等等運(yùn)動(dòng)，把人家全拍扁了。看似是眾生平等了，實(shí)則是浪費(fèi)了資源又占不到便宜，有求于人家的時(shí)候還得賤賤地給加回去，實(shí)在需要人家的默認(rèn)樣式了怎么辦？人家鍋都扔爐子里燒了，自己看著辦吧。

  
Normalize.css 是改良派。他們提倡，各個(gè)元素都有其存在的道理，簡(jiǎn)單粗暴地一視同仁是不好的。body 那一圈確實(shí)擠壓了頁(yè)面的生存空間，那就改掉。士農(nóng)工商，誰(shuí)有誰(shuí)的作用，給他們制定個(gè)規(guī)范，確保他們?cè)谌魏螢g覽器里都干好自己的活兒。

下面開(kāi)始對(duì)Normalize.css進(jìn)行簡(jiǎn)單的介紹，關(guān)于兩者的差異區(qū)別可以看問(wèn)答平臺(tái)：
使用normalize.css遇到的問(wèn)題？
Normalize.css 和 Reset CSS 有什么本質(zhì)區(qū)別沒(méi)？

關(guān)于對(duì)Github的介紹，這里引用 咀嚼之味 針對(duì) 官方介紹 翻譯的的 中文版本。

Normalize.css 是@necolas和@jon_neal 兩位大牛花了幾百個(gè)小時(shí)來(lái)研究不同瀏覽器的默認(rèn)樣式的差異而得出的結(jié)晶，感謝前輩們的貢獻(xiàn)。

  
Normalize.css 只是一個(gè)很小的CSS文件，但它在默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統(tǒng)的CSS Reset，Normalize.css是一種現(xiàn)代的、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案。Normalize.css現(xiàn)在已經(jīng)被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及許許多多其他框架、工具和網(wǎng)站上。

目前Normalize.css 已經(jīng)成為了CSS Reset的替代方案是無(wú)可爭(zhēng)議的事情了。國(guó)內(nèi)著名的AliceUI，AmazeUI 框架都是基于或者借鑒Normalize.css進(jìn)行的制定化版本。

可以從這里下載：
Github：https://github.com/necolas/normalize.css/

Normalize.css做了以下幾件事：

Preserves useful defaults, unlike many CSS resets.
保護(hù)有用的瀏覽器默認(rèn)樣式而不是完全去掉它們

Normalizes styles for a wide range of elements
一般化的樣式：為大部分HTML元素提供

Corrects bugs and common browser inconsistencies
修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性

Improves usability with subtle improvements
優(yōu)化CSS可用性：用一些小技巧

Explains what code does using detailed comments
解釋代碼：用注釋和詳細(xì)的文檔來(lái)

前面講到CSS Reset的核心作用就是清零，而且過(guò)于暴力；那么作為后者Normalize.css，到底有什么優(yōu)勢(shì)可以完全取代前者呢？

1.Normalize.css 保護(hù)了有價(jià)值的默認(rèn)值
Reset通過(guò)為幾乎所有的元素施加默認(rèn)樣式，強(qiáng)行使得元素有相同的視覺(jué)效果。 相比之下，Normalize.css保持了許多默認(rèn)的瀏覽器樣式。 這就意味著你不用再為所有公共的排版元素重新設(shè)置樣式。 當(dāng)一個(gè)元素在不同的瀏覽器中有不同的默認(rèn)值時(shí)，Normalize.css會(huì)力求讓這些樣式保持一致并盡可能與現(xiàn)代標(biāo)準(zhǔn)相符合。

2.Normalize.css 修復(fù)了瀏覽器的bug
它修復(fù)了常見(jiàn)的桌面端和移動(dòng)端瀏覽器的bug。這往往超出了Reset所能做到的范疇。 關(guān)于這一點(diǎn)，Normalize.css修復(fù)的問(wèn)題包含了HTML5元素的顯示設(shè)置、預(yù)格式化文字的font-size問(wèn)題、在IE9中SVG的溢出、許多出現(xiàn)在各瀏覽器和操作系統(tǒng)中的與表單相關(guān)的bug。

3.Normalize.css 修復(fù)了瀏覽器的bug
使用Reset最讓人困擾的地方莫過(guò)于在瀏覽器調(diào)試工具中大段大段的繼承鏈。在Normalize.css中就不會(huì)有這樣的問(wèn)題，因?yàn)樵谖覀兊臏?zhǔn)則中對(duì)多選擇器的使用時(shí)非常謹(jǐn)慎的，我們僅會(huì)有目的地對(duì)目標(biāo)元素設(shè)置樣式。

4.Normalize.css 是模塊化的
這個(gè)項(xiàng)目已經(jīng)被拆分為多個(gè)相關(guān)卻又獨(dú)立的部分，這使得你能夠很容易也很清楚地知道哪些元素被設(shè)置了特定的值。因此這能讓你自己選擇性地移除掉某些永遠(yuǎn)不會(huì)用到部分（比如表單的一般化）。

5.Normalize.css 擁有詳細(xì)的文檔
Normalize.css的代碼基于詳細(xì)而全面的跨瀏覽器研究與測(cè)試。這個(gè)文件中擁有詳細(xì)的代碼說(shuō)明并在Github Wiki中有進(jìn)一步的說(shuō)明。這意味著你可以找到每一行代碼具體完成了什么工作、為什么要寫這句代碼、瀏覽器之間的差異，并且你可以更容易地進(jìn)行自己的測(cè)試。

這個(gè)項(xiàng)目的目標(biāo)是幫助人們了解瀏覽器默認(rèn)是如何渲染元素的，同時(shí)也讓人們很容易地明白如何改進(jìn)瀏覽器渲染。

雖然Normalize.css第五條優(yōu)勢(shì)是說(shuō)提供了詳細(xì)的文檔，但是它并沒(méi)有提供對(duì)應(yīng)的中文版本，首先英文注釋看起來(lái)不夠清晰，其次對(duì)問(wèn)題的解析程度也不夠細(xì)化，而且也不包含問(wèn)題案例，所以接下來(lái)一章會(huì)對(duì)Normalize.css源碼進(jìn)行模塊解讀與翻譯整理。