Normalize 源码解读

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 中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。

CSS Reset 与 Normalize.css的区别

CSS Reset 是革命党，CSS Reset 里最激进那一派提倡不管你小子有用没用，通通给我脱了那身衣服，凭什么你 body 出生就穿一圈 margin，凭什么你姓 h 的比别人吃得胖，凭什么你 ul 戴一胳膊珠子。于是 *{margin:0;} 等等运动，把人家全拍扁了。看似是众生平等了，实则是浪费了资源又占不到便宜，有求于人家的时候还得贱贱地给加回去，实在需要人家的默认样式了怎么办？人家锅都扔炉子里烧了，自己看着办吧。

Normalize.css 是改良派。他们提倡，各个元素都有其存在的道理，简单粗暴地一视同仁是不好的。body 那一圈确实挤压了页面的生存空间，那就改掉。士农工商，谁有谁的作用，给他们制定个规范，确保他们在任何浏览器里都干好自己的活儿。

Normalize 源码解读

虽然 Normalize.css 第五条优势是说提供了详细的文档，但是它并没有提供对应的中文版本，首先英文注释看起来不够清晰，其次对问题的解析程度也不够细化，而且也不包含问题案例，接下来我们对 Normalize.css 源码进行模块解读与翻译整理：

源码地址：https://github.com/necolas/normalize.css/blob/master/normalize.css
源码版本：v3.0.3

html 与 body 元素

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

1. 设置全局的字体为 sans-serif
2. 防止 iOS 横屏字号放大，同时保证在 PC 上 zoom 功能正常

第 2 个问题场景是这样，苹果 IOS 设备调整后会自动调整文字的大小，按照苹果的意图是为了提升用户体验，比如竖屏状态下是 14px，转换为横屏时就变成了 20px，把 text-size-adjust:100%; 就不会调整字体大小了。

如果把值设置为 text-size-adjust:none;，那么就会导致用户无法放大缩小字体了。

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

• 删除默认的外边距，修复浏览器默认边距，统一效果

HTML5 元素 display definitions

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

• 修复 IE 8/9 中，HTML5 新元素不能正确显示的问题，定义为 block 的元素
• 修复 IE 10/11 中，details 和 summary 定义为 block 的元素
• 修复 IE 11 中，main 定义为 block 的元素

这个问题想必大家都已经非常清楚，当低版本浏览器遇到不识别的元素时，会默认把他们当成内联元素 (inline)，这里重新定义成为 block 元素。

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

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

1. 修复 IE 8/9 中 HTML5 新元素不能正确显示的问题，定义为 inline-block 元素
2. 修复 Chrome、Firefox 和 Opera 的 progress 元素没有以 baseline 垂直对齐

progress 是 HTML5 的新标签，可以定义进度条，但是 Chrome, Firefox, 和 Opera 并没有以 baseline 垂直对齐。

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

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

• 对不支持 controls 属性的浏览器，audio 元素给以隐藏
• 移除 iOS5 设备中多余的高度

在 IE8 之前的浏览器是不支持 controls 属性，这里的办法是直接隐藏该元素

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

• 修复 IE 7/8/9、Firefox 3 和 Safari 4 中 hidden 属性不起作用的问题
• 在 IE、Safari、Firefox 22- 中隐藏 template 元素

template 标签用于 HTML 模板，大家应该都是用过 HTML 模版开发页面，这个标签是按照实际需求添加的，但是模板又不能在界面上显示，所以这里统一了样式，兼容旧浏览器。

链接 Links

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

• 去掉 IE 10+ 点击链接时的灰色背景

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */

a:active,
a:hover {
  outline: 0;
}

• 去掉点击时的 outline 焦点框，同时保证使用键盘可以显示焦点框，这个操作针对所有浏览器

语义化文本标签 Text-level semantics

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

• 修正 abbr 元素在 IE 8/9/10/11、Safari 和 Chrome 浏览器中没有下划线的问题

语义 abbr 标签是表示简称或缩写，自身的 title 属性是完整版，但是此标签在 Firefox 下默认有下边框，而其他浏览器中没有，这里统一了样式。

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

• 在 Firefox 4+、Safari 4/5 和 Chrome 中统一设置为粗体

Firefox 4+, Safari 和 Chrome 给 b 和 strong 设置的属性是 bolder，而不是 bold，这里统一了样式。

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

• 修正 Safari 5 和 Chrome 中没有样式的问题

dfn 标签可标记那些对特殊术语或短语的定义，在 Safari 和 Chrome 里不是斜体，在这里统一了样式。

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

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

• 修复 Firefox 4+、Safari 和 Chrome 中 section 和 article 内的 h1 字体大小

/**
 * Address styling not present in IE 8/9.
 */

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

• 修复 IE 8/9 中样式不呈现的问题

mark 标签用来突出显示部分文本，设置后会有一个高亮背景，但是此标签是 HTML5 中的新标签，在低版本浏览器并不识别，所以需要重置样式。

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

• 在所有浏览器中统一 small 的字体大小

small 标签在 HTML 4.01 就已经存在，HTML5 中增强了它的寓意，表示旁注信息，不过此标签在各个浏览器中呈现的字体大小不一样，在这里做了统一

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

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

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

