转载自:Hi, laser! @44ux.com
Bootstrap 更新之后,新版CSS Rest增色不少,而姬光同学的注释版更是让人颇为赞叹,故转之。
Nomalize.css 是一个支持 html5 标准的 CSS Rest,可以页面中的元素在各浏览器中表现尽量一致。目前 nomalize.css 有两个版本,一个版本包含了支持旧浏览器的 reset,另外一个版本只支持 IE 8+, Firefox 4+, Safari 5+, Opera, Chrome,这两个版本都可以在 官方网站 上下载。
这里 laser 取最新的2.0.1版本,将其中的注释简单翻译一下,方便大家学习。
/*! normalize.css v2.0.1 | MIT License | git.io/normalize */ /* ========================================================================== HTML5 display definitions ========================================================================== */ /* * 更正IE 8/9中未定义的‘block’元素显示。 */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } /* * 更正IE 8/9中未定义的‘inline-block’元素显示 */ audio, canvas, video { display: inline-block; } /* * 防止现代浏览器将没有controls属性的的‘audio’元素显示出来 * 移除 iOS 5 设备中多余的高度 */ audio:not([controls]) { display: none; height: 0; } /* * 校正IE 8/9中‘hidden’属性不起作用的问题 */ [hidden] { display: none; } /* ========================================================================== 基本 ========================================================================== */ /* * 1. 将默认字体设置为 sans-serif * 2. 在不禁止用户缩放的情况下避免iOS设备方向调整后自动校正字体大小 */ html { font-family: sans-serif; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ } /* * 移除缺省的外边距 */ body { margin: 0; } /* ========================================================================== Links ========================================================================== */ /* * 校正‘outline’在Chrome和其他浏览器间的不一致 */ a:focus { outline: thin dotted; } /* * 增强在所有浏览器中聚焦和鼠标悬停时的可读性 */ a:active, a:hover { outline: 0; } /* ========================================================================== 排版 ========================================================================== */ /* * 校正 Firefox 4+,Safari 5 和 Chrome 中‘section’和‘article’内的‘h1’字体大小 */ h1 { font-size: 2em; } /* * 校正IE 8/9, Safari 5 和 Chrome中样式不呈现的问题 */ abbr[title] { border-bottom: 1px dotted; } /* * 校正 Firefox 4+, Safari 5 和 Chrome 中‘bolder’的样式 */ b, strong { font-weight: bold; } /* * 校正 Safari 5 和 Chrome 中样式不呈现的问题 */ dfn { font-style: italic; } /* * 校正 IE 8/9 中样式不呈现的问题 */ mark { background: #ff0; color: #000; } /* * 更正 Safari 5 和 Chrome 中奇怪的字体设置 */ code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } /* * 增强所有浏览器中预格式化文本的可读性 */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } /* * 设置一致的引用类型 */ q { quotes: "\201C" "\201D" "\2018" "\2019"; } /* * 校正所有浏览器中易变且不一致的字体大小 */ small { font-size: 80%; } /* * 防止所有浏览器中的‘sub’和‘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 中嵌入到‘a’元素时的边框 */ img { border: 0; } /* * 更正 IE 9 中奇怪的‘overflow’表现 */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /* * 更正 IE 8/9 和 Safari 5 中外边距不展示的问题 */ figure { margin: 0; } /* ========================================================================== 表单 ========================================================================== */ /* * 定义一致的边框、外边距和内边距 */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /* * 1. 更正 IE 8/9 中颜色不继承的问题 * 2. 移除内边距确保人们在将fieldset设置为0时不会大跌眼镜 */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /* * 1. 更正所有浏览器中字体不继承的问题 * 2. 更正所有浏览器中字号不继承的问题 * 3. 更正 Firefox 4+, Safari 5 和 Chrome 中外边距不同的问题 */ button, input, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ } /* * 更正 Firefox 4+ 用户代理样式表(UA stylesheet)中在‘input’上 * 设置‘line-height’时使用‘!important’的问题 */ button, input { line-height: normal; } /* * 1. 避免 Android 4.0.* 中的 WebKit bug ,该bug会破坏原生的‘audio * 和‘video’控制器 * 2. 更正 iOS 中无法设置可点击的‘input’的问题 * 3. 增强图片类型以及其他类型的‘input’中指针的可用性以及样式的一致性 */ button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /* * 重置disabled元素的默认指针样式 */ button[disabled], input[disabled] { cursor: default; } /* * 1. 调整 IE 8/9 box sizing 被设置为 ‘content-box’ 的问题 * 2. 移除 IE 8/9 中多余的内边距 */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /* * 1. 校正 Safari 5 和 Chrome 中 ‘appearance’ 被设置为 ‘searchfield’ 的问题 * 2. 校正 Safari 5 和 Chrome 中 ‘box-sizing’ 被设置为 `‘border-box’ 的问题 * (include `-moz` to future-proof) */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /* * 移除 OS X 中 Safari 5 和 Chrome 内部的内边距以及搜索框的取消按钮 */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* * 移除 Firefox 4+ 内部的内边距 */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* * 1. 移除 IE 8/9 中默认的垂直滚动条 * 2. 增强所有浏览器中的对对齐以及可读性 */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ========================================================================== 表格 ========================================================================== */ /* * 移除单元格间大部分的间距 */ table { border-collapse: collapse; border-spacing: 0; }
这个版本并没有包含IE6/7等古老的浏览器,感兴趣的同学可以下载1.0.1版。