CSS Reset的历史(一）

当艺术家开始准备创作一幅新的画作时，他们不会先去拿镉红或是酞菁蓝的颜料，而是会首先准备好一张新的画布，为什么？因为对于他们来说，首先需要确保新画布足够平展并且洁净。

许多Web设计师也喜欢使用CSS Reset来”准备“他们的浏览器画布，以确保他们的设计能够在不同的浏览器和系统下拥有同样的呈现。

这篇文章是关于CSS reset的系列文章的第一篇。

• 第一部分，CSS Reset的历史
• 第二部分，CSS Resets完全指南
• 第三部分，你应该使用CSS reset吗？

当你使用CSS Reset的时候，你实际上覆盖了不同浏览器用来显示网页的默认样式表，即使你的页面不使用任何CSS，你的站点的样式仍然会在某种程度上受到浏览器的默认样式表的影响。

但问题就是每个浏览器的默认样式表都有一些虽不易察觉但却真实存在的差异，使用CSS reset，你可以为CSS元素的基本属性设定一个基础值，以保证他们在不同浏览器下也可以渲染出同样的效果。

即使是一些最常见的元素，比如超链接（<a>)，图片（<img>)，标题（<h1>到<h6>)，以及各种元素的margin和padding，在不同浏览器下的默认样式都不相同。

那么，到底哪个浏览器是正确的呢？Firefox还是IE？这并不重要，重要的是如果你不为段落（<p>)设置margin和padding样式，那么在不同浏览器上，它们和其它元素之间的间距就会大相径庭。—— Jacob Gube，Six Revisions创始人

或许，你可以通过细心学习这张不同浏览器的默认样式表来解决这个问题，但不幸的是，它没有包含IE6（CSS的噩梦）。

谁在使用Resets

根据CSS-Tricks的Chris Coyier在2008年做得一个调查，占据多数的Web设计师都至少在使用一种reset（Coyier的选项相当广泛，调查结果显示大多数人都在使用Reset）。

这个调查尽管不是非常科学和全面，但还是具有一定的参考价值：

• 27% 的人使用Eric Meyer的某个版本的Reset
• 26% 表明他们不知道什么是CSS reset
• 15% 的人使用”hard reset“，或是某种使用通配符的reset版本
• 14% 的人使用了某个CSS框架中的reset
• 13% 的人使用他们自己写的reset
• 4% 的人出于某种考虑没有使用reset

Coyier对于Meyer的reset排名第一并不感到吃惊，他认为这个reset”流行，成熟并且高效“，或许是对结果有些吃惊，Meyer在回复中评论道：

“哈，我完全没料到会是这样，我猜想可能框架中的reset会占至少半数，这让我感到压力很大！天啦！”

早期的CSS Reset

就我所知，我们现在称之为CSS reset的这个概念最早是在2004被人提出的，并且是以两种完全不同的方式。

undohtml.css

第一个是由传奇开发者Tentek Celik发布的UndoHTML.css，它对浏览器默认样式表中的许多元素的属性进行了清理。

/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
/*   http://creativecommons.org/licenses/by/2.0                   */
/* This style sheet is licensed under a Creative Commons License. */

/* Purpose: undo some of the default styling of common (X)HTML browsers */

/* link underlines tend to make hypertext less readable,
   because underlines obscure the shapes of the lower halves of words */
:link,:visited { text-decoration:none }

/* no list-markers by default, since lists are used more often for semantics */
ul,ol { list-style:none }

/* avoid browser default inconsistent heading font-sizes */
/* and pre/code too */
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }

/* remove the inconsistent (among browsers) default ul,ol padding or margin  */
/* the default spacing on headings does not match nor align with
   normal interline spacing at all, so let's get rid of it. */
/* zero out the spacing around pre, form, body, html, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
/*  nonetheless strip their margin and padding as well */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }

/* whoever thought blue linked image borders were a good idea? */
a img,:link img,:visited img { border:none }

/* de-italicize address */
address { font-style:normal }

/* more varnish stripping as necessary... */

在2010年10月给我的一封邮件中，Celik确认了他可能是第一个提出这个概念的人，“我确信我是在2004的一篇Blog帖子中发明/提出/分享了resetting css这个概念的（尽管当时不是叫这个名字）”，Celik说到。

Celik的Reset移除了链接的下划线，带链接图片的边框，并且设置了Heading，以及段落的字体大小为1em，在2009年，基于一些我没法理解的理由，技术作者以及设计师Jason Cranford Teague将Celik的Reset描绘为“一半成功一半疯狂”。

Hard reset

第二个方式是由Web设计师以及开发者Andrew Krespanis提出的Hard reset，它主要的目的就是解决浏览器的默认margin和padding差异问题。

* {
    padding:0;
    margin:0;
}

当被问到Hard reset时，Krespanis沉思片刻，然后说道：“就是这一行CSS代码让我的职业生涯拥有了一个非常不错的开端，现在回想起来觉得真有些不可思议”。

