正文
Normalize.css 介绍与源码解读
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
开始
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中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。 这个项目的目标是帮助人们了解浏览器默认是如何渲染元素的，同时也让人们很容易地明白如何改进浏览器渲染。
源码解读
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，一般项目中都会重置此样式。