• 防止所有浏览器中的 sub 和 sup 影响 line-height

sup 和 sub 两个标签是用来表示上标和下标，据 HTML 标准中对 small，sub 和 sup 的大小要求都是 smaller，但是如上所示 normalize.css 给 small 设的是 80%，而 sub 和 sup 却是 75%，所以为了保持一致，且不影响其他元素的行高，把两者的 line-height 设为 0px，然后设置它的垂直以 baseline 开始，设置 top 和 bottom 手动设置两者偏移量

内嵌元素 Embedded content

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

• 去除 IE 8/9/10 中 a 内部 img 元素默认的边框

在旧版本的浏览器中，图片默认会有一个奇丑无比的蓝色边框，这这里进行清除，统一样式。

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

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

• 修复 IE 9/10/11 中的 overflow 的怪异表现

群组元素 Grouping content

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

• 修复 IE 8/9、Safari 中 margin 失效
  figure 是 HTML5 的新标签，用做文档插图，但它在 IE 8/9 和 Safari 中的默认 margin 失效，这里做了统一设置。

/**
 * Address differences between Firefox and other browsers.
 */

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

• 修正 Firefox 和其他浏览器之间的差异

在 Firefox 中，hr 元素的默认样式很多，和其它浏览器主要的差异有两点：

1. 设置了 height 为 2px；
2. box-sizing 为 border-box；
   此样式对这两个问题进行重置，进行统一

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

• 标签设置滚动条，内容溢出时出现

大部分浏览器的 pre 在 overflow 的时候会直接溢出去，这里加上 overflow:auto; 让它出现滚动条

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

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

• 修复所有浏览器中奇怪的字体设置，统一字体样式

表单 Forms

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

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

1. 修正颜色不被继承的问题
2. 修正字体属性不被继承的问题
3. 修正 Firefox 4+、Safari 和 Chrome 中外边距不同的问题

有一些浏览器会把 form 表单中的一些元素 textarea，text，button，select 中的字体和字体颜色默认会设置成用户的字体或者是浏览器的字体，并不会从父元素继承，所以这里重置了这些元素的默认样式。

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

• 统一 IE 8/9/10/11 overflow 属性为 visible

在 IE 8/9/10/11 里的 button 默认的 overflow 是 hidden，这里统一为 visible

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

• 修正 button 和 select 的 text-transform 属性继承不一致的问题
• 所有其他形式的控制元素不继承 text-transform 的值
• 修正 button 在 Firefox、IE 8/9/10/11 和 Opera 中样式继承问题
• 修正 select 在 Firefox 中样式继承问题

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

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

1. 避免 Android 4.0.* 中的 WebKit bug ，该 bug 会破坏原生的 audio 和 video 的控制器
2. 修正 IOS 中 input 类无法点击的问题
3. 完善其他类型的 input 的光标的可用性和一致性

这里将可点击的按钮，统一设置鼠标样式为 pointer，提高了可用性

/**
 * Re-set default cursor for disabled elements.
 */

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

• 重置禁用元素的默认光标

/**
 * Remove inner padding and border in Firefox 4+.
 */

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

• 移除 Firefox 4+ 的内边距和表框

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

• 修复 Firefox 4+ 在 UA 样式表中设置 input 的 line-height 属性是使用 !important

Firefox 浏览器会默认设置 input[type="button"] 的行高为 normal !important，这里统一样式

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

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

1. 修正在 IE 8/9/10 中 box-sizing 被设置为 content-box 的问题
2. 移除 IE 8/9/10 中多余的内边距

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

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

• 修正 Chrome 中 input [type="number"] 在特定高度和 font-size 时，下面一个箭头光标变成 cursor:text 效果

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */

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

1. 修正 Safari 和 Chrome 中 appearance 被设置为 searchfield 的问题
2. 修正 Safari 和 Chrome 中 box-sizing 被设置为 border-box 的问题

searchfield 是 CSS3 的属性，它可以让一个 div 元素看上去像任何元素，但是浏览器支持性并不好

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

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

• 移除原生默认样式，统一 search 的输入框样式

/**
 * Define consistent border, margin, and padding.
 */

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

• 定义一致的边框、外边距和内边距

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

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

1. 修正 IE 8/9/10/11 中颜色不能继承的问题
2. 重置内边距

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

• 移除 IE 8/9/10/11 中默认的垂直滚动条

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

• 不要继承 font-weight（适用于上面的规则）
• 注意：在 OS X 下的 Chrome 和 Safari 中默认不改变

表格 Tables

/**
 * Remove most spacing between table cells.
 */

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

td,
th {
  padding: 0;
}

• 删除表格单元格间的间距

总结

经过两个章节对 Normalize.css 的源码进行了学习，清晰的了解了它的工作原理，作为传统 CSS Reset 替代者，它当之无愧，为大家提供一套很完整的跨浏览器解决方案。

不过，你是否会有和我一样的需求，比如开发一个小站，或者一个 PC 端的系统时，也许只需要一些简单的基础模块，比如我只想要简单的样式重置，统一各浏览器的效果就好，并不需要 HTML5 以及 CSS3 的一些问题修复。

原文: https://segmentfault.com/a/1190000003025718