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中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。这个项目的目标是帮助人们了解浏览器默认是如何渲染元素的，同时也让人们很容易地明白如何改进浏览器渲染。

源码解读

参考了很多内容，代码可以在这里找到，以下分模块逐个分析：

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，一般项目中都会重置此样式。

参考

http://www.cnblogs.com/peak/articles/1446998.html
http://www.dang-jian.com/?p=284
http://www.cnblogs.com/joyeecheung/p/3941475.html
http://devework.com/normalize-css-a-better-css-reset.html
http://segmentfault.com/blog/jerryzou/1190000002239676
http://www.w3cplus.com/css3/changing-appearance-of-element-with-css3.html
http://www.w3cplus.com/content/css3-box-sizing
https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
http://www.document-write.com/html/xhtml-css/42.html
http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp
http://www.zhangxinxu.com/wordpress/2010/05/我对css-vertical-align的一些理解与认识（一）/
http://www.zhangxinxu.com/wordpress/2010/06/css-vertical-align的深入理解（二）之text-top篇/
http://zhidao.baidu.com/link?url=IZGJu5fhKl7_JdpHaqMx1-NzpFdHWNapNuznsIFsdXitDek5SkBQ7fIRQdTArtQAT2gH3dILC8ORphdwdPUenq

posted @ 2014-12-04 13:50 LonelyClick 阅读(2480) 评论(2) 编辑收藏举报

刷新页面返回顶部

Normalize.css 介绍与源码解读

开始

Normalize对比Reset的优势

1. Normalize.css 保护了有价值的默认值

2. Normalize.css 修复了浏览器的bug

3. Normalize.css 不会让你的调试工具变的杂乱

4. Normalize.css 是模块化的

5. Normalize.css 拥有详细的文档