深度了解bootstrap源码之sass篇(十二)

前言

这一章主要学习normalize(标准化样式)。这一章学习目的是了解到各浏览器的默认样式,以及如何兼容、标准化不同浏览器的默认样式。在这一篇学习中,有很多已熟知的html5常见属性,也有很多冷门偏僻的属性,我都一一标注了定义和用途用法,几乎源自W3C,目的是了解html5标签知识,加深印象,刷新见解

研究对象

normalize.scss;bootstrap的初始化依赖样式表有三个、分别是normalize、print、glyphicons。normalize标签标准化,print打印预览页模式样式,glyphicons字体图标规范。

normalize.scss

源文:

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html {
font-family: sans-serif; // 设置默认font-family属性值为 sans-serif.
-ms-text-size-adjust: 100%; // 注①:IOS 页面字体缩放设置
-webkit-text-size-adjust: 100%; // 2
}
//
// 移除默认margin值
//
body {
margin: 0;
}
// HTML5 下 display 属性的标准化
// ==========================================================================
// 以下标签添加属性值block的原因是:
// 在IE10/11和firefox中,没有明确的摘要/总结/或是概述标准;
// 在IE8/9中,没有明确的定义;
// 在IE11中,没有被明确的定义为元素的默认值。
// 注②
article, // 定义独立的自包含内容.用于论坛帖子、报纸文章、博客条目、用户评论。
aside, //定义其所处内容之外的内容,aside 的内容应该与附近的内容相关。
details,// 用于描述文档或文档某个部分的细节。
figcaption,//定义 figure 元素的标题,该元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
figure,// 规定独立的流内容(图像、图表、照片、代码等等),元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
footer, // 定义文档或节的页脚,可以在一个文档中多次使用。
header, // 定义文档的页眉(介绍信息)。
hgroup, // 用于对网页或区段(section)的标题进行组合。
main, // 规定文档的主要内容,元素中的内容对于文档来说应当是唯一的。元素不能是以下元素的后代:<article>、<aside>、<footer>、<header> 或 <nav>。
menu,// 定义命令的列表或菜单。用于上下文菜单、工具栏以及用于列出表单控件和命令。目前主流浏览器都不支持
nav, // 定义导航链接的部分
section, // 定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
summary { // 包含 details 元素的标题,是details的子元素。 summary仅safari6和chrome支持,有折叠展开的的神奇功能哦。
display: block;
}
// 标签属性相关说明:
// 设置display: inline-block的原因是一下标签在IE 8/9中,没有被明确定义。
// 在Chrome/Firefox/Opera中,vertical-align: baseline属性标准化了progress标签的展示,使其可以以垂直居中的方式展示。
// 注②
audio, // 定义声音,比如音乐或其他音频流
canvas, // 定义图形,比如图表和其他图像,标签只是图形容器,必须使用脚本来绘制图形。
progress, // 标示任务的进度(进程),进度条。不支持IE9-及之前
video { // 定义视频,比如电影片段或其他视频流
display: inline-block;
vertical-align: baseline;
}
//
// 防止在主流浏览器下,没有控制器(controls属性)的浏览器被显示出来 ,因为默认元素属性是displaying `audio`。
// IOS5设备删除不必要的高度
//
audio:not([controls]) {
display: none;
height: 0;
}
//
// IE 8/9/10 下的[hiddem]属性兼容.
// IE 8/9/11 下隐藏 `template` 元素 , Safari, 和 Firefox < 22.
//
[hidden],
template {
display: none;
}
// 链接
// ==========================================================================
//
// IE10下移除选中(:active)样式时出现的灰色背景颜色
//
a {
background-color: transparent;
}
//
// 重置鼠标选中、悬停在任何浏览器下的outline属性,提高文档可读性。
//
a:active,
a:hover {
outline: 0;
}
// 文本语义化
// ==========================================================================
//
// 8/9/10/11, Safari, 和 Chrome无以下样式
//
abbr[title] {
border-bottom: 1px dotted;
}
//
// Firefox 4+, Safari, 和 Chrome下设置bold属性
//
b,
strong {
font-weight: bold;
}
//
// Safari and Chrome下兼容italic属性样式
//
dfn {
font-style: italic;
}
//
// Safari, and Chrome下,h1的font-size和margin属性在section和artical的上下文兼容处理
//
h1 {
font-size: 2em;
margin: 0.67em 0;
}
//
// IE 8/9 下没有以下样式的兼容处理
//
mark {
background: #ff0;
color: #000;
}
//
// 统一所有浏览器下small的font-size属性值的兼容处理,各浏览器对samll标签的font-size属性值不一致
//
small {
font-size: 80%;
}
//
// 在各浏览器下,防止 `sub` and `sup` 影响 `line-height`.
//
sub, // 下标
sup { // 上标
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
// 嵌入内容的兼容处理
// ==========================================================================
//
// IE 8/9/10里移除a元素下的border样式
//
img {
border: 0;
}
//
// IE 9/10/11下 svg:not的hidden值兼容
//
svg:not(:root) {
overflow: hidden;
}
// 分组内容的兼容处理
// ==========================================================================
//
// 目前IE 8/9 and Safari下的figure元素没有设置margin属性值
//
figure {
margin: 1em 40px;
}
//
// 处理Firefox和其它浏览器下的不同样式,标准化hr、火狐浏览器下该标准的属性兼容。
//
hr {
-moz-box-sizing: content-box;
box-sizing: content-box; // 注③
height: 0;
}
//
// 所有浏览器下,标准化pre标签的overflow属性。
//
pre {
overflow: auto;
}
//
// 兼容处理在所有浏览器中以下元素渲染时奇数单位字体显示差异。
// 注④
code, // 计算机代码文本
kbd, // 键盘文本
pre, // 预格式化的文本,被包围在 <pre> 标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
samp { // 定义样本文本。
font-family: monospace, monospace; // 将通用monospace, monospace作为首要识别字体。
font-size: 1em;
}
// 表格
// ==========================================================================
//
// 已知的限制:默认情况下,Chrome和Safari OS X的允许非常有限
// “select”的样式,除非设置“border”属性。
//
//
// 1.正确颜色不被继承.
// 已知问题:影响了禁用元素的颜色
// 2. 正确的字体属性未被继承.
// 3. 处理Firefox 4+, Safari, and Chrome下不同的margin值
//
button,
input,
optgroup,
select,
textarea {
color: inherit; // 1
font: inherit; // 2
margin: 0; // 3
}
//
// 处理IE 8/9/10/11下`overflow`设置值为 `hidden`的兼容性。.
//
button {
overflow: visible;
}
//
// 处理不一致的`text-transform`属性继承`button` 和 `select`
// 所有其它的表单控制器元素不继承`text-transform`的值
// 正确继承Firefox, IE 8/9/10/11, and Opera下`button`样式
// 正确继承Firefox,下`select`样式
//
button,
select {
text-transform: none;
}
//
// 1.避免在安卓4.0.*的WebKit漏洞;来自第2点导致破坏原生的`audio`和`video`控制器.
// 2. 解决在iOS下点击`input`类型不能输入正确
// 3. 提高图像类型之间光标样式的可用性和一致性
//
button,
html input[type="button"], // 1
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; // 2
cursor: pointer; // 3
}
//
// 给有disabled属性值的元素设置默认的cursor值
//
button[disabled],
html input[disabled] {
cursor: default;
}
//
// 移除Firefox 4+下button和input内部的内边距和border值
//
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
//
// 处理Firefox 4+下`input`属性设置`line-height`使用`!important`时与浏览器默认样式的冲突
//
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
}
//
// (这一段我的理解可能存在误区:)修复chrome浏览器下'input'的'font-size'值的光标样式,解决输入框内光标大小变化的样式问题,防止按钮的默认样式冲突。
//
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
//
// 1. 兼容处理Safari 和 Chrome下 `appearance`属性。
// 2. 兼容处理Safari 和 Chrome下`box-sizing` 设置 `border-box`值(考虑未来有可能有-moz-box-sizing属性).
//
input[type="search"] {
-webkit-appearance: textfield; // 1(改变按钮和其他控件的外观,使其类似于原生控件。)
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; // 2
box-sizing: content-box;
}
//
// chrom的appearance属性兼容处理:
// 删除Safari和Chrome OS X下内部填充和搜索取消按钮。
// Safari(不是chrime)当搜索类型的输入框有内边距(和带文本框的外观)时剪辑取消按钮,
// appearance: normal|icon|window|button|menu|field; 注释⑤
//
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
//
// 标准化 border, margin, and padding属性值。
//
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
//
// 1. 解决IE 8/9/10/11下border-color属性没有被正确继承的兼容问题.
// 2. 移除fieldset下无内容时元素间距带来的兼容问题
//
legend { // fieldset的子元素,为 fieldset 元素定义标题。
border: 0; // 1
padding: 0; // 2
}
//
// IE 8/9/10/11下移除默认垂直滚动条样式.
//
textarea {
overflow: auto;
}
//
// 不要使用inherit属性值继承font-weight属性。
// Chrome and Safari on OS X下该默认值不能保证安全的改变。
//
optgroup { // 定义选项组。用于组合选项。把相关的下拉菜单选项组合在一起,当您使用一个长的选项列表时,对相关的选项进行组合会使处理更加容易。是select标签的子标签,配合disabled属性表示该组下所有选项禁用
font-weight: bold;
}
// 表单
// ==========================================================================
//
// 移除表单元和格子之间的间距
//
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}

