0英汉对照版,源码解读
分类:前端技术

关于CSS Reset这一个事(2):Normalize.css 源码解读

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

初藳出处: Alsiso   

关于CSS Reset那些事(3):架构CSS基础库

2015/08/03 · CSS · CSS Reset

原版的书文出处: Alsiso   

/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

前言

上后生可畏章节介绍了CSS Reset的野史,最终对Normalize.css做了总结的摸底,所以从那节从前对源码举办批注翻译与解读,尽或然从最根脾气的主题素材询问它在帮大家做怎么样?

回顾:有关CSS Reset 那么些事(意气风发)之 历史演变与诺玛lize.css

前言

上意气风发章节我们对Normalize.css源码进行解析,但是由于其代码过长导致不宜浏览,所以表单Forms,表格Table部分内容放在此章节介绍。本章节会完成所有源代码翻译整理,最终会整理出Normalize-zh.css中文版本并开源至Github供大家交流使用。

回顾:有关CSS Reset 那多少个事(二)之 Normalize.css 源码解读


//

诺玛lize 源码解读

后面讲到的分模块解读,正是先黏贴豆蔻梢头段源码,然后依照官方提供的申明实行翻译整理,尽恐怕提供案例剖判,然后再一次开展规整总计,假如你有问号,能够留言一齐沟通。

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

Normalize-zh.css 出炉

Normalize-zh.css是根据对Normalize.css的源码分析后,经过学习与整理,将源代码中的英文注释文档翻译为中文版本,方便国内的开发者学习和使用,我深知此版本一定有很多不足,希望能得到大家的理解和支持,同样也很愿意和大家一起完善。

现已将源代码开源至Github

花色地址:

/**

// 1. Set default font family to sans-serif.

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 功效符合规律

第一个难点场景是那般,苹果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 源码解读 (2)

上章节对 html与body成分,HTML5成分,链接,语义化文本,内嵌成分,群组元素等源码内容早就做了深入分析,那章节继续实现表单Forms,表格Table部分。

源码地址:

源码版本:v3.0.3

* 1. Change the default font family in all browsers (opinionated).设置私下认可字体为无衬线字体。

// 2. Prevent iOS and IE text size adjust after device orientation change,

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模版开荒页面,那个标签是遵循实际需要拉长的,然则模板又无法在分界面上出示,所以这里统一了体制,宽容旧浏览器。

表单 Forms

CSS

/** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4 , Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
* 1. Correct color not being inherited.
*    Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4 , Safari, and Chrome.
*/
 
button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}
  1. 纠正全部浏览器中颜色不继续的标题
  2. 校勘全数浏览器中字体不接二连三的标题
  3. 校订 Firefox 3 , Safari5 和 Chrome 中外边距区别的标题

有生龙活虎对浏览器会把form表单中的一些元素 textarea,text,button,select 中的字体和字体颜色默认会设置成用户的字体或者是浏览器的字体,并不会从父元素继承,所以这里重置了这些元素的默认样式。

CSS

/** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; }

1
2
3
4
5
6
7
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
 
button {
  overflow: visible;
}
  • 统一 IE 8/9/10/11 overflow属性为visible

在 IE 8/9/10/11里的button默认的overflow是hidden,这里统一为visible

CSS

/** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; }

1
2
3
4
5
6
7
8
9
10
11
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
 
button,
select {
  text-transform: none;
}
  • 集结各浏览器text-transform不会继承的问题

CSS

/** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
*    and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
*    `input` and others.
*/
 
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}
  1. 避免 Android 4.0.* 中的 WebKit bug ,该bug会毁掉原生的audio和video的控制器
  • 更正 iOS 中无法设置可点击的input的问题
  • 联合其余项指标input的光标样式

此地将可点击的开关,统后生可畏安装鼠标准样板式为pointer,提高了可用性

CSS

/** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; }

1
2
3
4
5
6
7
8
/**
* Re-set default cursor for disabled elements.
*/
 
button[disabled],
html input[disabled] {
  cursor: default;
}
  • 重新设置开关禁止使用时光标准样本式

CSS

/** * Remove inner padding and border in Firefox 4 . */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

1
2
3
4
5
6
7
8
9
/**
* Remove inner padding and border in Firefox 4 .
*/
 
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
  • 移除 Firefox 4 的内边距

CSS

