当您想到 HTML 和 CSS 时，您可能会将其想象为一个打包产品。但在蒂姆·伯纳斯-李于 1989 年首次创建万维网后的几年里，根本没有 CSS 这样的东西。最初的网络计划根本没有提供任何方式来设置网站的样式。
在 WWW 邮件列表的档案中，隐藏着一个如今臭名昭著的帖子。它由马克·安德森于 1994 年撰写，他后来共同创建了 Mosaic 和 Netscape 浏览器。在帖子中，安德森评论说，由于无法使用 HTML 设置网站的样式，因此当被问及视觉设计时，他只能告诉 Web 开发人员“抱歉，你被坑了。”
10 年后，CSS 正在走向一个新兴的充满热情的 Web 社区的全面采用。*那么在此期间发生了什么？*
寻找样式语言
关于 Web 如何在理论上进行布局，有很多想法。但是，对于伯纳斯-李来说，这并不是优先事项，因为他在 CERN 的雇主主要对 Web 作为员工的数字目录感兴趣。相反，我们从社区中的开发人员那里获得了一些用于网页布局的相互竞争的语言，最著名的是来自魏培元、安德森和哈肯·维姆·利。
以魏培元为例，他于 1991 年创建了图形化 ViolaWWW 浏览器。他将自己的样式表语言直接整合到他的浏览器中，最终目标是将这种语言变成 Web 的官方标准。它从未真正实现，但它确实为其他潜在规范提供了一些急需的灵感。
与此同时，安德森在他的浏览器 Netscape Navigator 中采用了不同的方法。他没有创建一种专门用于网站样式的解耦语言，而是简单地扩展了 HTML 以包含表示性的、非标准化的 HTML 标签，这些标签可用于设计网页。不幸的是，不久之后，网页失去了所有语义值，看起来像这样
<MULTICOL COLS="3" GUTTER="25">
<P><FONT SIZE="4" COLOR="RED">This would be some font broken up into columns</FONT></P>
</MULTICOL>程序员很快意识到这种方法不会持续很长时间。有很多替代方案的想法。例如 RRP，一种偏爱缩写和简洁性的样式表语言，或者 PSL96，一种实际上允许使用函数和条件语句的语言。如果您对这些语言的外观感兴趣，Zach Bloom 撰写了一篇关于几种竞争提案的精彩深入研究。
但吸引所有人注意力的想法是由哈肯·维姆·利于 1994 年 10 月首次提出的。它被称为层叠样式表，或简称 CSS。
我们为什么使用 CSS
CSS 脱颖而出，因为它很简单，尤其是与它的一些最早的竞争对手相比。
window.margin.left = 2cm
font.family = times
h1.font.size = 24pt 30%CSS 是一种声明式编程语言。当我们编写 CSS 时，我们不会告诉浏览器如何精确地呈现页面。相反，我们描述HTML 文档的规则，一条一条地描述，并让浏览器处理渲染。请记住，Web 主要由业余程序员和有抱负的爱好者构建。CSS 遵循了一种可预测的，也许更重要的是，宽容的格式，几乎任何人都可以掌握它。这是一个特性，而不是错误。
但是，CSS 在某种程度上是独一无二的。它允许样式级联。它就在名称中。层叠样式表。级联意味着样式可以继承并覆盖先前声明的其他样式，遵循一个相当复杂的称为特异性的层次结构。然而，突破在于它允许在同一页面上使用多个样式表。
看到上面那个百分比值了吗？这实际上是一段非常重要的内容。Lie 认为用户和设计师都将在单独的样式表中定义样式。然后，浏览器可以充当两者之间的调解者，协商差异以呈现页面。该百分比表示此样式表为属性承担了多少所有权。所有权越低，越有可能被用户覆盖。当 Lie 首次演示 CSS 时，他甚至展示了一个滑块，允许他切换浏览器中用户定义和开发者定义的样式。
这实际上是 CSS 早期的一个非常大的争论。有些人认为开发人员应该拥有完全的控制权。另一些人认为用户应该拥有控制权。最后，百分比被删除，取而代之的是关于哪些 CSS 定义将覆盖其他定义的更明确的规则。无论如何，这就是我们拥有特异性的原因。
在 Lie 发布他的原始提案后不久，他找到了 Bert Bos 作为合作伙伴。Bos 创建了 Argo 浏览器，并且在此过程中，他自己的样式表语言，其中的一些部分最终被整合到 CSS 中。两人开始制定更详细的规范，最终求助于新创建的 W3C HTML 工作组寻求帮助。
这花了几年的时间，但到 1996 年底，上面的例子发生了变化。
html {
margin-left: 2cm;
font-family: "Times", serif;
}
h1 {
font-size: 24px;
}CSS 诞生了。
浏览器的问题
虽然 CSS 当时还只是一个草案，但 Netscape 已经开始使用表示性 HTML 元素，如multicol、layer和令人讨厌的blink标签。另一方面，Internet Explorer 已经开始零散地整合一些 CSS。但他们的支持参差不齐，有时甚至不正确。这意味着在 CSS 作为正式建议发布五年后的 21 世纪初，仍然没有浏览器完全支持 CSS。
这源于一个奇怪的地方。
当 Tantek Çelik 于 1997 年加入 Internet Explorer for Macintosh 时，他的团队非常小。一年后，他被任命为渲染引擎的首席开发人员，同时他的团队规模减半。微软的大部分重点（出于显而易见的原因）都放在 Windows 版的 Internet Explorer 上，Macintosh 团队基本上被置之不理。所以从 2000 年开始开发版本 5 时，Çelik 和他的团队决定将重点放在其他人没有关注的地方：CSS 支持。
该团队花了 2 年时间才完成版本 5。在此期间，Çelik 经常与 W3C 成员和使用其浏览器的 Web 设计师进行沟通。随着每一部分到位，IE for Mac 团队在各个方面都进行了验证，以确保他们万无一失。最后，在 2002 年 3 月，他们发布了 Internet Explorer 5 for Macintosh。第一个完全支持 CSS 级别 1 的浏览器。
文档类型切换
但请记住，Windows 版的 Internet Explorer 已将 CSS 添加到其浏览器中，其中包含不少错误和一个古怪的盒子模型，该模型描述了元素如何计算和呈现。Internet Explorer 将边框和填充等属性包含在元素的总宽度和高度内。但 IE5 for Mac 和正式的 CSS 规范要求将这些值添加到宽度和高度中。如果您曾经使用过box-sizing，您就会确切地知道其中的区别。
Çelik 知道，为了使 CSS 正常工作，这些差异需要得到协调。他的解决方案来自与标准倡导者 Todd Fahrner 的一次谈话。它称为文档类型切换，其工作原理如下。
我们都知道文档类型。它们位于 HTML 文档的最顶部。
<!DOCTYPE html>但在过去，它们看起来像这样
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">这是一个符合标准的文档类型的示例。//W3C//DTD HTML 4.0//EN 是关键部分。当 Web 设计师将其添加到他们的页面时，浏览器将知道以“标准模式”呈现页面，并且 CSS 将与规范匹配。如果文档类型缺失或使用了过时的文档类型，浏览器将切换到“怪异模式”，并根据旧的盒子模型和保留的旧错误进行渲染。一些设计师甚至故意选择将他们的网站置于怪异模式，以便恢复旧的（且不正确的）盒子模型。
埃里克·迈耶，有时被称为 CSS 之父，公开表示文档类型切换拯救了 CSS。他可能说得对。如果没有这个简单的小技巧，我们仍然会使用包含旧 CSS 错误的浏览器。
盒子模型黑客
还有一件事需要解决。在旧网站的现代浏览器中，文档类型切换工作得很好，但在旧版浏览器（尤其是 Internet Explorer）中，新网站的盒模型仍然不可靠。于是出现了 盒模型 Hack，这是 Çelik 想出的一个巧妙技巧，它利用了一个鲜为人知的 CSS 属性 voice-family 来欺骗浏览器，并在同一个类中允许多个宽度和高度。Çelik 指导作者先放置旧盒模型宽度，然后使用 voice-family 在一个小 Hack 中关闭标签，最后放置新盒模型宽度。有点像这样
div.content {
width: 400px;
voice-family: ""}"";
voice-family: inherit;
width: 300px;
}旧版浏览器不识别 Voice-family，但它确实接受字符串作为其定义。因此，通过添加额外的 }，旧版浏览器会在到达第二个宽度之前简单地关闭 CSS 规则。它简单有效，让许多设计师能够快速开始尝试新的标准。
基于标准的设计先驱
Internet Explorer 6 于 2001 年发布。它最终会成为所有 Web 开发人员的一大难题，但它实际上附带了一些非常令人印象深刻的 CSS 和标准支持。更不用说它的市场份额徘徊在 80% 左右。
舞台已经搭建好，部件已经到位。CSS 已准备好投入生产。现在人们只需要使用它。
在 Web 在没有连贯或标准的样式语言的情况下飞速发展走向普及的 10 年里，设计师们并不是完全停止了设计。一点也不。相反，他们依靠浏览器 Hack、基于表格的布局和嵌入式 Flash 文件的积压来在 HTML 无能为力时添加一些样式。符合标准的、基于 CSS 的设计是一个新的领域。Web 需要一些先驱来开辟一条前进的道路。
他们得到的仅仅是几个月内两个重大的重新设计。第一个来自Wired，紧随其后的是ESPN。
Douglas Bowman 负责Wired杂志的 Web 设计团队。2002 年，Bowman 和他的团队环顾四周，发现没有主要的网站在其设计中使用 CSS。Bowman 几乎有一种义务感，希望向一个以Wired为最佳实践典范的 Web 社区展示如何使用最新的、符合标准的 HTML 和 CSS 重新设计他们的网站。他推动他的团队拆除所有内容并从头开始重新设计。2002 年 9 月，他们成功完成了这项工作并启动了重新设计后的网站。该网站甚至可以 验证。
ESPN 几个月后发布了他们的网站，在更大的规模上使用了许多相同的技术。这些网站对 CSS 做出了重大赌注，一些人认为这项技术可能根本无法持续下去。但它获得了巨大的回报。如果你能与参与这些重新设计的开发者中的任何一位交谈，他们会给你列出一系列重大的好处。更高的性能、更快的设计更改、更容易共享，最重要的是，对 Web 有利。Wired 最初甚至每天都更改颜色。
深入研究这些重新设计的代码，你一定会发现一些 Hack。Web 仍然只存在于几种不同的显示器尺寸上，因此你可能会注意到这两个网站都使用了固定宽度列以及相对和绝对定位的组合，将网格放入适当的位置。图像被用在了文本的位置。但是这些网站为接下来将要发生的事情奠定了基础。
CSS Zen Garden 和语义 Web
次年，即 2003 年，Jeffrey Zeldman 出版了他的著作Designing with Web Standards，该书成为希望转向基于标准的设计的 Web 设计师的指南。它开启了 CSS 技术和技巧的传统，帮助 Web 设计师想象 CSS 的功能。一年后，Dave Shea 推出了 CSS Zen Garden，鼓励设计师采用基本的 HTML 页面并仅使用 CSS 以不同的方式对其进行布局。该网站成为最新技巧和窍门的展示窗口，并在很大程度上说服人们是时候采用标准了。
慢慢地但肯定地，势头越来越强劲。CSS 发展并添加了新的属性。浏览器实际上竞相实施最新的标准，设计师和开发人员也为其技能库添加了新的技巧。最终，CSS 成为常态。就像它一直都在那里一样。
喜欢学习 Web 历史吗？Jay Hoffmann 有一份名为 The History of the Web 的每周时事通讯，你可以 在这里注册。
美好的旧时光。
感谢这篇文章。回忆起美好的旧时光真是太好了。IE6 是有史以来最糟糕的浏览器。在 CSS 中，我们需要编写很多 Hack 和条件注释，例如：
<!--[if IE 6]>
另一个针对 IE6 的 Hack。
<![endif]-->
:)再次感谢。
我想知道只使用 CSS 1 级能设计出多接近现代网页布局？
这将是一个巨大的挑战！
浏览器支持是 CSS 实现的关键。
到 90 年代末，IE5 领先于 Netscape4。Netscape 6 发布了一个重大更改，已经支持很多 CSS 并且更好，但方式非常不同，因此没有被广泛采用，IE6 将其埋葬了。但 Netscape 并没有完全消失……凤凰通过使用 Netscape 开源代码的 Mozilla 1.0 重新出现。
最终，Firefox 也从中诞生，并极力倡导标准，以至于 IE6 成为官方的丑小鸭。还有 Safari 和 Chrome……
我们过去曾苦苦挣扎于 2 或 3 种分辨率（640×480、800×600、1024×768；这些是针对桌面端的，年轻人！）。然后使用 JS 处理 IE 和 Netscape 之间的问题（还记得
document.all与document.layers吗？）。然后是 CSS 的不一致性（双边距错误、IE Hack……）。
现在我们只有 250 种屏幕分辨率。小菜一碟！
http://csszengarden.com/
这个网站完全改变了我对 HTML 结构、CSS 和设计的整体看法。我学会了采用非常接近于默认的 HTML 结构并将其转换为几乎任何布局。它真正让我了解了 CSS 对 Web 设计师和开发人员的意义。
我希望 React 的 CSS-in-JS 狂热者不会破坏未来创造了现代 CSS 简单之美的 Web 标准。我完全赞成做需要做的事情，但我们走到今天是有原因的。
在这里回忆一下，谢谢。（当然，我不怀念设计方面的旧时光）
我不认为边距从未包含在元素的总宽度和高度内。是边框，而不是边距，是盒尺寸（宽度/高度）的一部分。
内容不错。但你忽略了 Web 标准项目，如果没有它，这一切都不会发生。Tantek 和 Eric 作为 WaSP 领导的倡议的参与者做出了他们的贡献。A List Apart 向设计师和开发人员推广 WaSP 的价值观以及 CSS 布局的早期使用启发了 Doug 和 Mike 分别在 Wired 和 ESPN 做的事情。数十名 WaSP 成员和数千名最终支持者推动了这场运动。他们的贡献值得被铭记。
感谢阅读，并感谢你指出这一点！
我没有在本文中包含它，但你绝对是对的，它应该包含在内。WaSP 是一个我发现自己在每周发送的时事通讯中反复提及的组织，尽管我从未有机会讲述 WaSP 的完整历史及其对 Web 轨迹的不可思议的影响，这是我当然想要做的事情。如果你有时间，我很乐意与你快速聊聊加入和领导 WaSP 的感受，以便确保我了解所有信息。无论如何，我绝对想讲述那个故事，我希望当我这样做时，我能够公正地对待该项目及其成员，我同意我们欠他们巨大的感激之情，并且需要记住他们。
而且它还没有结束！IE 仍然有其恼人的怪癖并且仍在蓬勃发展！
你确定 IE 基本上已经死了吗？我想不出支持低于 IE 10 的任何好理由（仅限于 Windows 7），而且它在 CSS 上也不再那么糟糕了。
从 3.5% 到 14.8%
https://en.wikipedia.org/wiki/Usage_share_of_web_browsers
有一则说明称这些是“非移动”列表，因此这将这些值在现实世界中的实际值减少了一半以上。因此，IE 在网络上的实际使用百分比更像是 1.5% 到 7%，即使非常慷慨地估计。
考虑到这些是全球范围内的数字，并且许多设计师专注于他们所在国家/地区的企业（对于我的公司来说是美国），这使得这个数字变得更加不相关。
IE 棺材上的最后一颗钉子是微软甚至不再支持 IE。如果客户说他们的网站在他们的浏览器中看起来不好/不正确，我会指出使用不受支持的浏览器的安全隐患，然后他们会升级，问题就会消失。
最后一点，如果客户想要支持IE，我只需提供一个支持它的成本估算，其中包含已知的IE用户百分比，并且100%的情况下，他们都会拒绝支付IE支持费用。
Vanderson，英国的国民保健署怎么样——世界上第五大雇主。IE 7在那里占据主导地位……
选择与常识
首先，我让我的客户自己决定，他们支付支持费用。不能免费提供可能占项目成本很大一部分的费用。
其次，了解你的市场和用户。我在美国，我的大多数客户都是企业，从小型到中型（我倾向于不再想与大型公司合作，因为他们会耗尽你的精力），而且他们没有任何使用IE 7的网站访问者（具有统计数据的现有网站）。所以在那里完全不是问题。（或者如果他们确实有，那么数量非常少，以至于他们不值得为此支付支持费用……再次强调，这是他们的选择）
最后，它到达了一个你必须继续前进的点。IE 6 存在了非常长的时间。尽管它拥有稳定的用户百分比，但我（并且我相信这里的所有其他人）不得不停止支持，并让IE 6用户看到一个杂乱的网站。
即使你现在正在决定停止对某些东西的支持。界限在哪里？你如何选择截止线？考虑你能获得的所有数据，并做出明智的、符合常识的选择。
此外，我建议，当你只为一个网站构建时，与构建数百甚至数千个网站时（特别是政府或大型公司的网站），开发标准存在巨大差异。
安全
2006年是IE 7 发布的年份。
浏览器历史时间线
这里有多少人支持Safari 2或Firefox 1.5、Netscape 8.1或Opera 9？Chrome在两年后才出现，iOS和Android在一年或更长时间后才出现。但将所有移动浏览器的第一个版本添加到此列表中。（包括Android浏览器）
我猜你都不支持这些浏览器。
更糟糕的是，通过支持IE 7（实际上是低于IE 11的任何版本），你实际上是在促进使用不安全的浏览器（已经不安全一年半了！）
IE 7 中的页面显示效果不好是一件好事。对于设计师来说，这是我们能做的最简单的事情（除了实际的消息之外），以帮助人们意识到他们正在使用一个不安全的浏览器。
我认为，作为网页设计师，我们有责任立即停止对所有不再从其开发人员那里获得安全更新的浏览器提供所有支持。
你如何能够心安理得地让一个网站在一个几乎肯定危害用户的浏览器中显示正确？
再说一次，IE 7 不安全已经一年半了，而其他浏览器的情况谁知道呢……唯一获得安全更新的IE版本是版本11。
https://www.microsoft.com/en-us/windowsforbusiness/end-of-ie-support
哇，我觉得自己老了。看看那些网站，感觉像是几百万年前的事情。使用图像进行样式设置，到处都是表格，“3D”按钮以及所有这些颜色……
在CSS出现之前，我就从事网站设计并获得报酬了。
伙计，我老得要死了。
我认为Acid2（以及后来的Acid3）测试在为我们提供一致的CSS体验方面的价值不容忽视。在一个简单的页面中，它为网页标准开发人员提供了一个工具来演示标准应如何实现，并且浏览器开发人员将其用作其宣传CSS支持的骄傲和争论点之一。如果没有它和类似的测试，我们仍然会处于规范措辞模糊不清的世界，在这种世界中，实现者可以根据对自己最方便的方式来选择如何实现某些规则，而不是根据对网页设计师和用户最方便的方式来实现。