CSS简史（译）

时间  2019-11-07
标签 css 简史 栏目 CSS 繁體版
原文   原文链接

一直以为本身没学好css(事实上也许也是如此),常常据说js的历史，可是好像对css的历史却一无所知。虽然历史这类内容对实际的开发也许没有实际的帮助（不像学习了Flexbox,Grids就能立刻用到布局中），可是总以为这也是一个前端工程师应有的软知识。因此看到本文的英文原文的时候就有了翻译的冲动，但愿你读完也能有收获。css

翻译正文以下：html

html和css是那么密不可分，以致于你可能会以为它们是一块儿出现的。实际上，自1989年Tim Berners Lie发明互联网后的多年中，这个世界上都不存在一个名为css的事物，web的原始版本根本就没有提供一种装饰网页的方法。前端

在www的邮件列表中深埋着一封由Marc Andreessen写于1994年的不出名的邮件（Marc Andreessen也是后来知名的Mosaic浏览器和网景浏览器的合做开发者）。在那封邮件中，Andreessen指出因为没有办法经过html装饰一个网站，当他被问到视觉设计时，他惟一能告诉web开发者的一句话是"sorry you're screwed(对不起，你搞砸了)"。git

不过，在随后仅短短10年后，CSS就被一个现代的web社区全面采用，咱们一块儿来看看，这一路发生了什么？程序员

web在寻找一种标记语言

关于web如何布局存在不少种理论上的观点。然而，这并非Berners Lie 的优先考虑事项，他在欧洲核子研究中心的雇主大多只对网络感兴趣，所以他们的主要精力也是集中在网络上。不过，社区中的开发者则提出了一些竞争性的网页布局理论，最显着的理论分别来自Pei Yaun Wei，Andreesen和HakonWium Lie。github

Pei-Yuan Wei在1991年建立图形浏览器 ViolaWWW ，他整合了他本身提出的样式语言到本身开发的浏览器中，还指望本身的样式语法最终能成为web关于样式的官方标准。虽然这个目标并未达到，可是他提出的样式语法确实为其它的一些样式语法提供了一些灵感。web

ViolaWWW示例

与此同时，Andreessen 在他开发的网景浏览器中进行了不一样的尝试。他并无建立一种分离式的标记语言，而是采起拓展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>

开发者很快就意识到，这种尝试是没有前景的。随机web社区产出了不少其它的替换方案，好比RRP--一种运用缩写很是简洁的样式表语言；PSL96--一种支持函数和状态语句的语言。若是你对这些语言具体是什么样子的感兴趣，能够参考Zach Bloom 写的一篇很是优秀的比较文章。windows

最终被你们采纳的语言是由Hakon Wium 在 1994年 10月提出的样式语法。它被称为样式层叠表，简称CSS。浏览器

咱们为何要使用CSS

CSS最终胜出的主要缘由是由于它很是简单，这一点在和它同时代的竞争者比起来则更加明显。早期的CSS语法以下：

window.margin.left = 2cm
font.family = times
h1.font.size = 24pt 30%

css是一种描述性的编程语言。当咱们写CSS时，咱们并不会告诉浏览器具体该如何渲染网页。相反，咱们逐个写好描述HTML文档的规则，让浏览器来处理渲染。考虑到网络主要是由业余程序员和雄心勃勃的爱好者构建，CSS遵循了一种可预测的，包容性的格式，这样任何人均可以轻易的使用它，这意味着就算部分语法有误，CSS仍是能够正常运行，这是一种特性而非一个bug。

CSS从某种程度上看又是独一无二的，就像它的全名样式层叠表中描述的那样，CSS支持样式级联。级联意味着样式能够遵循一个特殊的规则继承和覆盖以前定义过的其它样式，并且CSS还支持在同一个页面上使用多个样式表。