/** * Address Firefox 4 setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; }

1
2
3
4
5
6
7
8
/**
* Address Firefox 4 setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
 
input {
  line-height: normal;
}
  • 归并安装行高为normal

Firefox浏览器会私下认可设置input[type=”button”]的行高为normal !important,这里统一样式

CSS

/** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
 
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}
  1. 修正 IE 8/9 box-sizing 棉被服装置为content-box的问题
  • 移除 IE 8/9 中多余的内边距

CSS

/** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }

1
2
3
4
5
6
7
8
9
10
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
 
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
  • 修正 Chrome 中 input [type="number"] 在特定高度和 font-size 时,下面一个箭头光标变成cursor: text 效果

 

CSS

/** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. */ input[type="search"]0英汉对照版,源码解读。 { -webkit-appearance: textfield; /* 1 */ box-sizing: content-box; /* 2 */ }

1
2
3
4
5
6
7
8
9
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
*/
 
input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  box-sizing: content-box; /* 2 */
}
  1. 修正 Safari 5 和 Chrome 中appearance被设置为searchfield的问题
  • 修正 Safari 5 和 Chrome 中box-sizing被设置为border-box的问题

searchfield是CSS3的属性,它可以让一个div元素看上去像任何元素,但是浏览器支持性并不好,

CSS

/** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

1
2
3
4
5
6
7
8
9
10
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
 
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
  • 移除原生私下认可样式,统后生可畏search的输入框样式

 

CSS

/** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

1
2
3
4
5
6
7
8
9
/**
* Define consistent border, margin, and padding.
*/
 
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
  • 概念意气风发致的边框、外边距和内边距

CSS

/** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ }

1
2
3
4
5
6
7
8
9
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
 
legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}
  1. 修改 IE 6-9 中颜色不可能承接的主题素材
  2. 重新载入参数内边距

CSS

/** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; }

1
2
3
4
5
6
7
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
 
textarea {
  overflow: auto;
}
  • 移除 IE8-11 中默许的垂直滚动条

CSS

/** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; }

1
2
3
4
5
6
7
8
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
 
optgroup {
  font-weight: bold;
}
  • 合併安装optgroup元素font-weight始终为bold

* 2. Prevent adjustments of font size after orientation changes in IE and iOS.幸免 iOS 和 IE 横屏时调度文本大小,不用none值禁绝顾客缩放。

//    without disabling user zoom.

链接 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火爆框,同一时间确定保障使用键盘能够展现宗旨框,这几个操作针对具备浏览器

表格 Tables

CSS

/** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
* Remove most spacing between table cells.
*/
 
table {
  border-collapse: collapse;
  border-spacing: 0;
}
 
td,
th {
  padding: 0;
}

*/

//

语义化文本标签 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却是百分之三十,所感到了保持生机勃勃致,且不影响此外因素的行高,把相互的line-height设为0,然后设置它的垂直以baseline初叶,设置topbottom手动设置两个偏移量

总结

因而七个章节对Normalize.css的源码进行了学习,清晰的了解了它的工作原理,作为传统CSS Reset替代者,它当之无愧,为大家提供一套很完整的跨浏览器解决方案。

而是,你是否会有和本身同样的供给,举例开拓多少个小站,或然贰个PC端的系统时,可能只须要有的精简的根底模块,比方小编只想要简单的体制复位,统意气风发各浏览器的职能就好,并无需HTML5以至CSS3的片段题目修复。

那就是说下生机勃勃章,大家来介绍,假若拟定属于本人的 CSS基础代码库?

1 赞 1 收藏 评论

图片 1

html{

html{

内嵌成分 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的古怪表现

font-family:sans-serif; /* 1 */

font-family:sans-serif;// 1

群组成分 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 中竟然的字体设置,统一字体样式,

-ms-text-size-adjust:100%;/* 2 */

-ms-text-size-adjust:100%;// 2

总结

此章节大家对Normalize.css中设置的 html与body成分,HTML5成分,链接,语义化文本,内嵌成分,群组元素的源码实行详细的解读,发现正如其说的同等,它不但帮大家修复了浏览器的暗中认可bug,还保存了成百上千标签的暗中同意值,极其是语义化标签,百折不回他们存在的意思。

出于源码部分过长,所以对于源码的拆解剖析会分为两节,下生龙活虎节我们继续来介绍:

表单:表单往往存在多数难题,如广大的各类不三回九转难题,那这里都会获得修复
表格:表格的暗中同意边距和边框真的非常丑,须要修补修复

下焕发青新年会完毕具有模块对normalize.css源码解读,届时会收拾生机勃勃份normalize-zh.css华语注释的本子上传至Github,供我们参照他事他说加以考察使用,敬请期望…

1 赞 收藏 评论

图片 2

-webkit-text-size-adjust:100%;/* 2 */

-webkit-text-size-adjust:100%;// 2

}

}

