Normalize.css 介绍与源码解读

当前位置 : 首页 > 网页制作 > CSS > Normalize.css 介绍与源码解读

Normalize.css 介绍与源码解读

来源: 作者: 时间:2016-01-20 09:22
malize css 是一个可定制的 CSS 文件,使浏览器呈现的所有元素,更一致和符合现代标准;是在现代浏览器环境下对于CSS reset的替代。 它正是针对只需要统一的元素样式。该项目依赖于研究
malize.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,
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 参见: 使用3的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,一般项目中都会重置此样式。
 
参考
Tag:
网友评论

<