CSS重置历史

当艺术家们开始一幅新画时，他们不会立即使用镉红和酞蓝。他们首先给画布上色。为什么?

以确保画布是光滑的，有一个统一的白色色调。许多网页设计师更喜欢使用CSS“重置”来“启动”浏览器画布，并确保他们的设计在网站访问者可能使用的各种浏览器和系统上尽可能统一地显示。本文是关于CSS重置主题的三篇系列文章的第1部分。

• 第一部分:CSS重置的历史
• 第2部分:CSS重置的综合指南
• 第三部分:你应该重置你的CSS吗?

什么是CSS重置?

当你使用CSS“重置”时，你实际上覆盖了每个浏览器用来设置网页样式的基本样式表。如果你展示一个没有CSS的网站，这个网站仍然会在非常有限的范围内使用浏览器的默认样式表进行样式化。

问题是每种浏览器的样式表都有细微但根本的区别。通过使用CSS重置，您将基本CSS元素的样式设置为基线值，从而使浏览器的不同样式默认值具有实际意义。一些最常见的元素在不同的浏览器中有不同的样式超链接（<代码><一>)、图像(<代码>< img >)、标题(<代码><标题>通过<代码><编辑>)，以及页边距和填充给定各种元素。

那么火狐和IE，哪个浏览器是正确的呢?没关系。重要的是，如果你没有为段落的边距和填充设置样式，那么段落和其他元素之间的间距看起来会不一样。

- - - - - -雅各GubeSix Revisions创始人

仔细阅读这张显示各种浏览器默认值的图表可能会很有用。不幸的是，它不能回到IE6(这在样式表中造成了很大的混乱)。

谁使用重置?

根据2008年民意调查根据Chris Coyier的CSS-Tricks的文章，绝大多数的网页设计师都会使用一种或另一种重置。(柯耶尔的参数相当宽泛，这可能是他的调查结果中大量支持重置的原因。)这项民意调查并非特别科学或全面，但结果如下:

• 27%的人使用埃里克·迈耶的重置
• 26%的人表示他们不知道什么是重置
• 15%使用“硬重置”，或者使用通用选择器进行一些重置的迭代
• 14%的人使用重置作为更大的CSS框架的一部分
• 13%的人使用自定义重置
• 4%“故意不使用”

科伊尔对迈耶的重组计划在民调中排名第一并不感到意外，称其“受欢迎、深思熟虑、有效”。也许有些异想天开，梅耶在评论中回答道:“嗯。其实我一点也没想到;我以为框架重置会大获全胜。现在压力完全来了!

Arrrrgh !”

CSS重置的早期

据我所知，我们后来认为是“重启”的任何东西，第一次被提及是在2004年底，当时有两种截然不同的方法。

undohtml.css

第一个是传奇开发商Tantek Çelik的UndoHTML.css样式表，它从许多元素中“去除浏览器的清漆”。

