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 上有很大的不同之处。我们值得尝试一下,看看它是否符合你的开发方式和偏好。
〖坚强的一俢〗