Normalize.css 简介

github:http://necolas.github.io/normalize.css/

浏览器支持情况:Chrome, Firefox, Opera, Safari 6+, IE 8+;

Reset CSS 简介

Eric的Reset CSS:http://meyerweb.com/eric/tools/css/reset/

CSS Reset到Normalize.css的历史

为什么会有CSS Reset的存在呢?那是因为早期的浏览器支持的CSS规范不同,导致渲染页面时效果不一致,会出现很多兼容性问题。

于是有人提出CSS Reset,其作用就是清除所有浏览器默认样式,让它一切归零!

* { margin:0; padding:0 }

但是这种暴力清零的CSS Reset,会带来不少的副作用,如:

  1. 带来性能问题;
  2. 使用通配符存在隐性问题;
  3. 过渡的标签重置等于画蛇添足;
  4. 过渡的标签重置导致语言元素失效;
    … and so on。

由于暴力清零的CSS Reset带来的副作用,于是No CSS Reset 思想开始提出,不再提倡使用暴力归零的方法。

后来,YUI更新了CSS Reset,还配套了 cssfonts.css 和 cssbase.css。cssreset.css只负责清除默认样式,而cssfonts.css和 cssbase.css 则负责将一些元素的默认样式再重设回来,这样就消除了之前的争议,这一方案迅速被大家接受了,又开始愉快的拷贝使用起来。

现在流行的CSS Reset如流行的Eric的CSS Reset,都是采用清空默认样式以后又找回部分样式。虽然依旧会带来一些副作用,但是也能被大家接受。

@necolas@jon_neal 两位大牛花了几百个小时来研究不同浏览器的默认样式的差异而得出的Normalize.css,兼容性更好,而且在默认的HTML元素样式上提供了跨浏览器的高度一致性。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。目前Normalize.css无疑已经成为了CSS Reset的最佳替代方案。

Normalize.css和Reset CSS的区别

reset css的目的,是将所有的浏览器的自带样式重置掉,这样更易于保持各浏览器渲染的一致性;

normalize.css的理念则是尽量保留浏览器的默认样式,不进行太多的重置。

NoCSS Reset的核心作用就是暴力清零;那么作为后者的Normalize.css,到底有什么优势可以完全取代前者呢?

1. Normalize.css 保护了有价值的默认值

Reset通过为几乎所有的元素施加默认样式,强行使得元素有相同的视觉效果。相比之下,Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时,Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。

2. Normalize.css 修复了浏览器的bug

它修复了常见的桌面端和移动端浏览器的bug。这往往超出了Reset所能做到的范畴。关于这一点,Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。

3. Normalize.css 不会让你的调试工具变的杂乱

使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链,如下图所示。在Normalize.css中就不会有这样的问题,因为在我们的准则中对多选择器的使用时非常谨慎的,我们仅会有目的地对目标元素设置样式。

4. Normalize.css 是模块化的

这个项目已经被拆分为多个相关却又独立的部分,这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分(比如表单的一般化)。

5. Normalize有大量的文档

Normalize.css是经由大量的跨浏览的研究和系统的测试写成的,该文件有的丰富的注解,还有你可以在Github Wiki上面查看相关的文档。这样你就可以查看相关的代码的作用,为何被包含进来,浏览器之间的差别还有你可以更容易地自己去测试。

本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/frontend/css/337