“毫无疑问没有任何人向我提过这个reset的想法，最早，我是在codingforums.com上为了劝说那些初学者不要因为浏览器的默认margin和padding而过多使用div，并向他们建议这个hard reset的方法的。"Krespanis说，”当时我也在给其他人的示范代码中使用了hard reset，但是我真正将它用到网站中还是在我向初学者推荐之后，Eric Meyer在那时也提出了一个类似的想法，并且他一直专注于提供一个高质量且合理的覆盖浏览器默认样式样式表”

真正的Undoing html.css

Celik的reset很快引起了CSS大牛Eric Meyer的注意，他从Celik的工作开始，并对其进行了改进，很快他就发布了一个正式版本，在同一次访谈中，Celik提到，“大约一周半后，Eric Meyer在他的Blog上对我的CSS的细节做了很深入的分析。”

区别

或许是因为Krespanis的方法非常简单易懂（相比Celik和Meyer的版本，他的方法只关注margin和padding），他的这种reset的方法很快就引起了大家的注意，尽管如此，但是可以很容易的看出，在Meyer和Krespanis Blog上的评论中，有许多人几乎是在同一时间写出了与之类似的代码，同样值得注意的是，在Krespanis发布hard reset几周前，就已经有好几个人在Meyer的Blog上讨论了基于margin/padding的reset（Krespanis自己也是在Meyer的Blog上注意到了这个技术）。

就像人们说的，该发生的总会发生，各种CSS reset的方法很快就成了设计师的必备工具。

2004， Krespanis写道：

“人们花了许多精力来处理不同浏览器的默认样式表，主要是padding和margin属性，我在我的项目中使用了下面的代码来解决这个问题，这为我节省了大量时间：

* {padding:0; margin:0;}

初看起来你可能觉得没什么，但是如果你要在11个不同的浏览器中测试你的代码，当每次在一个新浏览器中你都可以看到和上一个浏览器中完全一个的表单渲染，你就会明白这行代码的神奇所在了。

关于Celik和Meyer的版本同Krespanis的”升级版“Reset的最主要差别当然就是Krespanis使用了*通配符来匹配所有元素。

去掉通配符的”hard reset“

就像任何使用都有反面一样，*通配符也有很多的副作用，Krespanis自己也注意到的，通配符重置了页面上所有元素的padding和margin，这在某些情况下会对设计造成影响，并且它总是让form和lists看起来混乱不堪。

如今，人们已经意识到使用通配符会对网页的性能产生影响，因为这个符号会将样式分配到所有的元素上面，Firefox浏览器的工程创造者，David Hyatt，就在他的“编写高效CSS”的最佳实践中建议开发者应该确保”每条规则都不应以一个通配符作为终止“。

Russ Weakley，CSS书籍的作者以及Web标准工作组的联合主席，向我们描绘了hard reset方法的副作用：”一旦你移除了所有的margin和padding，你就需要为所有你需要使用的HTML元素分别指定margin和padding。“

没过多久，人们就纷纷开始修改最初版本的“hard reset”，让它变得更具针对性，Steve Rider，举个例子，就在Meyer的Blog上贴出了他称之为“no assumptions”的reset方法：

body {margin: 0px; padding: 8px;}
body, div, ul, li, td, h1, h2, h3, h4, h5, h6 {font-size: 100%; font-family: Arial, Helvetica, sans-serif;}
div, span, img, form, h1, h2, h3, h4, h5, h6 {margin: 0px; padding: 0px;
background-color: transparent;}

Web开发者Seth Thomas Rasmussen也参与了进来，他只将padding和margin应用到了下列元素：

h1, h2, h3, h4, h5, h6, ul, ol, dl, table, form, etc. {margin: 0 0 1em 0}

并且很快，Krespanis也推出了自己的升级版本：

* {padding:0; margin:0;}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 5%; }
li, dd { margin-left:5%; }
fieldset { padding: .5em; }

除了Celik和Krespanis的Reset，还有许多其它更具针对性的reset，并且这些reset大部分也都会产生各种各样的副作用，大门就此敞开，在后面的很长一段时间里，不断有人尝试新的方法，并发布了各种各样的reset。

Faruk Ates和initial.css

在2005年7月，web开发者Faruk Ates在现在的kurafire.net上发布了他的initial.css，同时Meyer以及其它一些设计者的blog的后续讨论又催生了Faruk对它继续进行改进，借助时光机，我们可以看看最初版本的initial.css，同其它reset一样，Ates也根据收到的反馈对它进行了修订。

Ates说他已经在他的客户项目中使用这个reset有一年多的时间了，并且几乎没有发现什么副作用，我相信他的reset应该是第一个真正意义上的可公开获取的“全局reset”，尽管他在2010年给我的一封邮件中说，他对此并不十分确定，在同一封邮件中，Ates说：“我有意让它保持一个非常小的尺寸，因为我不喜欢通过一个非常大的CSS来对浏览器的默认属性进行reset，并且我在那时构建的大部分站点实际上只使用了被我重置的40，50%的元素，而Eric的版本则考虑了更多的情况，也更加的完备（至少在那时），而我的看起来更像是‘嘿，我这有个css，它让我作为开发者的生活轻松不少’，然后我就把拿出来分享给了大家，为什么不呢？”

