Normalize.css 和 Reset CSS 有什么本质区别没？

之前一直都是用 Reset CSS 来重置浏览器默认样式，最近又看到有人推荐 Normalize CSS。
我发现后者的内容比前者多很多，本人初学 CSS，文件里有些语句并不很理解，也不知道为什么要这么定义。
所以，想知道这二者主要有什么区别，使用的场景有什么不同吗？

by @necolas

The main differences are:

Normalize.css preserves useful defaults rather than "unstyling" everything. For example, elements like sup or sub "just work" after including normalize.css (and are actually made more robust) whereas they are visually indistinguishable from normal text after including reset.css. So, normalize.css does not impose a visual starting point (homogeny) upon you. This may not be to everyone's taste. The best thing to do is experiment with both and see which gels with your preferences.

Normalize.css corrects some common bugs that are out of scope for reset.css. It has a wider scope than reset.css, and also provides bug fixes for common problems like: display settings for HTML5 elements, the lack of font inheritance by form elements, correcting font-size rendering for pre, SVG overflow in IE9, and the button styling bug in iOS.

Normalize.css doesn't clutter your dev tools. A common irritation when using reset.css is the large inheritance chain that is displayed in browser CSS debugging tools. This is not such an issue with normalize.css because of the targeted stylings.

Normalize.css is more modular. The project is broken down into relatively independent sections, making it easy for you to potentially remove sections (like the form normalizations) if you know they will never be needed by your website.

Normalize.css has better documentation. The normalize.css code is documented inline as well as more comprehensively in the GitHub Wiki https://github.com/necolas/normalize.... . This means you can find out what each line of code is doing, why it was included, what the differences are between browsers, and more easily run your own tests. The project aims to help educate people on how browsers render elements by default, and make it easier for them to be involved in submitting improvements.

I've written in greater detail about this in an article about normalize.css http://nicolasgallagher.com/about-nor...

reset 的目的，是将所有的浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性。例如 yui3 reset 中的一段：

ol, ul {list-style: none}
h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal}

normalize 的理念则是尽量保留浏览器的默认样式，不进行太多的重置。

---------------

看 yui reset 和 normalize.css 的 DEMO 应该就可以很明显的看出它们理念上的不同。

YUI Reset: http://yuilibrary.com/yui/docs/cssres...
Normalize: http://necolas.github.com/normalize.c...

看了一下，我的理解是增加了CSS3的一些特征，类似于以前CSS RESET版本的CSS3版。回头我也试用看看。

开始
Normalize.css 是一个可定制的 CSS 文件，使浏览器呈现的所有元素，更一致和符合现代标准;是在现代浏览器环境下对于CSS reset的替代。它正是针对只需要统一的元素样式。该项目依赖于研究浏览器默认元素风格之间的差异，精确定位需要重置的样式。这是一个现代的，HTML5-ready 的 CSS 重置样式集。著名的bootstrap就使用了它，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. - 用注释和详细的文档来解释代码

Normalize对比Reset的优势

•    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 不会让你的调试工具变的杂乱 使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链，如下图所示。在Normalize.css中就不会有这样的问题，因为在我们的准则中对多选择器的使用时非常谨慎的，我们仅会有目的地对目标元素设置样式。
•    4. Normalize.css 是模块化的 这个项目已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分（比如表单的一般化）。
•    5. Normalize.css 拥有详细的文档 Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。 这个项目的目标是帮助人们了解浏览器默认是如何渲染元素的，同时也让人们很容易地明白如何改进浏览器渲染。

源码解读
参考了很多内容，代码可以在这里找到，以下分模块逐个分析：
HTML与BODY
html {
    font-family: sans-serif; // 1
    -ms-text-size-adjust: 100%; // 2
    -webkit-text-size-adjust: 100%; // 2
}

