总觉得自己没学好css（其实可能也是一样的），经常听说js的历史，但我好像什么都不懂关于css的历史。虽然历史的内容对实际开发可能没有实际帮助（不像学习Flexbox，Grids可以马上在布局中使用），但我总觉得这也是一个前端工程师应该具备的软知识。所以当你看到这篇文章的英文原文时，你会有翻译它的冲动。希望你看完后有所收获。译文如下：html和css密不可分，您可能认为它们是一体的。事实上，在TimBernersLie于1989年发明互联网之后的许多年里，并没有CSS这样的东西，原始版本的网络根本就没有提供装饰网页的方法。深埋在www邮件列表中的是马克·安德森(MarcAndreessen)于1994年写的一封不为人知的电子邮件（马克·安德森也是后来著名的Mosaic浏览器和Netscape浏览器的共同开发者）。在那封电子邮件中，Andreessen指出，由于无法通过html来装饰网站，因此当Web开发人员被问及视觉设计时，他唯一能告诉他的是“抱歉，你被搞砸了”）。然而，仅仅10年后，CSS就被现代网络社区完全采用。一起来看看，一路上发生了什么？网络正在寻找一种标记语言关于网络应该如何布局的理论观点有很多。然而，这不是BernersLie的首要任务，他在CERN的大多数雇主只对网络感兴趣，因此他们的主要关注点也放在网络上。然而，社区中的开发人员提出了几种相互竞争的Web布局理论，最著名的是PeiYaunWei、Andreesen和HakonWiumLie。Pei-YuanWei在1991年创建了图形浏览器ViolaWWW，他将自己提出的样式语言融入到自己开发的浏览器中，也期望他的样式语法最终能成为网页样式的官方标准。虽然这个目标没有达到，但他提出的文体文法确实为其他一些文体文法提供了一些启发。与此同时，安德森在他的Netscape浏览器上尝试了一些不同的东西。他没有创建单独的标记语言，而是采用扩展HTML标签的方法来包含非标准化的HTML标签，以达到装饰网页的目的。不幸的是，没过多久页面就失去了所有语义，看起来像这样：This将一些字体分解成列
开发人员很快意识到这种尝试是没有希望的。随机网络社区产生了许多其他替代方案，例如RRP——一种使用缩写非常简洁的样式表语言；PSL96-一种支持函数和状态语句的语言。如果您对这些语言究竟是什么样子感兴趣，可以阅读ZachBloom撰写的一篇出色的比较文章。最终被采纳的语言是HakonWium在1994年10月提出的StyleGrammar，叫做StyleCascadingSheets，简称CSS。最终我们之所以用CSSCSS胜出，主要是因为它非常简单，这一点和同时代的相比就更加明显了。早期的CSS语法如下：window.margin.left=2cmfont.family=timesh1.font.size=24pt30%CSS是一种描述性编程语言。当我们编写CSS时，我们并没有告诉浏览器确切地如何呈现网页。相反，我们将描述HTML文档的规则一一编写出来，让浏览器处理渲染。考虑到Web主要是由业余程序员和雄心勃勃的爱好者构建的，CSS遵循一种可预测的、包容性的格式，以便任何人都可以轻松地使用它，这意味着即使出现一些语法错误，CSS仍然可以工作，它是一种特性而不是错误。CSS在某种程度上是独一无二的，正如其全称StyleCascadingTable所描述的，CSS支持样式级联。层叠是指样式可以按照特殊规则继承和覆盖之前定义的其他样式，CSS也支持在同一页面上使用多个样式表。注意到上面原始CSS语法中的百分比了吗？这其实是很重要的一点。Lie认为，用户和开发者可能使用不同的方法来定义样式，而浏览器是两者之间的中介，通过协商差异来呈现页面。上面的百分比代表样式的权重，权重越低越容易被覆盖。当Lie首次演示CSS时，他甚至添加了一个滑块来在浏览器中的用户定义样式和开发人员定义样式之间切换。在CSS的早期，这引起了很大的争论，一些人认为开发人员应该完全控制样式，而另一些人则认为用户应该有一些控制权。最终，百分比被删除以提供更清晰的覆盖规则，但这就是现代CSS支持特异性概念的原因。不久之后，Lie发布了他最初的提议。他还在BertBos团队中找到了合作者Bos。Bos是Argo浏览器的开发者。他还指定了一种与他自己的浏览器兼容的样式语言。这种样式语言后面的部分也被烘焙到CSS中。他们两人随后制定了更详细的标准，并要求新成立的HTML工作组W3C进行推广。经过多年的努力，到1996年底，CSS语法变成了这样：html{margin-left:2cm;font-family:"Times",serif;}h1{font-size:24px;}CSS诞生了。浏览器的麻烦当时，CSS只是草稿，Netscape浏览器还在押宝扩展HTML标签。他们使用了很多标签，例如multicol、layer和blink。IE零碎地采用了部分CSS标准，但与标准相比，它们的采用是非常片面的，有时甚至是错误的。这意味着在官方推荐早期CSS标准五年后，市场上仍然没有完全支持它的浏览器。第一次完全兼容来自一个非主流的地方。1997年TantekCelik参与开发Mac版IE浏览器时，他的团队还很小。一年后，他的团队减半，他成为他们渲染引擎的负责人。当时，微软的浏览器团队大部分都专注于Windows版的IE，但幸运的是，Mac版团队只需要专注于自己的设备。从2000年的IE5开始，Celik和他的团队决定专注于其他人没有的CSS兼容性。IE5的Mac版本花费了团队两年的开发时间。在此期间，Celik经常使用同一台设备与W3C成员和Web开发人员进行交流。IE-for-Mac团队逐步验证了CSS的方方面面。最后，在2002年3月，他们发布了IE5forMac，第一个支持完整CSSLevel1的浏览器。您还记得文档类型切换吗？正如我们前面提到的，Windows版本的IE也增加了对CSS的支持，但是它们的实现存在一些错误，并且它们使用的盒子模型也与标准不同。Windows合资模型在元素的总宽高中包含了border和padding等属性，标准要求设置box-sizing的值来决定是否加入到宽高中。Celik知道，要使CSS正常运行，就必须协调这些差距。在与CSS标准的倡导者ToddFahrner交谈后，他提出了文档类型切换。你一定见过它的用法，如下：以上是现代HTML5的写法，但在过去，写文档类型还是有点麻烦，如下：以上是符合标准的示例，其中-//W3C//DTDHTML4.0//EN是重点，当web开发人员将这些添加到自己的网页中时，浏览器就知道使用“标准模式”来渲染页面和CSS的解析也会符合规范。如果doctype丢失或过时，浏览器将切换到“怪癖模式”，根据旧框模型呈现内容，使用旧浏览器的非标准解析方法。一开始，一些开发者甚至倾向于故意将其设置为quirks模式，以支持旧的盒子模型。EricMeyer（有时被称为CSS之父）曾经说过：doctypeswitchingsavedCSS。也许他是对的，如果没有文档类型转换，CSS可能仍然会用各种技巧来编写以实现今天的兼容性。关于Hackofthebox模型还有一点需要单独说明。使用文档类型切换后，现代浏览器完全兼容旧站点，但是旧浏览器对新站点的兼容性不好（造成这种现象的主要原因是IE）。查看BoxModelHack，你会发现Celik使用了一个非常聪明的技巧，它使用一个非常罕见的CSS属性，称为voice-family来欺骗浏览器为一个类添加多个宽度和高度。Celik建议开发者把旧盒模型的语法放在前面，然后在voice-family属性上加一个}来关闭标签，然后写上符合新盒模型的宽度，如下图：div.content{宽度：400像素；语音系列：“”}””；声音家族：继承；width:300px;}voice-family在旧浏览器中无法识别，但它可以解析定义的字符串，因此当添加额外的}时，浏览器在读取第二个宽度之前停止解析。这种方法简单有效，并导致大量Web开发人员开始采用标准模式。标准设计的先驱Microsoft于2001年发布了IE6，虽然它最终成为Web开发人员的主要绊脚石，但它实际上为CSS标准带来了一些相当令人印象深刻的支持，考虑到它最终占据了多达80%的市场，对CSS的推广还是有一定作用的。有了标准，有了浏览器，CSS进入了生产模式。现在最需要的是让人们开始使用它。在过去的十年里，网络一直缺乏一种标准的样式语言。这并不意味着开发人员已经停止开发。事实上，他们开发了一系列的浏览器hack，比如基于表格的布局，引入flash，实现一些HTML做不到的功能。符合标准的CSS设计是一种新趋势，网络需要一些先驱者来实现它们。有两个使用CSS的重新设计相隔几个月才发布，Wired首先发布了自己的基于CSS的网站，随后不久ESPN也发布了。DouglasBowman是Wired的网页设计团队负责人。2002年，鲍曼和他的团队发现没有大型网站在其开发中使用CSS。Bowman认为重用最新的兼容HTML和CSS来开发Wired（ConnectedMagazine）是他对网络社区的愿景。义务。他推动他的团队从头开始设计，并于2002年9月推出了重新开发的网站。几个月后，ESPN也推出了他们重新设计的网站，更大规模地使用CSS标准。这些网站把赌注押在了CSS上，甚至采用了一些当时并不被看好的CSS技术。但所有的努力都得到了回报。如果你问参与重构的开发人员，他们可能会告诉你新标准的所有好处。更高的性能、更容易改变、更容易共享，最重要的是，css是网络友好的。最初有线，甚至每天都会更改颜色主题。尽管如果您现在查看重构的代码，您仍然会发现一些hack。例如，Web仍然只支持几个不同尺寸的显示器。您可能还会发现，这两个站点都使用固定宽度的列，结合相对和绝对定位进行布局，并使用图像替换文本。尽管存在这些缺陷，这些网站还是为未来的发展奠定了基础。他们是当之无愧的开拓者！CSSZenGarden和语义网2003年，JeffreyZeldman出版了他的书《Designing with Web Standards》，该书随后成为网络开发人员学习CSS标准的手册。本书去除了CSS的一些遗留技术和技巧，最重要的是帮助Web开发人员看到使用CSS进行样式开发的广阔空间。一年后，DaveShea发布了《CSS Zen Garden》，鼓励开发者将html和css分开。该网站还展示了最新的提示和建议，并通过长期解释让人们相信是时候采用标准了。现在，CSS正在缓慢但肯定地变得更加先进，添加新属性，浏览器竞相实施新标准，开发人员正在他们的项目中实施新功能。CSS已经真正成为事实上的标准。就像很久以前宣称的那样。有用的链接回顾CSS的历史（原始链接）链接到我博客上的这篇文章