/* =INITIAL
   v2.1, by Faruk Ates - www.kurafire.net
   Addendum by Robert Nyman - www.robertnyman.com *//* Neutralize styling:
   Elements we want to clean out entirely: */
html, body, form, fieldset {
        margin: 0;
        padding: 0;
        font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
}

/* Neutralize styling:
   Elements with a vertical margin: */
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
        margin: 1em 0;
        padding: 0;
}

/* Apply left margin:
   Only to the few elements that need it: */
li, dd, blockquote {
        margin-left: 1em;
}

/* Miscellaneous conveniences: */
form label {
        cursor: pointer;
}
fieldset {
        border: none;
}
input, select, textarea {
        font-size: 100%;
}

他的reset做了以下事情：

• 设置html, body, form, fieldset元素使用0 margin和padding，并且使用100%/120%尺寸的基于Verdana的sans-serif字体
• 设置h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address元素使用1em的垂直margin，而没有水平margin，也没有padding
• li,dd, blockquote原色各有1em的left margin
• 设置form label的指针为pointer
• 设置fieldset的border为none
• 设置input，select，textarea的字体大小为100%

有些人之前提过，Meyer随后也提到了，Ates的版本回避了通配符的使用。

不管是出于何种原因，Ates的reset并没有如其它reset那样引起轰动，尽管在随后出现的YUI以及Meyer版本的reset都或多或少的借鉴了Ates的代码。

在2010年10月，Ates说，在那个版本之后他就再没改动过他的reset：“因为我做任何改动都会导致尺寸快速增长，而人们完全可以使用Eric的更出色的版本，所以最终我也停止了使用我自己的initial.css而转而使用YUI中的，最近出现的HTML5 Boilerplate，它也包含了来自YUI和Eric Meyer的reset的部分代码”，2007年，Web设计师Christian Montoya根据他自己的日常使用，发布了一个Ates版本reset的更新。

YUI css reset

YUI reset第一次出现是在2006年2月，由YUI的高级前端工程师Nate Koechley以及他的同事Matt Sweeney编写：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
        margin:0;
        padding:0;
}
table {
        border-collapse:collapse;
        border-spacing:0;
}
fieldset,img {
        border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
        font-style:normal;
        font-weight:normal;
}
ol,ul {
        list-style:none;
}
caption,th {
        text-align:left;
}
h1,h2,h3,h4,h5,h6 {
        font-size:100%;
        font-weight:normal;
}
q:before,q:after {
        content:'';
}
abbr,acronym {
  border:0;
}

这个reset的效果非常梦幻，它没有改动html元素，并且将常用的HTML元素的margin和padding都变成了0，消除了图片的边框，去除了列表的气球和编号，并且将每个标题都重置成了同样的大小。

这个reset，当然，是一个很大的框架的一部分，叫做YUI（Yahoo！ User interface Library），供开发者开发基于Web的用户界面。

YUI css reset，我相信，是第一个真正引起广泛关注的“全局”css reset，微软开发者网络的Blogger，Dave Ward说，“YUI reset是第一个符合现有标准的真正意义的CSS reset”。

这个想法，就如Koechley在很多演讲和Blog帖子中所说，就是为了提供一个“干净且扎实的基础”来开发上层的css，而不用担心跨浏览器的问题，YUI CSS reset“移除了所有”浏览器默认的CSS样式。

2006年9月，在Yahoo!的”hack day“活动的一个演讲中，Koechley告诉听众：牢靠的基础保证有效的的开发”，“reset为了提供了征服browser.css的有利武器“

有点随心所欲，Koechley写道：YUI CSS reset是为了确保所有的样式都是有针对性的定义的，你可以选择如何让<em>来强调某个事情，我们也可以基于它的语义来选择合适的元素来取代他们的默认显示，你可以选择你想要的方式渲染<li>”。

在2007年10月的一个slide中，Koechley提醒用户“reset提醒我们，我们应该只基于内容来选择合适的HTML元素”，他在2010的访谈中再次提起这个，并且注意到大多数人仍然不知道浏览器有一个很强的表现层，如果不讲别的，他说，resets会把所有浏览器变的“更自然，标准.. 并且降低耦合度”，并为设计师提供一个很好的起点，他说，Reset可以强制人们重新思考HTML元素的语义。

Koechey已经离开了YUI团队，他目前是一名自由web开发者，他也不确定，是否应该对YUI进行修订以支持HTML5和CSS3。

Eric Meyer通过对YUI reset的扩展，发布了他自己的CSS reset，并获得了比YUI更大的影响。

--------------
这也是前面的投票中所说最具影响的一个CSS reset，由于篇幅过长，我们将在第二部分对Eric Meyer的CSS reset进行介绍，本文翻译自“The History of CSS Resets”，作者： Michael Tuck

想和我们一道传播黑客精神？快来加入吧！

无觅猜您也喜欢：
CSS Reset的历史（二）	调整睡眠周期，只需一个晚上	我们的最佳实践正在害死我们	GNU/Linux中有多少GNU的代码？
无觅