/**

//

* Remove the margin in all browsers (opinionated).移除margin,针对富有浏览器(自定义)

// Remove default margin.

*/

//

body{

body{

margin:0;

margin:0;

}

}

/* HTML5 display definitions HTML5显得定义

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

}

//

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

}

//

// Prevent modern browsers from displaying `audio` without controls.

// Remove excess height in iOS 5 devices.

//

audio:not([controls]) {

display:none;

height:0;

}

//

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

}

// Links

/**

//

//

// Remove the gray background color from active links in IE 10.

//

a{

background-color:transparent;

}

//

// Improve readability of focused elements when they are also in an

// active/hover state.

//

a:active,

a:hover{

outline:0;

}

// Text-level semantics

* Add the correct display in IE 9-.改良补充IE9-的突显格局

//

//

// Address styling not present in IE 8/9/10/11, Safari, and Chrome.

//

abbr[title] {

border-bottom:1pxdotted;

}

//

// Address style set to `bolder` in Firefox 4 , Safari, and Chrome.

//

b,

strong{

font-weight:bold;

}

//

// Address styling not present in Safari and Chrome.

//

dfn{

font-style:italic;

}

//

// Address variable `h1` font-size and margin within `section` and `article`

// contexts in Firefox 4 , Safari, and Chrome.

//

h1{

font-size:2em;

margin:0.67em0;

}

//

// Address styling not present in IE 8/9.

//

mark{

background:#ff0;

color:#000;

}

//

// Address inconsistent and variable font size in all browsers.

//

small{

font-size:80%;

}

//

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

}

// Embedded content

* 1. Add the correct display in 艾德ge, IE, and Firefox.改良补充Edge, IE, and Firefox的显示情势

//

//

// Remove border when inside `a` element in IE 8/9/10.

//

img{

border:0;

}

//

// Correct overflow not hidden in IE 9/10/11.

//

svg:not(:root) {

overflow:hidden;

}

// Grouping content

* 2. Add the correct display in IE.改进补充IE的呈现形式

//

//

// Address margin not present in IE 8/9 and Safari.

//

figure{

margin:1em40px;

}

//

// Address differences between Firefox and other browsers.

//

hr{

box-sizing:content-box;

height:0;

}

//

// Contain overflow in all browsers.

//

pre{

overflow:auto;

}

//

// Address odd `em`-unit font size rendering in all browsers.

//

code,

kbd,

pre,

samp{

font-family:monospace,monospace;

font-size:1em;

}

// Forms

*/

//

//

// Known limitation: by default, Chrome and Safari on OS X allow very limited

// styling of `select`, unless a `border` property is set.

//

//

// 1. Correct color not being inherited.

//    Known issue: affects color of disabled elements.

// 2. Correct font properties not being inherited.

// 3. Address margins set differently in Firefox 4 , Safari, and Chrome.

//

button,

input,

optgroup,

select,

textarea{

color:inherit;// 1

font:inherit;// 2

margin:0;// 3

}

//

// Address `overflow` set to `hidden` in IE 8/9/10/11.

//

button{

overflow:visible;

}

//

// Address inconsistent `text-transform` inheritance for `button` and `select`.

// All other form control elements do not inherit `text-transform` values.

// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.

// Correct `select` style inheritance in Firefox.

//

button,

select{

text-transform:none;

}

//

// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`

//    and `video` controls.

// 2. Correct inability to style clickable `input` types in iOS.

// 3. Improve usability and consistency of cursor style between image-type

//    `input` and others.

//

button,

htmlinput[type="button"],// 1

input[type="reset"],

input[type="submit"] {

-webkit-appearance: button;// 2

cursor:pointer;// 3

}

//

// Re-set default cursor for disabled elements.

//

button[disabled],

htmlinput[disabled] {

cursor:default;

}

//

// Remove inner padding and border in Firefox 4 .

//

button::-moz-focus-inner,

input::-moz-focus-inner{

border:0;

padding:0;

}