/* undohtml.css */ /* (CC) 2004 Tantek Celik。版权所有。
*/ /* http://creativecommons.org/licenses/by/2.0 */ /*此样式表受创作共用许可协议许可。* /*/ /*链接下划线会使超文本的可读性降低，因为下划线会掩盖单词下半部分的形状*/:link，:visited {text-decoration:none}/*默认情况下没有列表标记，因为列表通常用于语义*/Ul,ol {list style:none}/*避免浏览器默认不一致的标题font-size */ /*和pre/code too */H1,h2,h3,h4,h5,h6,pre,code {font-size:1em;｝/*删除不一致的(浏览器之间)默认的ul,ol填充或边距*/ /*默认的标题间距与正常的行距不匹配也不对齐，所以让我们摆脱它。*/ /*清除pre, form, body, html, p, blockquote周围的空格以及*/ /*表单元素奇怪地不一致，并且不太CSS可模拟。
*/ /*尽管如此，还是去掉了它们的边距和填充*/Ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input {margin:0;填充:0}/*谁认为蓝色链接图像边框是个好主意?* /A img，:link img，:visited img {border:none}/*非斜体地址*/地址{font-style:normal}/*更多的清漆剥离如有必要…* /

在2010年10月发给我的一封电子邮件中，Çelik证实他很可能是第一个离开的人。

“我非常确定我在2004年的博客文章中发明/提出/分享了重置CSS的概念(虽然不是用这个名字)，”Çelik说。Çelik的重置删除链接下划线，链接图像的边框，并将标题的字体大小设置为1em，<代码><代码>，以及段落。2009年，作家兼设计师杰森·克兰福德·蒂格描述Çelik被重置为“部分崇高，部分疯狂”，原因我不知道。

“硬重置”

第二个是网页设计师和开发人员Andrew Krespanis的“硬重置”，以克服浏览器默认的页边距和填充(在一个片段中，他称之为“我在最后一分钟添加的微小添加”)。

* {padding:0;保证金:0;｝

当被问及硬重置时，Krespanis若有所思地说:“CSS的一行字在很大程度上开启了我的职业生涯，现在回想起来，这很有趣，近乎荒谬。Krespanis说:“当然没有人向我建议重置的想法，这是我在2004年初在codingforums.com上第一次向CSS初学者建议的，他们为自己过度使用多余的div辩解，因为默认的边距和段落、区块引号、列表、字段集等都会导致令人困惑的渲染。”“我也在向人们提供示例时使用它，但在我开始建议初学者使用它之前，我没有在网站上使用它。

Eric Meyer当时也在谈论一个类似的概念，只是他更专注于高质量、合理的默认设置，以覆盖(浏览器)制造商设置的默认值，从那以后，他一直在继续开发自己的默认值。”

真正撤销html.css

Çelik的重置很快引起了CSS大师Eric Meyer的注意，他用Çelik的工作作为他的起点全球重置的第一次尝试，以及后续几乎是在那之后。在我同样的谈话中，Çelik说:“大约一周半后，Eric Meyer在他的博客上详细介绍了很多细节，并扩展了我的工作。”

的差异

也许是因为Krespanis的方法非常简单和基本(只处理页边距和填充，而不是Çelik的和Meyer的更彻底的重置)，它似乎立即吸引了更多的关注。然而，这是一个简单的观察。从Meyer和Krespanis博客上的评论来看，很多人都在考虑一些事情沿着这些路线大约在同一时间;值得注意的是，在Krespanis发表评论前几周，Meyer博客上的一些评论就讨论了保证金/填充重置(Krespanis本人)注意到技巧在梅耶自己的博客上发表文章之前)。

就像那个人说的，该汽船的时候它才会汽船。某种CSS重置的想法已经成为，至少对许多设计师来说，是必要的。2004年，克雷斯帕尼斯写道:

“处理跨浏览器差异的很大一部分是考虑每个浏览器中元素的默认属性值;即填充和边距。

我在我设计的每个新站点中使用以下声明;这让我省去了很多挑剔的时间。*{填充:0;乍一看似乎没什么，但当你在11个浏览器中查看你的温和样式表单时，你会发现它们的位置都是相同的;或者你的按钮风格的列表在第一次，每次都是完美的。

Çelik和Meyer的早期努力，以及Krespanis的“事后思考”之间的区别，当然是Krespanis对<代码>＊(在CSS中是通用选择器匹配网页中的所有元素)。

远离通用选择器“硬重置”

就像一滴反物质<代码>＊有广泛的影响。正如Krespanis继续指出的那样，通用选择器的使用取消了页面中每个元素的填充和空白，有时会损害个人设计，而且经常会搞砸形式而且列表．今天，人们认识到使用通用选择器对网页性能有影响，因为为所有元素选择和分配样式涉及资源税。

Firefox浏览器的联合创始人David Hyatt建议开发者确保“规则不会被归为通用类别”，这是编写高效CSS的最佳实践。CSS书籍的作者和Web标准小组的联合主席Russ Weakley概述了这一点一下台“硬重置”方法:“一旦你删除了所有的边距和填充，这个方法依赖于你特别样式化你打算使用的每个HTML元素的边距和填充。”没过多久，人们就开始把原来的“硬重置”修改成更具体的东西。例如，史蒂夫·莱德发布了他所谓的“无假设”重置在梅耶的博客上，他根据自己的喜好写道:

正文{margin: 0px;} body, div, ul, li, td, h1, h2, h3, h4, h5, h6 {font-size: 100%;} div, span, img, form, h1, h2, h3, h4, h5, h6 {margin: 0px;填充:0 px;背景颜色:透明;}

Web开发人员Seth Thomas Rasmussen也加入了这一行列，他为选定的元素提供了一些填充和边距:

H1, h2, h3, h4, h5, h6, ul, ol, dl，表格，表格等。
{margin: 0 0 1em 0}

没过多久，Krespanis就提出了自己的修改方案:

*{填充: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{填充:.5em;｝

在Çelik和Krespanis的广泛重置，更“有针对性”的重置，以及对重置所做的有时是压倒性的改变的反对之间，游戏开始了。不久之后，人们开始尝试各种不同的重置并发布相关信息。

失物招领:法鲁克吃了?和initial.css

2005年7月，Web开发人员Faruk Ate?发布了他的initial.css在现已不存在的Kurafire.net上。

在Meyer和其他设计博客随后的讨论中，一些评论者回忆起Ate?的努力。通过时光倒流机的魔力，他的初始。css重置可以检查。像其他人一样，吃?

修改了他的重置在听取了讨论和评论之后。吃了吗?他说，他已经在客户的设计中使用了一年左右的重置，几乎没有或几乎没有不良影响。

我相信这是第一次公开的真正的“全球重置”，尽管他在2010年给我的一封电子邮件中说，他根本不确定情况是否如此。在同样的对话中，艾特?他写道:“它也被故意保持得很小，因为我不喜欢用大量的CSS来重置浏览器中的所有东西，因为当时我创建的大多数网站实际上都没有使用50-60%的不太常见的元素被重置。

这里Eric做了一个在任何情况下都可以使用的版本，详尽且非常完整(在当时)，我的版本更多的是‘嘿，只是这些少数的风格让我作为web开发人员的生活更容易了’，我分享了它们，因为，嗯，我为什么不呢?”

/* =INITIAL v2.1, by Faruk Ates - www.kurafire.net附录by Robert Nyman - www.robertnyman.com *//*中和样式:我们想要完全清除的元素:*/Html, body, form, fieldset {margin: 0;填充:0;字体:100%/120% Verdana, Arial, Helvetica, sans-serif;｝/*中和样式:带有垂直边距的元素:*/H1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address {margin: 1em 0;填充:0;｝/*应用左距:只对少数需要它的元素Li, dd, blockquote {margin-left: 1em;｝/*其他方便:*/表单标签{光标:指针;} fieldset{边界:无;} input, select, textarea {font-size: 100%;｝

他的重置包括:

• 设置<代码>超文本标记语言，<代码>身体，<代码>形式，<代码>自定义字段元素的边距和填充为零，字体为100%/120%，以及基于verdana的无衬线字体堆栈
• 设置<代码>h1，<代码>h2，<代码>h3，<代码>h4，<代码>h5，<代码>编辑，<代码>p，<代码>精准医疗，<代码>引用，<代码>ul，<代码>ol，<代码>戴斯。莱纳姆:，<代码>地址元素的垂直边距为1em，没有水平边距，也没有填充
• 给出一个1em的左距<代码>李，<代码>dd，<代码>引用元素
• 将表单标签光标设置为<代码>指针
• 设置<代码>自定义字段边境来<代码>没有一个
• 设置<代码>输入，<代码>选择，<代码>文本区域字体大小为100%

正如其他人之前指出的，梅耶后来也指出的，Ate?避免使用通用选择器，因为它对表单有不利的影响(尽管它是在他的第一次迭代中)。不管什么原因，艾特?的重置受到的关注比其他一些少，虽然很明显，许多元素在YUI和Meyer重置之后首先出现在Ate?的编码。

2010年10月，Ate?他写道，在一次修改之后，他再也没有重写过他的重置:“我对它所做的任何补充都会让它的规模迅速扩大，在这一点上，人们可以而且应该使用埃里克更全面的版本。最终，我不再使用自己的initial.css，现在我通常从YUI或最近的HTML5样板，其中包括YUI和Eric Meyer最新重置的部分。”2007年，网页设计师Christian Montoya提供了一个更新版本的Ate?他自己的工作就依赖于该软件的重置。

Yahoo !用户界面CSS重置

Yahoo !用户界面(YUI)重置第一次出现在2006年2月，由Nate Koechley, YUI高级前端工程师和他的同事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;填充:0;} table {border-collapse:崩溃;border-spacing: 0;} fieldset,img {border:0;}地址，标题，引用，代码，dfn,em,strong,th,var {font-style:normal;粗细:正常;} ol,ul {list style:none;}标题，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; }

这种重置对任何样式表的影响都是巨大的。而<代码>超文本标记语言元素没有改变，几乎所有常用的HTML元素都将其边距和填充归零。图像失去了边界。

清单失去了子弹和编号。每个标题都被重置为相同的大小。当然，这次重置是一个更大的框架的一部分，这个框架被称为Yahoo!

用户界面库(YUI)，它是开发基于web的用户界面的框架。第一次YUI CSS重置，我相信，是第一次真正的“全球”CSS重置，受到了广泛的公众关注。微软开发者网络博主Dave Ward说，“根据目前的标准，YUI的重置是第一次真正被认为是CSS重置。”正如Koechley在多次演讲和博客文章中所说，这个想法是为相同格式的“干净的石板”提供一个“干净而坚固的基础”，无论使用什么浏览器或机器来显示站点，各个样式表都可以在此基础上构建几乎相同的外观。

YUI CSS Reset“删除浏览器默认CSS表示的所有内容”。2006年9月，在雅虎的“黑客日”活动上，Koechley告诉观众:“良好的基础保证了合理的开发。”重置“克服[s]浏览器。css”和“水平[s]比赛场地。”Koechley有点异想天开地写道，YUI CSS Reset“有助于确保所有样式都是有意声明的。你可以选择你想要的东西。

允许我们根据它们的语义而不是它们的“默认”表示来选择元素。您可以选择如何渲染

Html,body,div,span, applet,object,iframe, h1,h2,h3,h4,h5,h6,p,blockquote,pre, a,abbr, h5,h6, address,big,cite,code, del,dfn,em,font,img,ins,kbd,q,s,samp, small,strike,strong,sub,sup,tt,var, dd,dl,dt,li,ol,ul, fieldset,form,label，图例，表格，标题，tbody,tfoot,thead,tr,th,td {margin: 0;填充:0;边界:0;粗细:正常;字体样式:正常;字体大小:100%;行高:1;字体类型:继承;text-align:左;} table {border-collapse:崩溃; border-spacing: 0; } ol,ul { list-style: none; } q:before,q:after, blockquote:before,blockquote:after { content: ""; }

/*不要忘记在'html'或'body'元素上设置前景色和背景色!* /Html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, h5, h6, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label，图例，表格，标题，tbody, tfoot, thead, tr, th, td {margin: 0;填充:0;边界:0;粗细:继承;字体样式:继承;字体大小:100%;行高:1;字体类型:继承;text-align:左;vertical-align:基线; } a img, :link img, :visited img { border: 0; } table { border-collapse: collapse; border-spacing: 0; } ol, ul { list-style: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; }

Html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, h5, h6, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label，图例，表格，标题，tbody, tfoot, thead, tr, th, td {margin: 0;填充:0;边界:0;大纲:0;粗细:继承;字体样式:继承;字体大小:100%;字体类型:继承;vertical-align:基线;｝/*记住定义焦点样式!* /:焦点{大纲:0;} body {line-height: 1;颜色:黑色;背景:白色;} ol, ul {list style: none;｝/*表仍然需要'cellspacing="0"'在标记*/表{border-collapse:分开;border-spacing: 0;}标题，th, td {text-align: left;粗细:正常;} blockquote:before, blockquote:after, q:before, q:after{内容:"";} blockquote, q{引号:"" "";｝

Html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, h5, h6, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label，图例，表格，标题，tbody, tfoot, thead, tr, th, td {margin: 0;填充:0;边界:0;大纲:0;字体大小:100%;vertical-align:基线;背景:透明;} body {line-height: 1;} ol, ul {list style: none;} blockquote, q {quotes: none; }/*记住定义焦点样式!* /:焦点{大纲:0;｝/*记得以某种方式突出显示插入!* /在{text-decoration: none;} del {text-decoration: line-through;｝/*表仍然需要'cellspacing="0"'在标记*/表{border-collapse:崩溃;border-spacing: 0;｝

Html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, h5, h6, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label，图例，表格，标题，tbody, tfoot, thead, tr, th, td {margin: 0;填充:0;边界:0;大纲:0;字体大小:100%;vertical-align:基线;背景:透明;} body {line-height: 1;} ol, ul {list style: none;} blockquote, q {quotes: none; }/*记住定义焦点样式!* /:焦点{大纲:0;｝/*记得以某种方式突出显示插入!* /在{text-decoration: none;} del {text-decoration: line-through;｝/*表仍然需要'cellspacing="0"'在标记*/表{border-collapse:崩溃;border-spacing: 0;｝