关于CSS Reset那些事(1):历史演变与Normalize.css

2015/08/01 · CSS · CSS
Reset,
Normalize.css

原文出处: Alsiso   

原文链接

关于CSS Reset那些事(2):Normalize.css 源码解读

2015/08/02 · CSS · CSS
Reset,
Normalize.css

原文出处: Alsiso   

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

作用:

前言

近期在翻阅陈旧的历史资料,整理之前饱受争议的CSS
Reset问题,不过好像十多年过去,现在大家统一了口径,纷纷推荐使用Normalize.css,包括Bootstrap都进行了内置使用,可见它的认可程度之高。

由于文章涉及内容较多,会分为系列文章

第一章
整理CSS Reset历史的演变痕迹,从第一份CSS Reset的诞生,到提出No CSS
Reset的思想,再到国产CSS Reset 1.0骄傲的诞生;最终时过境迁,CSS
Reset被Normalize.css所替代;
随后开始认识Normalize.css,了解它都做了那些事情,诉说与CSS
Reset的区别,突出优势,告诉你为什么要使用它。

第二章
由于Normalize.css只提供了英文文档,没有提供对应的中文版本,所以从这章开始对其源码进行翻译整理与解读,本章包含
html与body,HTML5元素,链接,语义化文本标签,内嵌元素,群组元素等内容解读。

第三章,
继续来介绍源码中的表单和表格部分,并且整理一份normalize-zh.css中文注释的版本上传至Github,供大家参考使用,敬请期待

前言

上一章节介绍了CSS
Reset的历史,最后对Normalize.css做了简单的了解,所以从这节开始对源码进行注释翻译与解读,尽可能从最根本性的问题了解它在帮我们做什么?

回顾:关于CSS Reset 那些事(一)之
历史演变与Normalize.css

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

Reset CSS和Normalize CSS都是重置浏览器自带样式。

CSS Reset 历史回顾

Normalize 源码解读

前面讲到的分模块解读,就是先黏贴一段源码,然后根据官方提供的注释进行翻译整理,尽可能提供案例解析,然后再次进行整理总结,如果你有疑问,可以留言一起交流。

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

       也可以理解为CSS Reset
是清朝,闭关锁国,对于外来东西全然不接受;故为完全重置。

区别:

第一份 CSS Reset

为什么会有CSS
Reset的存在呢?那是因为早期的浏览器支持和理解的CSS规范不同,导致浏览器在渲染页面时效果不一致,出现很多兼容性问题。
关于 浏览器的默认样式 请点击查阅!

根据玉伯的文章中透漏,最早的一份CSS Reset来自Tantek
的undohtml.css,从URL中的日期可以看出时间是2004年,Tantek根据自身需要对于一些标签进行了简单的重置,源码如下:

CSS

/* undohtml.css */ /* (CC) 2004 Tantek Celik. Some Rights Reserved.
*/ :link,:visited { text-decoration:none } ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,
fieldset,input{ margin:0; padding:0 } a img,:link img,:visited img {
border:none } address { font-style:normal }

1
2
3
4
5
6
7
8
9
/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,
fieldset,input{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }

html与body 元素

CSS

/** * 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
2
3
4
5
6
7
8
9
10
/**
* 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,关于中文字体的设置可参考 Amaze
    UI
  2. 防止 iOS 横屏字号放大,同时保证在PC上 zoom 功能正常

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

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

CSS

/** * Remove default margin. */ body { margin: 0; }

1
2
3
4
5
6
7
/**
* Remove default margin.
*/
 
body {
  margin: 0;
}
  • 修复浏览器默认边距,统一效果

     
Normalize.cs是唐朝,外来好的接收不好的摒弃;故为重置掉该重置的样式,保留有用的
user agent 样式,同时进行一些 bug 的修复。

reset
的目的,是将所有的浏览器的自带样式重置掉,这样更易于保持各浏览器渲染的一致性。

CSS Reset 核心代码与作用

随后加入到CSS
RESET的行列的大牛越来越多,比如业界领袖 YUI团队 以及Eric
Meyer把这份CSS
Reset变的更加充实,但是大家不难发现代码的核心部分还是重置,从此可以结论出早期的CSS
Reset的作用就是清除所有浏览器默认样式,让它一切归零!