注意到上面最初CSS语法中的百分比没？这实际上是很是重要的一点，Lie相信，用户和开发者可能会采用不一样的方法来定义样式，浏览器则是二者之间的中介，经过协商差别来呈现页面。上面的百分比表明了样式的权重，权重越低越容易被覆盖。当年Lie在初次展现CSS时，他甚至添加了一个滑块，用以在浏览器中切换的用户定义样式和开发者定义样式。

在CSS提出的早期，这一点引发了大辩论，一些人认为开发者应该具有对样式彻底的控制权限，其余人则认为用户应该具有必定的控制权限。最终，为了提供更清晰的覆盖规则这个百分比被移除了，不过这也是现代CSS中支持权重Specificity这一律念的缘由。

不久后,Lie就发布了他的原始提案，他还在Bert Bos团队找到了一个合做者Bos，Bos是Argo浏览器的开发者，他也指定了兼容本身浏览器的样式语言，这种样式语言以后部分也被融入到CSS中。随后他们两人制定了一个更为详细的标准并向新建立HTML的工做组W3C求助推广。

通过多年的努力，到1996年末，CSS语法变成了下面这样：

html {
  margin-left: 2cm;
  font-family: "Times", serif;
}

h1 {
  font-size: 24px;
}

CSS自此诞生了。

浏览器的麻烦

当时因为CSS还只是是一个草案了，网景浏览器仍是压宝在拓展HTML标签上，他们使用了大量诸如multicol,layer,blink这类的标签。IE则零碎的采用了部分CSS标准，不过他们的采用很是片面并且有时和标准比起来仍是错误的。这意味着，早期的CSS标准在通过五年的官方推荐以后，市面上仍是没有彻底支持它的浏览器。

第一次完整的兼容来自于一个非主流的地方。

当Tantek Celik在1997年参加开发Mac版本的IE浏览器时，他的团队还很是的小。一年后，他的团队人员被减半，他成为了他们团队渲染引擎方面的领导，当时微软的浏览器团队的大部分的精力集中在windows版的IE上，不过还好Mac版团队则只须要关注他们本身的设备。从2000年的IE5开始，Celik和他的团队决定把焦点放在其余人还不关注的对CSS的兼容上。

Mac版的IE5花费了该团队两年的开发时间，在此期间，Celik和使用相同设备的W3C成员及web开发者交流频繁，IE-for-Mac团队逐步验证了CSS的各方面。终于，在2002年3月，他们发布了Mac版的IE5，这是第一个支持完整CSS级别1的浏览器。

文档类型切换

还记得吗，前面咱们提到，windows版的IE也添加了对CSS的支持，可是他们的实现有一些bug和他们使用的盒子模型也和标准不同。windows的合资模型把border和pading等属性在包含在元素的总宽高内，而标准都要求经过设置box-sizing的值来肯定其是否被添加到宽高中。

Celik知道，想让CSS正常发挥做用，这些差距必须被调和。他在和CSS标准的倡导者 Todd Fahrner 交谈后提出了文档类型切换，其使用方法你必定见过，以下：

<!DOCTYPE html>

上面是现代HTML5的写法，不过在之前，写文档类型仍是有些繁琐的，以下所示：

<!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开发者添加这些到他本身的网页时，浏览器就知道将使用"标准模式"standards mode来渲染页面，CSS也的解析也将与规范一致。若是文档类型丢失或过时，浏览器将切换到“怪异模式”（quirks mode），根据旧盒子模型渲染内容，采用老浏览器的非标准解析方式。在最初，一些开发者甚至倾向于有意设置为怪异模式以得到对老盒子模型的支持。

Eric Meyer(有时候被称为CSS之父)曾经说过:文档类型切换拯救了CSS。也许他是对的，若是没有文档类型切换，今天可能还须要用各类技巧来写CSS以实现兼容性。

盒子模型的Hack