相关说明

  • 注①
    • 语法:text-size-adjust:auto | none | [percentage]
      • auto:本大小根据设备尺寸进行调整。
      • none:文本大小不会根据设备尺寸进行调整。
      • [percentage]:用百分比来指定文本大小在设备尺寸不同的情况下如何调整。
    • 特点:
      • 检索或设置移动端页面中对象文本的大小调整。
      • 该属性只在移动设备上生效;
      • 如果你的页面没有定义meta viewport,此属性定义将无效;
      • IOS下要附上属性-webkit-
  • 注② HTML5 元素定义和用法 ↓
    • article:定义独立的自包含内容.用于论坛帖子、报纸文章、博客条目、用户评论
    • aside:定义其所处内容之外的内容,aside 的内容应该与附近的内容相关。
    • details:描述文档或文档某个部分的细节。目前只兼容chorme、Safari 6
    • figcaption:定义 figure 元素的标题(caption)。元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。
    • figure:独立的流内容(图像、图表、照片、代码等等)。元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
    • footer:定义文档或节的页脚。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。可以在一个文档中使用多个footer元素。
    • header:定义文档的页眉(介绍信息)。
    • hgroup:用于对网页或区段(section)的标题进行组合。
    • main:规定文档的主要内容。元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。在一个文档中,不能出现一个以上的main元素。main元素不能是以下元素的后代:article、aside、footer、header 或 nav。目前IE不支持该标签
    • menu:定义命令的列表或菜单。标签用于上下文菜单、工具栏以及用于列出表单控件和命令。目前所有主流浏览器都不支持该属性。
    • nav:定义导航链接的部分。
    • section:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
    • summary:标签包含 details 元素的标题,”details” 元素用于描述有关文档或文档片段的详细信息。目前chorme和Safari 6支持
    • audio:定义声音,比如音乐或其他音频流。
    • canvas:定义图形,比如图表和其他图像。标签只是图形容器,所以必须使用脚本来绘制图形。
    • progress:标示任务的进度(进程),该属性与js配合使用,要了解该属性请务必细看这里 W3C - progress
    • video:定义视频,比如电影片段或其他视频流。可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。
    • HTML所有新增属性请戳这里 → W3C召唤♂术
  • 注③:box-sizing 属性
    • content-box:在已设置的宽高值内绘制盒子,内外边距在设置的宽高度外绘制,内外边距不计算在一设置的宽高值内。
    • border-box:在已设置的宽高值内绘制盒子,内外边距在设置的宽高度内绘制,内外边距将计算在内。谋大腿说大量使用这个值影响浏览器渲染页面的性能,有待实践得真假。
    • inherit :继承父元素属性。
  • 注④ 超文本标记标签详解
  • 注⑤ appearance: normal|icon|window|button|menu|field; 主流浏览器不支持,需带内核前缀。
    • appearance: normal|icon|window|button|menu|field;
    • normal:将元素呈现为常规元素。
    • icon: 将元素呈现为图标(小图片)。
    • window: 将元素呈现为视口。
    • button: 将元素呈现为按钮。
    • menu: 将元素呈现为一套供用户选择的选项。
    • field: 将元素呈现为输入字段。