body {
    margin: 0;
}
设置所有的字体为sans-serif，关于text-size-adjust是这样的：iOS设备旋转后可能会自动调整字体大小（e.g. 竖着的时候是14px，横着就自动调整成20px）。将这个属性设置为100%后Safari就会不会自作主张调整大小。设置成100%和设置成none的区别是前者在防止浏览器自动插手字体大小的同时，可以让用户通过缩放控制字体大小，后者会很恼人地让用户无法放大缩小字体。 MDN的文档里有提到如果将这个属性设为none，基于webkit的电脑浏览器也会受到影响，无法放大缩小。以前有人利用这个特性来绕过电脑chrome字体大小不能小于12px的限制，但是chrome27后已经取消了对这个特性的支持。不过一般说来，还是不要设none的好，多少让用户有点自由控制的余地。具体请参考这里：text-size-adjust和一定不能設定成-webkit-text-size-adjust:none的原因，至于body的默认边距问题，在各个浏览器上也都不一致，统一设置。
HTML5 新标签的display兼容性解决
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block; // 1
  vertical-align: baseline; // 2
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}
IE8不认识HTML5的新元素 beta版的IE9认识新元素，但没有定义正确的显示 IE10/11的details 和 summary不是block-level IE11的main不是block-level Chrome, Firefox, 和Opera的progress没有以baseline垂直对齐，如果audio标签没有控制栏，则应该隐藏，有点暴力啊！hidden属性是在HTML5中新加入的属性，可能有些人觉得和规范一直倡导的样式分离有所背离，但HTML5设计的一条重要的原理就是实用性。这个属性会帮助屏幕阅读器更方便地识别。template标签用于HTML模板，现代Web开发中，HTML模板使用很多，这个标签是顺应实际需求。但模板又要求不能在界面上显示的，所以统一样式，兼容旧浏览器。关于垂直居中，可以参见 CSS vertical-align 属性和我对css-vertical-align的一些理解与认识（一）
链接修复
a {
  background-color: transparent;
}

a:active,
a:hover {
  outline: 0;
}
在IE10下，在点击超链接（active）的时候，会出现一个灰色背景，去掉。在active或hover时，把默认的outline样式去掉（针对所有浏览器）。
语义化文字标签修复
abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
    font-style: italic;
}

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

mark {
    background: #ff0;
    color: #000;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

•    abbr标签的语义是表示缩小，在标签的title属性中会添加此缩写的完整版本。此标签在FF中默认有下边框（1px dotted），在Safari和Chrome中则无此样式，此处统一设置了下边框。
•    Firefox 4+, Safari和Chrome给b和strong设置的其实是bolder而不是bold，对于一些有一整套web font的网站会落到不想要的字重。但是HTML标准里已经说了要bolder啊 而且设为bold的话是不能叠加着越来越粗的
•    dfn标签可标记那些对特殊术语或短语的定义，在Safari和Chrome里不是斜体
•    重置h1样式
•    mark标签是HTML5中的标签，IE8/9不支持，所以需要重置样式。
•    不同浏览器下的small大小不一致，这里定为80%
•    HTML标准里对small，sub和sup的大小要求都是smaller，但是normalize.css给small设的是80%，sub和sup却是75%，这里为了保持一致+不影响其他元素的行高，把两者的line-height设为0，vertical-align从baseline开始，然后用top和bottom手动设置两者偏移量。

其他标签修复
img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

•    在旧版IE浏览器中，图片默认会出现一个蓝色的外框。
•    IE 9/10/11中，SVG的hidden显示不正常
•    figure的margin在IE 8/9 and Safari不生效
•    在FF中，hr元素的默认样式很多，和其它浏览器主要的差异是设置了height为2px，box-sizing为border-box，样式中正是重置了这两个影响布局的样式。关于box-sizing请看： CSS3 Box-sizing
•    大部分浏览器的pre在overflow的时候会直接溢出去，这里加上overflow:auto让它出现滚动条

Form系
button,
input,
optgroup,
select,
textarea {
  color: inherit; // 1
  font: inherit; // 2
  margin: 0; // 3
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"], // 1
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; // 2
  cursor: pointer; // 3
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; // 1
  padding: 0; // 2
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: textfield; // 1
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; // 2
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0; // 1
  padding: 0; // 2
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

•    部分浏览器会把form里面的输入框（textarea，text，button， select）的字体设置为用户的系统字体或者是浏览器本身的字体（还有颜色），并不会继承自父元素。所以需要重置输入框的默认样式。
•    IE 8/9/10/11里的button默认的overflow是hidden，这里设为和群众一致的visible
•    可点击的按钮，设置鼠标样式为pointer，提高了可用性。 关于-webkit-appearance 参见： 使用CSS3的appearance属性改变元素的外观
•    给disabled的再补充一个cursor:default
•    移除 Firefox 4+ 内部的内边距
•    统一search类型输入框的默认样式，让search类型输入框和普通输入框样式一样。
•    fieldset元素的默认样式在各浏览器中的差异较大，尤其是IE浏览器和其它浏览器，统一一下很有必要。
•    IE里的文本框就算文本高度没有超过指定高度，都会默认加上一个没有滚动条的滚动栏，设置overflow: auto可以去掉
•    关于form的box-sizing方法的纠正，清继续参考 CSS3 Box-sizing

Table系
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}
table的默认样式很难看，大部分浏览器设置table的border-collapse为separate，border-spacing为2，一般项目中都会重置此样式。

本质区别是没有的，目的也是一样的，只是方式或方法不同而已，谁好谁坏也不是很难评论，仁者见仁智者见智

最大的区别在这里:

https://github.com/necolas/normalize....

Preserves useful defaults, unlike many CSS resets.

【热门文章】