//

// Address Firefox 4 setting `line-height` on `input` using `!important` in

// the UA stylesheet.

//

input{

line-height:normal;

}

//

// It's recommended that you don't attempt to style these elements.

// Firefox's implementation doesn't respect box-sizing, padding, or width.

//

// 1. Address box sizing set to `content-box` in IE 8/9/10.

// 2. Remove excess padding in IE 8/9/10.

//

input[type="checkbox"],

input[type="radio"] {

box-sizing:border-box;// 1

padding:0;// 2

}

//

// Fix the cursor style for Chrome's increment/decrement buttons. For certain

// `font-size` values of the `input`, it causes the cursor style of the

// decrement button to change from `default` to `text`.

//

input[type="number"]::-webkit-inner-spin-button,

input[type="number"]::-webkit-outer-spin-button{

height:auto;

}

//

// 1. Address `appearance` set to `searchfield` in Safari and Chrome.

// 2. Address `box-sizing` set to `border-box` in Safari and Chrome.

//

input[type="search"] {

-webkit-appearance: textfield;// 1

box-sizing:content-box;//2

}

//

// Remove inner padding and search cancel button in Safari and Chrome on OS X.

// Safari (but not Chrome) clips the cancel button when the search input has

// padding (and `textfield` appearance).

//

input[type="search"]::-webkit-search-cancel-button,

input[type="search"]::-webkit-search-decoration{

-webkit-appearance:none;

}

//

// Define consistent border, margin, and padding.

//

fieldset{

border:1pxsolid#c0c0c0;

margin:02px;

padding:0.35em0.625em0.75em;

}

//

// 1. Correct `color` not being inherited in IE 8/9/10/11.

// 2. Remove padding so people aren't caught out if they zero out fieldsets.

//

legend{

border:0;// 1

padding:0;// 2

}

//

// Remove default vertical scrollbar in IE 8/9/10/11.

//

textarea{

overflow:auto;

}

//

// Don't inherit the `font-weight` (applied by a rule above).

// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.

//

optgroup{

font-weight:bold;

}

// Tables

article,

//

//

// Remove most spacing between table cells.

//

table{

border-collapse:collapse;

border-spacing:0;

}

td,

th{

padding:0;

}

aside,

details,/* 1 */

figcaption,

figure,

footer,

header,

main,/* 2 */

menu,

nav,

section,

summary{ /* 1 */

display:block;

}

/**

* Add the correct display in IE 9-.改正补充IE9-的展现情势

*/

audio,

canvas,

progress,

video{

display:inline-block;

}

/**

* Add the correct display in iOS 4-7.修正补充iOS 4-7的呈现格局

*/

audio:not([controls]){

display:none;

height:0;

}

/**

* Add the correct vertical alignment in Chrome, Firefox, and Opera.修改补充在Chrome, Firefox, 和Opera中的垂直对齐格局

*/

progress{

vertical-align:baseline;

}

/**

* Add the correct display in IE 10-.更正补充IE10-的显示方式

* 1. Add the correct display in IE.校勘补充IE的展现情势

*/

template,/* 1 */

[hidden]{

display:none;

}

/* Links  链接

========================================================================== */

/**

* Remove the gray background on active links in IE 10.去掉 IE 10 链接激活时的鲜蓝背景

*/

a{

background-color:transparent;

}

/**

* Remove the outline on focused links when they are also active or hovered

* in all browsers (opinionated).移除核心链接active和hover时的轮廓线,针对富有浏览器(自定义)

*/

a:active,

a:hover{

outline-width:0;

}

/* Text-level semantics  文本语义

========================================================================== */

/**

* 1. Remove the bottom border in Firefox 39-.1. 移除在Firefox 39-下的下面框

* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 2. 改进补充在Chrome, Edge, IE, Opera, 和 Safari里的文书装饰线

*/

abbr[title]{

border-bottom:none; /* 1 */

text-decoration:underline; /* 2 */

text-decoration:underline dotted; /* 2 */

}

/**

* Prevent the duplicate application of `bolder` by the next rule in Safari 6. 下条准绳幸免在Safari 6中另行利用"bolder"

*/

b,

strong{

font-weight:inherit;

}

/**

* Add the correct font weight in Chrome, Edge, and Safari.在Chrome, Edge, and Safari中改正补充font weight

*/

b,

strong{

font-weight:bolder;

}

