微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

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

2015-08-16 19:56 前端大全

(点击上方,可快速关注)


作者:Alsiso

网址:http://alsiso.github.io/2015/07/27/cssreset-one/


前言


上一章节介绍了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 */

}


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

}


  • 修复 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元素


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


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,供大家参考使用,敬请期待…




前端大全

微信号:FrontDev

打造东半球最好的 前端技术 微信号

--------------------------------------

商务合作QQ:2302462408

投稿网址:top.jobbole.com

 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 为什么跳槽加薪会比内部调薪要高? 低级程序员和高级程序员的区别 黑客帝国中有 Nmap,黑客军团中出现了哪些黑客工具呢? 深度链接的前世今生 嵌入式企鹅圈邀请到重量级工程师加盟 暨 加速度传感器的原理和应用