深度了解bootstrap源码之sass篇（十二）

前言

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

研究对象

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

normalize.scss

源文：

/*! 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 :继承父元素属性。
• 注④ 超文本标记标签详解
  • HTML em,strong,dfn,code,samp,kbd,var,cite 标签
  • HTML pre 标签
• 注⑤ appearance: normal|icon|window|button|menu|field; 主流浏览器不支持，需带内核前缀。
  • appearance: normal|icon|window|button|menu|field;
  • normal：将元素呈现为常规元素。
  • icon： 将元素呈现为图标（小图片）。
  • window： 将元素呈现为视口。
  • button： 将元素呈现为按钮。
  • menu： 将元素呈现为一套供用户选择的选项。
  • field： 将元素呈现为输入字段。