/**

* Add the correct font style in Android 4.3-.改善补充Android 4.3-里的font style

*/

dfn{

font-style:italic;

}

/**

* Correct the font size and margin on `h1` elements within `section` and

* `article` contexts in Chrome, Firefox, and Safari. 改良Chrome,Firefox,Safari浏览器下`section`和`article`节点内的h1的字体大小和margin

*/

h1{

font-size:2em;

margin:0.67em 0;

}

/**

* Add the correct background and color in IE 9-.改善补充 IE 9- 下的 background and color

*/

mark{

background-color:#ff0;

color:#000;

}

/**

* Add the correct font size in all browsers.针对富有浏览器改进补充font size

*/

small{

font-size:80%;

}

/**

* Prevent `sub` and `sup` elements from affecting the line height in

* all browsers.防止`sub` 和 `sup`要素影响行高,针对富有浏览器

*/

sub,

sup{

font-size:75%;

line-height:0;

position:relative;

vertical-align:baseline;

}

sub{

bottom:-0.25em;

}

sup{

top:-0.5em;

}

/* Embedded content 内嵌成分

========================================================================== */

/**

* Remove the border on images inside links in IE 10-.去除 IE 10- a 内部 img 成分默许的边框

*/

img{

border-style:none;

}

/**

* Hide the overflow in IE.修复 IE9 中的 overflow 的奇怪表现

*/

svg:not(:root){

overflow:hidden;

}

/* Grouping content 群组成分

========================================================================== */

/**

* 1. Correct the inheritance and scaling of font size in all browsers.1. 改正在具备浏览器的字体和字体大小的再而三和缩放

* 2. Correct the odd `em` font sizing in all browsers.2.更正在有着浏览器的‘em’字体大小

*/

code,

kbd,

pre,

samp{

font-family:monospace, monospace; /* 1 */

font-size:1em; /* 2 */

}

/**

* Add the correct margin in IE 8.修改补充IE8下的margin

*/

figure{

margin:1em 40px;

}

/**

* 1. Add the correct box sizing in Firefox.1.改进补充Firefox下的box-sizing

* 2. Show the overflow in Edge and IE.2.在Edge 和 IE下溢出突显

*/

hr{

box-sizing:content-box; /* 1 */

height:0; /* 1 */

overflow:visible; /* 2 */

}

/* Forms 表单

========================================================================== */

/**

* Change font properties to `inherit` in all browsers (opinionated).改字体属性为三回九转“inherit”,针对富有浏览器(自定义)

*/

button,

input,

select,

textarea{

font:inherit;

}

/**

* Restore the font weight unset by the previous rule.恢复生机font weight撤废早先的规行矩步

*/

optgroup{

font-weight:bold;

}

/**

* Show the overflow in IE.在IE下溢出显示

* 1. Show the overflow in Edge.1.在Edge下溢出显示

* 2. Show the overflow in Edge, Firefox, and IE.2.在艾德ge, Firefox, 和 IE下溢出展现

*/

button,

input,/* 1 */

select{ /* 2 */

overflow:visible;

}

/**

* Remove the margin in Safari.移除Safari下的margin

* 1. Remove the margin in Firefox and Safari.1.移除Safari和Firefox下的margin

*/

button,

input,

select,

textarea{ /* 1 */

margin:0;

}

/**

* Remove the inheritence of text transform in Edge, Firefox, and IE.移除在Edge, Firefox, 和 IE里的text-transform的继承

* 1. Remove the inheritence of text transform in Firefox.1.移除在Firefox里text-transform的继承

*/

button,

select{ /* 1 */

text-transform:none;

}

/**

* Change the cursor in all browsers (opinionated).改光标为手型,针对具备浏览器(自定义)

*/

button,

[type="button"],

[type="reset"],

[type="submit"]{

cursor:pointer;

}

/**

* Restore the default cursor to disabled elements unset by the previous rule.苏醒disabled元素的暗许光标,废除从前的规行矩步。

*/

[disabled]{

cursor:default;

}

/**

* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`

*    controls in Android 4.1. 防卫WebKit的bug(2)破坏原生`audio‘和 `video ` 调控条,在安卓4的本子下

* 2. Correct the inability to style clickable types in iOS.2. 修正在IOS下不得点击的bug

*/

button,

html [type="button"],/* 1 */

[type="reset"],