还有一点须要单独说明，使用文档类型切换后，现代浏览器对老站点兼容无缺，可是旧浏览器新站点的兼容性却并很差（形成这种现象的主要缘由是IE）。查看Box Model Hack你会发现Celik采用一个很是高明的技巧，它利用了一个很是少见的被称做voice-family的CSS属性来欺骗浏览器用以实如今一个类中添加多个宽高。Celik建议开发者把旧盒子模型相关语法放在前面，而后在voice-family属性中添加一个}来实现对标签的关闭，以后再写符合新盒子模型的宽度，以下所示：

div.content { 
  width: 400px; 
  voice-family: ""}""; 
  voice-family: inherit;
  width: 300px;
}

voice-family在旧浏览器中没法识别，可是却能解析定义的字符串，因此当添加额外的}时，浏览器会在读取第二个宽度以前中止解析。这种方式简单有效并使得大量的web开发者开始采用标准模式。

标准设计的先驱

2001年微软发布了IE6，虽然它最终仍是成为了web开发者的一大绊脚石，但它实际上带来了一些很是使人印象深入的对CSS标准的支持，考虑到它最终占据了高达80%的市场，它对CSS的推广仍是有必定的做用的。

标准有了，浏览器也有了，CSS进入了生产模式。如今最须要的是人们开始使用它。

过去十年里，web一直缺乏一个标准的样式语言，这并不是意味着开发者中止了开发，实际上他们开发出了一系列的浏览器hacks，好比基于表格进行布局，引入flash并实现一些HTML不能作到的功能。兼容标准的CSS设计是一种新的趋势，web 须要一些先驱者来运用它们。

有两个网站运用了CSS进行了重设计，它们只相隔几个月出现，Wired（连线杂志）首先发布了本身的基于CSS标准的网站，以后不久ESPN也发布了基于CSS标准的网站。

Douglas Bowman 是Wired(连线杂志)的web设计团队负责人。在2002年时，Bowman和他的团队发现尚未大型的网站在他们的开发中使用CSS，Bowman以为从新使用最新的兼容性的HTML和CSS来开发Wired（连线杂志）是他对web社区的一种义务。他推进着他的团队从头开始设计，在2002年9月，他们上线了从新开发的站点。

第一个彻底运用CSS的大型站点

ESPN在仅仅几个月后也上线了他们重写设计后的站点，他们更大规模的运用了CSS标准。这些网站压赌在CSS上，甚至采用了一些当时不被看好的CSS技术。可是全部的付出都赢得了回报，若是你去问参与了重构的开发者，他们也许会口若悬河告诉你新标准带来的各类好处。更高的性能，更方便更改，更容易分享，最重要的是，css仍是web友善的。Wired最初甚至每日更换颜色主题。

采用CSS的ESPN

虽然若是你如今去细看这些重构后的代码，仍是会发现一些hacks。好比web仍是只支持几个不一样尺寸的显示器，你也许还会发现这两个网站都使用固定宽度的列结合相对和绝对定位来进行布局，使用图片被用来替换文字。虽然存在这些缺陷，这些站点仍是为接下来的开发打下了基础。他们是值得尊敬的先驱！

CSS禅意花园和语义化的web

2003年，Jeffrey Zeldman 出版了他的书 《Designing with Web Standards》，这本书随后成为了web开发者学习CSS标准的手册。书中去除了CSS的一些遗留技术和小技巧，最重要的是帮助web开发者看到了使用CSS进行样式开发所拥有的广阔空间。一年后，Dave Shea发布了《CSS Zen Garden》，它鼓励开发者分离html和css。还该网站展现了最新的技巧和建议，并经过长期的说明来让人们确信如今是采用标准的时代了。

如今，伴随着缓慢而坚决的势头，CSS愈来愈高级，并逐步加入了一些新属性，浏览器也开始竞相实现新标准，开发人员不断在本身的项目中运用新特性，CSS真的成为了事实上的标准。就像好久以前它声称的那样。

有用的连接

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程