Normalize.CSS 相比于传统的 CSS reset 来说, 它是一种现代的, 为 html5 准备的优质替代方案. 它使浏览器更佳一致的呈现所有元素, 并且符合现代标准, 它只针对那些需要规范化的样式. 它非常非常的轻量级, 以至于源代码也只有 6KB 左右. 现在已经被用于 Twitter Bootstrap,HTML5 Boilerplate,GOV.UK,Rdio,CSS Tricks 以及许许多多其他框架, 工具和网站上.
概述
Normalize.CSS 是一个 CSS resets 代替方案. 经过 @necolas 和 @jon neal 花了几百个小时来努力研究不同浏览器的默认样式的差异, 这个项目终于变成了现在这样.
Normalize.CSS 的目标:
保护有用的浏览器默认样式而不是去掉它们;
正常化样式来服务于更多的 HTML 元素;
修复浏览器的 Bug 并确保浏览器的一致性;
优化可用性通过细微的改进;
解释代码通过注释和详细的文档;
它支持大部分浏览器 (包括移动端浏览器), 包括规范了 HTML5 元素, 排版, 列表, 嵌入内容, 表单和表格的 CSS.
尽管该项目基于规范化原则, 但是还是在适合的地方使用了更佳实用的默认值.
Normalize vs Reset
我们是有必要去了解更多的关于 Normalize 和传统的 CSS resets 之间的区别的:
Normalize.CSS 保护有用的默认值
Resets 几乎将所有元素的默认样式重新设置, 强行将默认样式设置了同样的视觉效果. 相比于 Normalize.CSS, 它保留了浏览器的许多默认样式. 这意味着你不必为所有常见的排版元素重新声明样式.
当 HTML 元素在不同的浏览器中有不同的默认样式时, Normalize.CSS 的目的在于让这些样式更佳的一致并符合现代浏览器的标准.
Normalize.CSS 修复了浏览器的 Bug
它解决了桌面和移动端浏览器的常见 bug, 当然这些 bug 超出了 Resets 的范围. 这些 bug 包括 HTML5 元素的显示设置, 预格式化文本的字体大小, IE9 中 SVG 的溢出以及浏览器和操作系统中众多表单相关的 bug.
例如, 下面是 Normalize.CSS 修复了 HTML5 input 的 search 类型的跨浏览器一致性和样式的 bug:
- /**
- * 1. Addresses appearance set to searchfield in S5, Chrome
- * 2. Addresses box-sizing set to border-box in S5, Chrome (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;
- }
- /**
- * Removes inner padding and search cancel button in S5, Chrome on OS X
- */
- input[type="search"]::-webkit-search-decoration,
- input[type="search"]::-webkit-search-cancel-button {
- -webkit-appearance: none;
- }
Resets 通常错误的将所有浏览器都一致的设置元素的呈现方式. 特别是对于表单来说, Normalize.CSS 会提供更佳重要的帮助.
Normalize.CSS 不会让你的调试工具杂乱无章
使用 Reset 时, 最大的灾难是在浏览器 CSS 调试工具中使用大段的继承链.
在 Normalize.CSS 中不会存在这样的问题, 因为在我们的准则中对多选择器的使用是非常谨慎的, 我们只会有目的地对元素设置样式.
Normalize.CSS 是模块化的
这个项目已经拆分成多个相对独立的部分, 让你更佳容易的区分哪些元素设置了特定的样式. 此外, 它可以让你去除你不需要的部分 (例如, 表单模块).
Normalize.CSS 拥有丰富的文档
Normalize.CSS 的代码是基于跨浏览器的设计和系统性的测试. 它在 GitHub Wiki 上有详细的文档和说明. 这意味着你可以知道每一行代码的意义: 为什么有这些代码, 浏览器之间的不同并且可以简单的运行在自己的测试中.
这个项目旨在帮助人们了解浏览器如何在默认情况下渲染元素, 并且使得它们更佳容易参与和改进.
如何使用
首先, 安装或者从 GitHub 中下载 Normalize.CSS, 接下来有两种途径来使用它:
用 Normalize.CSS 当作你自己的基础样式, 自定义样式值来符合设计师的标准;
引入 Normalize.CSS 源码并从基础上开始构建, 有必要时需要用到你自己的 CSS 覆盖默认值.
结束语
Normalize.CSS 在适用范围上与 CSS reset 上有很大的不同之处. 我们值得尝试一下, 看看它是否符合你的开发方式和偏好.
[坚强的一俢]
来源: http://www.jianshu.com/p/68db995c7e93