Normalize.css 简介
Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。
官方网站：http://necolas.github.io/normalize.css/
浏览器支持情况：Chrome, Firefox, Opera, Safari 6+, IE 8+
一般前端工程师都会使用 reset.css 去处理不同浏览器的默认样式，这里推荐使用Normalize.css
Normalize.css有哪些优点
1)不像其他CSS resets，normalize.css保存了有用的默认设置
2)大范围的规范了HTML元素样式
3)纠正了浏览器间的一些bug及不一样的表现形式
4)精心的改进提高了可用性
5)使用详细的注释解释了代码的作用
Normalize.css 与 CSS Reset 有什么区别？
相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。相比其它的 reset.css，Normalize.css 保留有用的默认样式，不像其它 reset.css 那么彻底，移除了每个默认样式，然后又得费神把需要的样式再加回来。Normalize.css 定义绝大多数元素的默认样式，并且还提高了一些元素的可用性，并且代码都有详细的注释。
Normalize.css支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。尽管这个项目基于一般化的原则，但我们还是在合适的地方使用了更实用的默认值。
Normalize.css 保护了有价值的默认值:
Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。
Normalize.css 修复了浏览器的bug：
它修复了常见的桌面端和移动端浏览器的bug。这往往超出了Reset所能做到的范畴。关于这一点，Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug
HTML5中新出现的input类型search，Normalize.css是如何保证跨浏览器的一致性的：
/**
* 1. Addresses appearance set to searchfield in S5, Chrome
* 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Removes inner padding and search cancel button in S5, Chrome on OS X
*/
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}Normalize.css是模块化的:
这个项目已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分（比如表单的一般化）。
Normalize.css 让你的调试工具更清晰：
使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链，如下图所示。在Normalize.css中就不会有这样的问题，因为在我们的准则中对多选择器的使用时非常谨慎的，我们仅会有目的地对目标元素设置样式。
Normalize.css 拥有详细的文档：
Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。
这个项目的目标是帮助人们了解浏览器默认是如何渲染元素的，同时也让人们很容易地明白如何改进浏览器渲染。
Normalize.css是reset.css的优质替代方案：
normalize.css可以用来代替reset.css.它是由 @necolas和@jon_neal花费了100多个小时广泛研究各浏览器之间的样式差异研究而成的产品。该项目依赖于研究浏览器默认元素风格之间的差异，精确定位需要重置的样式。这是一个现代的，HTML5-ready 的 CSS 重置样式集。HTML5 Boilerplate选择Normalize.css重置CSS。如果项目计划引入Twitter Bootstrap、YUI 3这些前端框架的话则可以移除，因为这些框架已经内置了Normalize.css。
Normalize.css的使用方法：
可以使用cdn引用，cnd加速normalize.css的具体版本进入http://www.bootcdn.cn/normalize/ 引用，下载引用如下：
首先，安装或从Github下载Normalize.css，接下来有两种主要途径去使用它。
- 策略一：将
normalize.css作为你自己项目的基础CSS，自定义样式值以满足设计师的需求。 - 策略二：引入
normalize.css源码并在此基础上构建，在必要的时候用你自己写的CSS覆盖默认值。
normalize.css项目源码注释翻译：
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/* 蓝戒20150727注释翻译中文*/
/**
* 1. 设置默认的无衬线字体。
* 2. iPhone 横屏默认会放大文字，设置text-size-adjust会解决这个问题。
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* 移除默认 margin.
*/
body {
margin: 0;
}
/* HTML5 显示定义
========================================================================== */
/**
* 在IE 8/9中为HTML5元素正确的块显示。
* 在IE 10/11和firefox中为“details”或“summary”定义正确的块显示。
* 在IE 11中为“main”定义正确的块显示。
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
/**
* 1. 在IE 8/9定义正确的“inline-block”显示
* 2. 正常化Chrome,Firefox和Opera的“progress”垂直对齐.
*/
audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* 防止现代浏览器“audio”没有显示控制control。
* 在ios5设备去除多余的高度。
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* 防止在IE 8/9/10中adress`[hidden]`的样式呈现.
* IE 8/9/11, Safari, and Firefox22版本以下中隐藏“template”元素.
*/
[hidden],
template {
display: none;
}
/* 链接
========================================================================== */
/**
* 为IE 10的链接active伪类移除灰色背景
*/
a {
background-color: transparent;
}
/**
* 清除所有浏览器中鼠标focus和hover状态中出现的边缘虚线
*/
a:active,
a:hover {
outline: 0;
}
/* 文本级别的语义
========================================================================== */
/**
* 在IE 8/9/10/11,Safari和Chrome地址样式没有出现。
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* 在Firefox 4+, Safari, and Chrome中设置原本的更粗的样式
*/
b,
strong {
font-weight: bold;
}
/**
* 在Safari 和 Chrome中上呈现原本的样式
*/
dfn {
font-style: italic;
}
/**
* 在firefox 4+ ,safari和chrome浏览器中，section和article标签里面的h1的font-size和margin样式统一
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* 在IE 8/9中没有呈现本来的样式
*/
mark {
background: #ff0;
color: #000;
}
/**
* 所有浏览器中small标签字体大小不一致统一
*/
small {
font-size: 80%;
}
/**
* 防止在所有浏览器中line-height受到影响，统一设置
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* 嵌入的内容
========================================================================== */
/**
* 在IE 8/9/10中清除img的边框
*/
img {
border: 0;
}
/**
* 在IE 9/10/11中正确显示溢出隐藏
*/
svg:not(:root) {
overflow: hidden;
}
/* 分组的内容
========================================================================== */
/**
* 在IE 8/9 and Safari中外边距没有呈现统一
*/
figure {
margin: 1em 40px;
}
/**
* Firefox和其他浏览器之间的差异统一
*/
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;
}
/* 表单
========================================================================== */
/**
* 众所周知的局限:默认情况下,Chrome和Safari在OS X允许非常有限样式非常有限的“选择”,除非“边境”属性设置
*/
/**
* 1. 正确的颜色没有被继承。
* 已知问题:影响禁用元素的颜色。
* 2. 正确的字体属性没有被继承。
* 3. 在Firefox 4+, Safari, and Chrome中不同的为外边距统一
*/
button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
}
/**
* 在IE 8/9/10/11中解决“溢出”设置为“隐藏”
*/
button {
overflow: visible;
}
/**
* "button"和"select"继承不一致的text-transform样式统一。
* 所有其他形式的控制元素不继承“text-transform”值。
* 在Firefox, IE 8/9/10/11, and Opera中继承正确的"button"样式。
* 在Firefox中继承正确的"select"样式。
*/
button,
select {
text-transform: none;
}
/**
* 1. 避免在Android 4.0 WebKit的错误，破坏原生的"audio"和"vedio"控制。
* 2. 不能在iOS风格可点击“输入”类型修复。
* 3. 提高可用性和一致性的光标样式之间的图像类型和其他“输入”。
*/
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;
}
/**
* 在Firefox4+清除"border"和"padding"。
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Firefox 4+ 设置在"input"中设置"line-height"在UA样式表中使用"!important"。
*/
input {
line-height: normal;
}
/**
* 建议您不要企图风格化这些元素。
* Firefox的实现不遵照box-sizing、padding、或width设置。
*
* 1. 在IE 8/9/10中设置盒子大小包括边框（盒模型计算）。
* 2. 清除IE 8/9/10的padding。
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* 修复Chrome的递增/递减的光标样式按钮。
* 对于某些“字体大小"input"值,它会导致光标样式的减量按钮改变从“缺省”到“文本”。
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. 解决在Safari和Chrome中"ppearance"设置为"searchfield"。
* 在Safari和Chrome中解决“box-sizing”设置为“border-box”(包括“-moz”不会过时的)
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* 在Safari和Chrome OS X中清除内部填充和搜索取消按钮。
* Safari(但不是Chrome)片段时,取消按钮搜索输入填充(文本框的外观)。
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 定义一致的"border"、"margin"、"padding"
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. 在IE 8/9/10/11中"color"正确的被继承
* 2. 如果没有字段清除border和padding，不会呈现
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* 清除IE 8/9/10/11 默认的垂直滚动条
*/
textarea {
overflow: auto;
}
/**
* 不继承"font-weight"(上面应用的规则)
* 注意:默认安全在在OS X Chrome和Safari中不能改变。
*/
optgroup {
font-weight: bold;
}
/* 表格
========================================================================== */
/**
* 清除表格间距.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
文章评论