摘要:本篇HTML+CSS入门教程对Normalize.css 源码进行了解读,希望阅读本篇文章以后大家有所收获,帮助大家HTML+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 */
}
1. 设置全局的字体为sans-serif,关于中文字体的设置可参考 Amaze UI
2. 防止 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 */
}
1. 修复 IE 8/9,HTML5新元素不能正确显示的问题,定义为inline-block元素
2. 修复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,供大家参考使用,敬请期待...
本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号