CSS

* { margin:0; padding:0 }

1
* { margin:0; padding:0 }

不过在此之后一段时间,有人开始批判这种暴力清零的CSS
Reset方式,随后部分前端开发者们也传来一些争议声音,比如:

  1. *{ margin:0; padding:0; }会带来性能问题
  2. 使用通配符存在隐性问题
  3. 过渡的标签重置等于画蛇添足
  4. 过渡的标签重置导致语言元素失效

注:由于都是一些陈旧的老问题,就不提供出处了,再此不过多讨论,感兴趣Google~

HTML5 元素 display definitions

CSS

/** * 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; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
* 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元素。

CSS

/** * 1. Correct `inline-block` display not defined in IE 8/9. *

  1. Normalize vertical alignment of `progress` in Chrome, Firefox, and
    Opera. */ audio, canvas, progress, video { display: inline-block; /* 1
    */ vertical-align: baseline; /* 2 *澳门皇冠金沙网站,/ }
1
2
3
4
5
6
7
8
9
10
11
12
/**
* 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垂直对齐。

CSS

/** * Prevent modern browsers from displaying `audio` without
controls. * Remove excess height in iOS 5 devices. */
audio:not([controls]) { display: none; height: 0; }

1
2
3
4
5
6
7
8
/**
* 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属性,这里的办法是直接隐藏该元素

CSS

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

  1. */ [hidden], template { display: none; }
1
2
3
4
5
6
7
8
9
/**
* 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元素

hidden是HTML5的新元素,可以对元素进行隐藏,但是低版本浏览器并不会识别它,这里统一做了样式。

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

normalize 的理念则是尽量保留浏览器的默认样式,不进行太多的重置。

No CSS Reset 思想

Jonathan Snook是第一个提出No CSS Reset思想,其核心是Less is
more,少即是多,不提倡使用暴力归零的方法。

玉伯后来也在《Reset CSS研究》文章中阐述说明,其实 Eric Meyer
并不期望大家下载他的 CSS Reset
后直接就拿去用,而是应该按照自己的需求,适量裁剪和修改后再使用。

后来YUI更新了cssreset,还配套有
cssfonts 和 cssbase。cssreset只负责清除默认样式,而CSS fonts 和 CSS base
则将一些元素的默认样式重设回来,这就消除了之前的争议,这一又迅速成为大家的通用解决方法了。

YUI 提供的cssfonts.css

CSS

/* YUI 3.18.1 (build f7e7bcb) Copyright 2014 Yahoo! Inc. All rights
reserved. Licensed under the BSD License.
*/ /** * Percents could work for IE, but for backCompat purposes, we
are using keywords. * x-small is for IE6/7 quirks mode. */ body {
font:13px/1.231 arial,helvetica,clean,sans-serif; *font-size:small; /*
for IE */ *font:x-small; /* for IE in quirks mode */ } /** *
Nudge down to get to 13px equivalent for these form elements */ select,
input, button, textarea { font:99% arial,helvetica,clean,sans-serif; }
/** * To help tables remember to inherit */ table {
font-size:inherit; font:100%; } /** * Bump up IE to get to 13px
equivalent for these fixed-width elements */ pre, code, kbd, samp, tt {
font-family:monospace; *font-size:108%; line-height:100%; } /* YUI CSS
Detection Stamp */ #yui3-css-stamp.cssfonts { display: none; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
 
/**
* Percents could work for IE, but for backCompat purposes, we are using keywords.
* x-small is for IE6/7 quirks mode.
*/
body {
font:13px/1.231 arial,helvetica,clean,sans-serif;
*font-size:small; /* for IE */
*font:x-small; /* for IE in quirks mode */
}
 
/**
* Nudge down to get to 13px equivalent for these form elements
*/
select,
input,
button,
textarea {
font:99% arial,helvetica,clean,sans-serif;
}
 
/**
* To help tables remember to inherit
*/
table {
font-size:inherit;
font:100%;
}
 
/**
* Bump up IE to get to 13px equivalent for these fixed-width elements
*/
pre,
code,
kbd,
samp,
tt {
font-family:monospace;
*font-size:108%;
line-height:100%;
}
 
/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssfonts { display: none; }

链接 Links

CSS

/** * Remove the gray background color from active links in IE 10.
*/ a { background-color: transparent; }

1
2
3
4
5
6
7
/**
* Remove the gray background color from active links in IE 10.
*/
 
a {
  background-color: transparent;
}
  • 去掉 IE 10+ 点击链接时的灰色背景

CSS

/** * Improve readability of focused elements when they are also in
an * active/hover state. */ a:active, a:hover { outline: 0; }

1
2
3
4
5
6
7
8
9
/**
* Improve readability of focused elements when they are also in an
* active/hover state.
*/
 
a:active,
a:hover {
  outline: 0;
}
  • 去掉点击时的outline焦点框,同时保证使用键盘可以显示焦点框,这个操作针对所有浏览器

最主要的区别是Normalize.css保留不同浏览器同标签相同的默认值,只重置不同默认样式的差异,可以说css
reset的高级版。

国产 CSS Reset

这是YUI最新更新的一次版本V3.18.1,但是很尴尬的发现,YUI 提供的
cssfonts 和 cssbase
只考虑了西欧文字,对汉字的支持却不多,这就导致很多用户只使用了cssreset,而没有使用其他两个。

据说nake和adiaos两大运动品牌到天朝后,有些运动科技会缩水,但是万万没想到,万能的代码到了天朝也是会缩水的。
– -!

于是乎,有些大牛不甘心,不仅厌倦了国内抄来抄去的CSS
Reset,也受够了只考虑西欧洲字体,不考虑汉字的缺陷,大厂们就开始摸索制定属于自己的CSS
Reset,比如2009年阿里Kissy框架
(源码连接已失效,主页留纪念) 的第一份CSS Reset:

CSS

/* KISSY CSS Reset 理念:清除和重置是紧密不可分的 特色:1.适应中文
2.基于最新主流浏览器 维护:玉伯(lifesinger@gmail.com),
正淳(ragecarrier@gmail.com) */ /* 清除内外边距 */ body, h1, h2, h3,
h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ dl,
dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text
formatting elements 文本格式元素 */ fieldset, lengend, button, input,
textarea, /* form elements 表单元素 */ th, td { /* table elements
表格元素 */ margin: 0; padding: 0; } /* 设置默认字体 */ body, button,
input, select, textarea { /* for ie */ /*font: 12px/1 Tahoma,
Helvetica, Arial, “宋体”, sans-serif;*/ font: 12px/1 Tahoma, Helvetica,
Arial, “\5b8b\4f53”, sans-serif; /* 用 ascii
字符表示,使得在任何编码下都无问题 */ } h1 { font-size: 18px; /* 18px
/ 12px = 1.5 */ } h2 { font-size: 16px; } h3 { font-size: 14px; } h4,
h5, h6 { font-size: 100%; } address, cite, dfn, em, var { font-style:
normal; } /* 将斜体扶正 */ code, kbd, pre, samp, tt { font-family:
“Courier New”, Courier, monospace; } /* 统一等宽字体 */ small {
font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */ /*
重置列表元素 */ ul, ol { list-style: none; } /* 重置文本格式元素 */ a
{ text-decoration: none; } a:hover { text-decoration: underline; }
abbr[title], acronym[title] { /* 注:1.ie6 不支持 abbr;
2.这里用了属性选择符,ie6 下无效果 */ border-bottom: 1px dotted;
cursor: help; } q:before, q:after { content: ”; } /* 重置表单元素 */
legend { color: #000; } /* for ie6 */ fieldset, img { border: none; }
/* img 搭车:让链接里的 img 无边框 */ /* 注:optgroup 无法扶正 */
button, input, select, textarea { font-size: 100%; /* 使得表单元素在 ie
下能继承字体大小 */ } /* 重置表格元素 */ table { border-collapse:
collapse; border-spacing: 0; } /* 重置 hr */ hr { border: none;
height: 1px; } /*
让非ie浏览器默认也显示垂直滚动条,防止因滚动条引起的闪烁 */ html {
overflow-y: scroll; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
/* KISSY CSS Reset
理念:清除和重置是紧密不可分的
特色:1.适应中文 2.基于最新主流浏览器
维护:玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com)
*/
 
/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td { /* table elements 表格元素 */
    margin: 0;
    padding: 0;
}
 
/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie */
    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
    font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
    /* 用 ascii 字符表示,使得在任何编码下都无问题 */
}
 
h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }
 
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */
 
/* 重置列表元素 */
ul, ol { list-style: none; }
 
/* 重置文本格式元素 */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
 
abbr[title], acronym[title] { /* 注:1.ie6 不支持 abbr; 2.这里用了属性选择符,ie6 下无效果 */
border-bottom: 1px dotted;
cursor: help;
}
 
q:before, q:after { content: ”; }
 
/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; } /* img 搭车:让链接里的 img 无边框 */
/* 注:optgroup 无法扶正 */
button, input, select, textarea {
    font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}
 
/* 重置表格元素 */
table {
border-collapse: collapse;
border-spacing: 0;
}
 
/* 重置 hr */
hr {
    border: none;
    height: 1px;
}
/* 让非ie浏览器默认也显示垂直滚动条,防止因滚动条引起的闪烁 */
html { overflow-y: scroll; }

 

记得玉伯在写完第一版本的CSS Reset后,在文章的结尾还是千叮咛,万嘱咐说:

请记住:永远不存在万能解决方案,永远没有银弹。
因此我的建议和 Eric 是一样的:请根据具体需求,适量裁剪和修改后再使用。

语义化文本标签 Text-level semantics

CSS

/** * Address styling not present in IE 8/9/10/11, Safari, and
Chrome. */ abbr[title] { border-bottom: 1px dotted; }

1
2
3
4
5
6
7
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
 
abbr[title] {
  border-bottom: 1px dotted;
}
  • 修正abbr元素在 Firefox 外其他浏览器没有下划线的问题

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

CSS

/** * Address style set to `bolder` in Firefox 4+, Safari, and
Chrome. */ b, strong { font-weight: bold; }

1
2
3
4
5
6
7
8
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
 
b,
strong {
  font-weight: bold;
}
  • Firefox3+,Safari4/5 和 Chrome 中统一设置为粗体

Firefox 3+, Safari 和 Chrome
bstrong设置的属性是bolder,而不是bold,这里统一了样式。

CSS

/** * Address styling not present in Safari and Chrome. */ dfn {
font-style: italic; }

1
2
3
4
5
6
7
/**
* Address styling not present in Safari and Chrome.
*/
 
dfn {
  font-style: italic;
}
  • 修正 Safari5 和 Chrome 中没有样式的问题

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

CSS

/** * 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; }

1
2
3
4
5
6
7
8
9
/**
* 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 5 和 Chrome
    sectionarticle内的h1字体大小

CSS

/** * Address styling not present in IE 8/9. */ mark { background:
#ff0; color: #000; }

1
2
3
4
5
6
7
8
/**
* Address styling not present in IE 8/9.
*/
 
mark {
  background: #ff0;
  color: #000;
}
  • 修复 IE 6/9, Safari 5 和 Chrome中样式不呈现的问题

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

CSS

/** * Address inconsistent and variable font size in all browsers.
*/ small { font-size: 80%; }

1
2
3
4
5
6
7
/**
* Address inconsistent and variable font size in all browsers.
*/
 
small {
  font-size: 80%;
}
  • 在所有浏览器中统一small的字体大小

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

CSS

/** * 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; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
* 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;
}
  • 防止所有浏览器中的subsup影响行高

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

相对于普通的css
reset,Normalize的的浏览器的兼容性更好,normalize.css支持更多的浏览器(包括手机端)

CSS Reset 替代品 Normalize.css

我们把历史拉回到今天,时过境迁,CSS Reset
逐渐淡出的前沿前端的视野,被取而代之就是Normalize.css,关于对CSS
Reset 与
Normalize.css的区别?可以引用知乎上 张小核桃 的一个回答:

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

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

下一章节会对Normalize.css进行简单的介绍,关于两者的差异区别可以看问答平台的问题:
使用normalize.css遇到的问题?
Normalize.css 和 Reset CSS
有什么本质区别没?

内嵌元素 Embedded content

CSS

/** * Remove border when inside `a` element in IE 8/9/10. */ img {
border: 0; }

1
2
3
4
5
6
7
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
 
img {
  border: 0;
}
  • 去除 IE6-9 和 Firefox 3 中a内部img元素默认的边框

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

CSS

/** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) {
overflow: hidden; }

1
2
3
4
5
6
7
/**
* Correct overflow not hidden in IE 9/10/11.
*/
 
svg:not(:root) {
  overflow: hidden;
}
  • 修复 IE9 中的overflow的怪异表现

Normalize.css 简单介绍

关于对Github的介绍,这里引用 咀嚼之味 针对 官方介绍 翻译的的 中文版本。

群组元素 Grouping content

CSS

/** * Address margin not present in IE 8/9 and Safari. */ figure {
margin: 1em 40px; }

1
2
3
4
5
6
7
/**
* Address margin not present in IE 8/9 and Safari.
*/
 
figure {
  margin: 1em 40px;
}
  • 修复 IE 8/9、Safari中margin失效

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

CSS

/** * Address differences between Firefox and other browsers. */ hr
{ box-sizing: content-box; height: 0; }

1
2
3
4
5
6
7
8
/**
* Address differences between Firefox and other browsers.
*/
 
hr {
  box-sizing: content-box;
  height: 0;
}
  • 修正 Firefox 和其他浏览器之间的差异

在 Firefox 中,hr元素的默认样式很多,和其它浏览器主要的差异有两点:
1.设置了height2px;
2.box-sizingborder-box;
此样式对这两个问题进行重置,进行统一

CSS

/** * Contain overflow in all browsers. */ pre { overflow: auto; }

1
2
3
4
5
6
7
/**
* Contain overflow in all browsers.
*/
 
pre {
  overflow: auto;
}
  • 标签设置滚动条,内容溢出时出现

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

CSS

/** * Address odd `em`-unit font size rendering in all browsers.
*/ code, kbd, pre, samp { font-family: monospace, monospace; font-size:
1em; }

1
2
3
4
5
6
7
8
9
10
11
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
 
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
  • 用于修复 Safari 5 和 Chrome 中奇怪的字体设置,统一字体样式,

根据官网的定义:
normalize.css是一个现代的,为HTML5准备的reset.css的替代品。它可以使元素的渲染在多个浏览器下都能保持一致并且符合规范。它所瞄准的,也都是些需要规范化的样式。

简要概述

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:

总结

此章节我们对Normalize.css中设置的
html与body元素,HTML5元素,链接,语义化文本,内嵌元素,群组元素
的源码进行详细的解读,发现正如其说的一样,它不仅仅帮我们修复了浏览器的默认bug,还保留了许多标签的默认值,尤其是语义化标签,坚持他们存在的意义。

由于源码部分过长,所以对于源码的解析会分为两节,下一节我们继续来介绍:

表单:表单往往存在很多问题,如常见的各种不继承问题,这这里都会得到修复
表格:表格的默认边距和边框真的很丑,需要修复修复

下一节会完成所有模块对normalize.css源码解读,届时会整理一份normalize-zh.css中文注释的版本上传至Github,供大家参考使用,敬请期待…

1 赞 收藏
评论

澳门皇冠金沙网站 1

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
    解释代码:用注释和详细的文档来

1、保留有用的浏览器默认样式,而不是一概将它们“抹杀”。

优势对比

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

这个项目的目标是帮助人们了解浏览器默认是如何渲染元素的,同时也让人们很容易地明白如何改进浏览器渲染。

2、normalize.css作用在范围更广的元素上面。

源码解析

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

1 赞 1 收藏
评论

澳门皇冠金沙网站 1

3、修正了一些bug及主流浏览器在渲染上的不一致。

4、提高了可用性。

5、用更加详细的文档及注释来解释代码的含义。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图