前言
上一章节介绍了CSS Reset的历史,最后对Normalize.css做了简单的了解,所以从这节开始对源码进行注释翻译与解读,尽可能从最根本性的问题了解它在帮我们做什么?
回顾:关于CSS Reset 那些事(一)之 历史演变与Normalize.css
Normalize 源码解读
前面讲到的分模块解读,就是先黏贴一段源码,然后根据官方提供的注释进行翻译整理,尽可能提供案例解析,然后再次进行整理总结,如果你有疑问,可以留言一起交流。
源码地址: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 */ }
- 设置全局的字体为sans-serif,关于中文字体的设置可参考 Amaze UI
- 防止 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 */ }
- 修复 IE 8/9,HTML5新元素不能正确显示的问题,定义为
inline-block
元素 - 修复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
元素在 Firefox 外其他浏览器没有下划线的问题
语义abbr
标签是表示简称或缩写,自身的title
属性是完整版,但是此标签在Firefox下默认有下边框,而其他浏览器中没有,这里统一了样式。
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong { font-weight: bold; }
- Firefox3+,Safari4/5 和 Chrome 中统一设置为粗体
Firefox 3+, Safari 和 Chrome 给b
和strong
设置的属性是bolder
,而不是bold
,这里统一了样式。
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic; }
- 修正 Safari5 和 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 5 和 Chrome 中
section
和article
内的h1
字体大小
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0; color: #000; }
- 修复 IE 6/9, Safari 5 和 Chrome中样式不呈现的问题
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
影响行高
sup
和sub
两个标签是用来表示上标和下标,据HTML标准中对small
,sub
和sup
的大小要求都是smaller
,但是如上所示normalize.css
给small
设的是80%,而sub
和sup
却是75%,所以为了保持一致,且不影响其他元素的行高,把两者的line-height
设为0
,然后设置它的垂直以baseline开始,设置top
和bottom
手动设置两者偏移量
内嵌元素 Embedded content
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0; }
- 去除 IE6-9 和 Firefox 3 中
a
内部img
元素默认的边框
在旧版本的浏览器中,图片默认会有一个奇丑无比的蓝色边框,这这里进行清除,统一样式。
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) { overflow: hidden; }
- 修复 IE9 中的
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 and 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; }
- 用于修复 Safari 5 和 Chrome 中奇怪的字体设置,统一字体样式
总结
此章节我们对Normalize.css中设置的 html与body元素,HTML5元素,链接,语义化文本,内嵌元素,群组元素 的源码进行详细的解读,发现正如其说的一样,它不仅仅帮我们修复了浏览器的默认bug,还保留了许多标签的默认值,尤其是语义化标签,坚持他们存在的意义。
由于源码部分过长,所以对于源码的解析会分为两节,下一节我们继续来介绍:
表单:表单往往存在很多问题,如常见的各种不继承问题,这这里都会得到修复
表格:表格的默认边距和边框真的很丑,需要修复修复
下一节会完成所有模块对normalize.css源码解读,届时会整理一份normalize-zh.css
中文注释的版本上传至Github,供大家参考使用,敬请期待...