[type="submit"]{

-webkit-appearance:button; /* 2 */

}

/**

* Remove the inner border and padding in Firefox.移除Firefox中的border和padding

*/

button::-moz-focus-inner,

input::-moz-focus-inner{

border:0;

padding:0;

}

/**

* Restore the focus styles unset by the previous rule.通过恢复生机原先的平整撤消设置的focus样式。

*/

button:-moz-focusring,

input:-moz-focusring{

outline:1px dotted ButtonText;

}

/**

* Change the border, margin, and padding in all browsers (opinionated).改善border, margin, 和 padding,针对全体的浏览器(自定义)

*/

fieldset{

border:1px solid #c0c0c0;

margin:0 2px;

padding:0.35em 0.625em 0.75em;

}

/**

* 1. Correct the text wrapping in Edge and IE.1.修改Edge和IE中的文字换行。

* 2. Correct the color inheritance from `fieldset` elements in IE.2.纠正在IE浏览器`fieldset`要素的书体颜色承袭。

* 3. Remove the padding so developers are not caught out when they zero out

*    `fieldset` elements in all browsers.3. 移除padding针对富有浏览器

*/

legend{

box-sizing:border-box; /* 1 */

color:inherit; /* 2 */

display:table; /* 1 */

max-width:100%; /* 1 */

padding:0; /* 3 */

white-space:normal; /* 1 */

}

/**

* Remove the default vertical scrollbar in IE.移除IE浏览器中私下认可的垂直滚动条

*/

textarea{

overflow:auto;

}

/**

* 1. Add the correct box sizing in IE 10-.1.更改补充box sizing,在IE 10-浏览器

* 2. Remove the padding in IE 10-.2.移除padding在IE 10-浏览器

*/

[type="checkbox"],

[type="radio"]{

box-sizing:border-box; /* 1 */

padding:0; /* 2 */

}

/**

* Correct the cursor style of increment and decrement buttons in Chrome.改正在Chrome依次增加和依次减少按键光标准样本式

*/

[type="number"]::-webkit-inner-spin-button,

[type="number"]::-webkit-outer-spin-button{

height:auto;

}

/**

* Correct the odd appearance of search inputs in Chrome and Safari.矫正search在Chrome和Safari奇怪的样板

*/

[type="search"]{

-webkit-appearance:textfield;

}

/**

* Remove the inner padding and cancel buttons in Chrome on OS X and

* Safari on OS X.移除padding和撤回按键在Chrome OS X 和 Safari OS X。

*/

[type="search"]::-webkit-search-cancel-button,

[type="search"]::-webkit-search-decoration{

-webkit-appearance:none;

}

压缩版:

/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */

html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}

body{margin:0}

article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}

audio,canvas,progress,video{display:inline-block}

audio:not([controls]){display:none;height:0}

progress{vertical-align:baseline}

[hidden],template{display:none}

a{background-color:transparent}

a:active,a:hover{outline-width:0}

abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}

b,strong{font-weight:inherit;font-weight:bolder}

dfn{font-style:italic}

h1{margin:.67em 0;font-size:2em}

mark{background-color:#ff0;color:#000}

small{font-size:80%}

sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0}

sub{bottom:-.25em}

sup{top:-.5em}

img{border-style:none}

svg:not(:root){overflow:hidden}

code,kbd,pre,samp{font-size:1em;font-family:monospace}

figure{margin:1em 40px}

hr{overflow:visible;box-sizing:content-box;height:0}

button,input,select,textarea{font:inherit}

optgroup{font-weight:700}

button,input,select{overflow:visible}

button,input,select,textarea{margin:0}

button,select{text-transform:none}

[type=button],[type=reset],[type=submit],button{cursor:pointer}

[disabled]{cursor:default}

[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}

button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}

button:-moz-focusring,input:-moz-focusring{outline:1px dotted ButtonText}

fieldset{margin:0 2px;padding:.35em .625em .75em;border:1px solid silver}

legend{display:table;box-sizing:border-box;padding:0;max-width:100%;color:inherit;white-space:normal}

textarea{overflow:auto}

[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}

[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}

[type=search]{-webkit-appearance:textfield}

[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}

本文由pc28.am发布于前端技术,转载请注明出处:0英汉对照版,源码解读

上一篇:再聊移动端页面的适配,分享手淘过年项目中采 下一篇:没有了
猜你喜欢
热门排行
精彩图文