阅读更多

20年前的今天(10月10日),Opera CTO Håkon Wium Lie发布Cascading HTML style sheets – a

proposal。假如Paul McCartney是一名Web开发者,并在今天写下《Sergeant Pepper's Lonely Hearts Club Band》,那他一定会这样写: 

It was twenty years ago today 
That Håkon wrote a doc to say 
That if the Web's gonna last a while 
Then we need a way to define style. 
So may I introduce to you 
a way to add visual treats: 
It's Sergeant Håkon's Cascading Style Sheets!

不过,当我们找到Paul家,请他为我们唱这首歌的时候,他却拒绝了,而且放出了他的看门狗FontTagBgcolor。那还是算了,为纪念这个好日子,Bruce面对面向Håkon提了一些问题,关于CSS的过去、现在和未来。

Opera’s CTO Håkon Wium Lie 

CSS的构想诞生于20年前。你对自己这个宝贝、孩子、小青年的成长感到满意吗?

当然,我对CSS的发展非常满意。CSS是Web规范的一块基石,有了CSS网页漂亮多了。HTML依旧生机勃勃就是CSS成功的明证。不过就像一个年青人一样,它还是有很大的上升空间。

你说过自己建议CSS是“要拯救HTML”,为什么这么说?

如果没有CSS,那么HTML恐怕会与今天大不相同。有桌面出版背景的作者认为它没有<color><font>标签,很不习惯。当然也包括我自己。我自己发布的第一个网页就使用了带有文本内容的图片, 历史存档在这里。 如果按照这个思路继续发展下去,Web就会变成一台巨型传真机,文本图片可以传来传去。但对视障用户或者搜索引擎而言,这就很讨厌了。我建议CSS就是想阻止这种发展势头,同时为作者提供一种表达自己设计意图又不必增加新HTML标签的方式。

在第一稿建议中,有一个影响百分比说明符,像h1.font.size = 24pt 100%,就是这样描述的:

该行末尾的百分比表示要求的影响程度(这里是100%)。如果它在一个初始样式表(如用户控制的样式表)里面,则这个要求可以满足,比如用Helvetica来显示所有标题元素。如果这个语句来自后来的样式表,则保证满足未声明影响的样式。

为什么又抛弃了?

这种办法是想把作者和用户的要求与偏好组合到一起,是受了 MIT Media Lab的一个思路的启发,他们认为未来电视可能不会提供亮度和色彩的控制,而是会控制色 情和暴力,或者左派、右派之类的。我的CSS建议是想着有一把滑尺,作者对滑尺的一端有完全控制力,而用户则对另一端有完全控制力。在滑尺中间,浏览器又可以混入一些要求,从而让所有人都能接受。这个办法对有的属性管用(如font-size),但对另一些属性(如font-family)则不行。Bert在对第一稿的回复中 批评了这个思路

我觉得把两种设计方案折中成一个中性样式表的思路是错误的。如果我要求蓝黄,而别人要求黄蓝,那怎么办?结果难道是绿绿吗?谁希望看到标题很新潮,而正文却使用Helvetica?

我回复道

 

有些属性可以混合,有些不行。“加权平均数”的典型应用是弱化作者的个性化倾向,比如建议的字号大小,而用户仍然可以对此有所控制。当然不一定非要使用这个功能,尽管“100%”等于二进制的“1”,但在二进制里反过来则不行。我认为计算机接口的二进制有点过。

当然,Bert是对的(通常他都是对的),那样的话不仅不解决问题还会制造新问题,所以我就抛弃了混合的思路。 

 

上面使用的是JS风格的点语法。后来为什么又改了?

你管它叫JS风格的语法,这很有意思。我在提出CSS建议的时候,JavaScript还不存在呢,所以我不可能借鉴它的语法。实际上这个写法借鉴了 X11 Window System中的 X资源,那是MIT的又一个令人激动的项目。

之所以CSS语法由font.size改成font-size,有两个想法。首先,连字符让属性更像书面英语,让人觉得亲切易懂。其次, DSSSL和 DSSSL-Lite就使用这种连字符属性名。编写过DSSSL-Lite第一稿的James Clark参加了 W3C关于样式表的第一次研讨会,Bert和我就从DSSSL中借鉴了连字符。说到不方便,就是连字符在数学里表示减号,有时候会给解析器制造点麻烦。

Bert Bos是怎么参与进来的,你们俩怎么分工?

Bert Bos审阅了我的建议初稿。他的背景和兴趣跟我有点不一样,但在他写完了 他的建议后,我们很快意识到我俩的建议可以整合成一个。那时候,CERN不再支持Web项目,而W3C成立了。于是我就在 INRIA组建了W3C的欧洲分支,立刻聘用了Bert。CSS1的大部分内容都是1995年7月我们在索菲亚安替城(Sophia-Antipolis )用白板讨论出来的。Bert直到现在还在索菲亚安替城的W3C上班。每当我遇到棘手的技术难题,都会想起Bert和那块白板。

说到对CSS做出过贡献的人,我不能不提Thomas Reardon和Chris Wilson,他们都是微软的。Thomas是IE(Internet Explorer)的项目经理,他很早就想到了为Web引入样式表。Chris Wilson是负责把CSS加入IE3的程序员。IE3的实现很不标准,但别忘了它是在CSS1制定完成前发布的。Simon Daniels(也是微软的)用IE3写了一些叫人过目不忘的演示。他们的工作表明了一家大软件公司在支持刚刚诞生的标准。

有其他竞争性的建议吗?为什么你们的比别的好?

样式表语言的建议大概有十来个吧。不过,这些建议并不都适合Web。比如,浏览器会渐进地渲染并显示文档,那就必须处理找不到样式表的情况。能上网的设备也不少,需要能够为不同的设备编写样式表。因此,样式表语言必须能表达可伸缩且适应性强的设计。这是一个令人神往的研究领域,我为此还写过 一篇博士论文,其中比较了不同的样式表建议的手段。

当然,你的第二个小问题,我肯定就比较主观了。但我相信CSS确实具有几个显著的特性,特别适合在Web上使用:层叠、伪类和伪元素、向前兼容的解析规则、支持不同的媒体类型、重点突出选择符,还有特别棒的em单位。

你(和Bert)犯过最大的错误是什么?

我的博士论文专有一章说明CSS的问题。确实有问题,甚至有些都是自找的。但CSS1遇到过的最大的问题并非其设计(设计还是相当好的,我觉得),而是最初的实现。Jeffrey Zeldman曾提到这个情况:

如果Netscape 3忽略应用到<body>元素的CSS规则,并随意为页面中的每个结构化元素都添加一些空白,如果IE4能正确处理<body>但填充却很拙劣,那怎么写CSS才能放心?有些开发者为此根本就不会写CSS。有人写了一个样式表来补偿IE4的缺陷,写了另一个样式表纠正Netscape 4的错误。

微软和网景(Netscape )在这个问题上都有责任,而我们——我、Bert、W3C——如果能依照CSS1规范拿出一套测试也可以避免很多问题。第一个真正的CSS测试是1998年10月份才出现的,那就是Todd Fahrner发布的 Acid测试。那个测试很有创意、一目了然,让开发者马上就知道自己是否通过了测试。一开始,没有一款浏览器能通过测试。但自从有了这个测试,加上CSS社区的强力推动,事情开始有了转机。 WaSP在推动标准化的进程中扮演了重要角色。Opera浏览器也起到了重要作用,它向世人展示CSS实际上是可以正确实现的。在了解到Opera的CSS实现非常彻底(比微软和网景都强太多)之后,我加入了Opera。

我在加入之前,Opera就以其浏览器能装进一张软盘(1.44 MB)而著称。“装进一张软盘”在当时是个很厉害的标志。添加对CSS的支持之后,浏览器有点“发福”,Opera不能再那么宣传了。“几乎可以装进一张软盘”听起来可没原来那么牛。

最初的Acid测试之后又出现了 Acid2和Acid3,背后的逻辑都一样:一个可视化的高要求的网页,用于测试各种CSS特性。Acid2的推出是受到 比尔·盖茨一封公开信的激发,那封信赞美了互操作性。让IE7遵循CSS标准看起来就是自然而然的了,随后微软就受到了Acid2的挑战。公平地讲,其他浏览器也有问题,Acid2让它们暴露了很多bug。微软的IE7对Acid2视而不见,但随后的IE8却完美地通过了测试,挺神奇的。现在的浏览器也都能了。

为什么你决定在盒模型中使用外边距、内边距、边框声明宽度,而没有使用IE5的box-sizing: border-box盒模型?

这两种盒模型都有相应的用武之地。如果你想拉伸一张图片以填充整个内容盒子,那么就要使用最初CSS的盒模型。如果你认为内边距和边框不应该扩展到某个区域之外,那IE5的盒模型更合适。个人认为,CSS盒模型的用途更广一些,可一些我很敬重人都不这么认为。这个冲突现在已经通过增加对box-sizing属性的支持得到了很好的解决。

我一直非常不喜欢绝对定位。是我的问题吗?规范中怎么会加入这个特性呢?

你这个问题让我想起了1996年的一些激烈的争论。简单地说,就是微软在一个叫做 CSS Regions: Absolute Positioning and Z-Ordering的草案中提出了绝对定位这个特性(没记错的话,当时的讨论仅限于W3C成员的邮件列表;最接近的公开文档是 WD-positioning)。有些新成立的CSS工作组成员持保留意见,Bert和我写了 一个简单的反对案。我们提议删掉position属性(用display代替),只描述相对定位(从而有时间好好讨论绝对定位)。但微软已经实现了自己的建议,不情愿删掉这个功能。最终,唯一重要的变化就是添加了rightbottom属性(平衡lefttop),以及position: fixed。这就在后来的CSS2中体现了出来。

跟你一样,我也一直不怎么喜欢绝对定位。有人说,绝对定位在Web上已经有了它的位置,而我时不时会用它实现一些编码不太可能实现的效果。

我曾听人说过不应该使用浮动来布局,因为这不是浮动特性“设计的初衷”,浮动最初只是为了实现图文绕排的。这样用有问题吗?

图文绕排是一个基本的布局技术。因此毫无疑问,浮动应该可以用于布局。我希望CSS能进入 屏幕分页展示这个领域。在分页内容时,浮动会更重要,因为你可以把元素浮动到屏幕的上头和下头。

如果你能施展魔法,那你最希望当前CSS中的哪些东西从这个世界上销声匿迹,又希望添加并让哪些东西瞬间无所不在?

我希望清除特定于浏览器版本的代码,比如<!--[if lt IE 7 ]>。虽然从技术上说这不属性CSS,但这种“注释”不应该成为必要的东西,它们败坏了Web标准的名誉。

你提的后一个问题更有意思。如果是在2006年,我想说 Web字体。如果是在2007年,我想说<video>元素(误入HTML领地有年头了)。这两者现在所有浏览器都支持了。

2011年,看到那么多应用使用页面(不带滚动条)创建令人眩目的幻灯片,我开始想让网页变成真正的页面。思路就是样式表可以触发分页模式,把内容分配到多个页面中。用户可以通过手势或者PageUp和PageDown切换页面。我希望这样一来在浏览器中创建电子书不仅成为可能,甚至更容易。为此,有点魔法会更好。你可以帮我在所有浏览器提供商的额头上撒些仙尘吗?

为什么我们还不能通过CSS实现分页布局,又不是什么尖端技术?(Flexbox,注意啦……)

布局很复杂,在Web上实现布局更复杂,因为页面要在很多不同设备中显示。CSS有几种排布内容的机制,包括绝对定位元素、浮动、多栏布局和CSS表格。这些特性综合运用起来非常复杂,但我也不认为这是什么尖端技术。不过我承认没有怎么用过Flexbox。

你怎么看SASS和LESS这些预处理器?CSS可以从这些技术上借鉴什么?

当然,预处理器很有用。我想可能可以从预处理器的功能里选择5个左右最流行的,内置到CSS里。我个人比较喜欢嵌套选择符、单行注释(以//开头)。等CSS 50岁的时候,我会告诉你为什么CSS一开始并没有考虑这些。

你是WHATWG的成员,怎么会出现这个组织?

WHATWG成立于W3C想要放弃HTML,并把工作重心转移到基于XHTML、XForms、SMIL和SVG构建 混合文档上的时候。对浏览器制造商而言,HTML太重要了,怎么能放弃呢!因此,当时还在我的Opera团队的Ian Hickson成立了WHATWG,继续开发新的Web标准。同时,我们也关注微软的XAML,它在专有应用语言上面加入了一层简单的XML。因此WHATWG的目标就是应用,而不是文档。Ian作为编辑还在继续开发HTML标准, 硕果累累

你是CSS之父,但你最近却在WHATWG而非W3C的CSS工作组名义下发布了一些规范。为什么?

事实上, CSS Figures和 CSS Books是WHATWG的工作项目。以WHATWG的名义发布这些规范有重大的意义。这个“活标准”模型可以低成本快速更新,这与过去发布W3C Working Drafts的困难程度形成了鲜明的对比。WHATWG 保持规范适度超前于实现而不致使实现放弃的目标,我非常认同。

最后一个问题,CSS还能胜任自己的角色吗?或者说,我们是不是应该换一个新模型,比如网格样式表(Grid Style Sheets)?

1999年,Ethan Munson和Philip M Marden就提到“对样式表语言的研究严重不足”。这个结论到今天依然不过时,任何研究和改进样式表的努力都必须鼓励。

GSS是个有意思的例子,它在样式表机制中添加了“Cassowary”约束求解器。在1995年最初的CSS实现中,我使用的是“SkyBlue”约束求解器来解决样式表语句的冲突。(顺便说一下,这两种约束求解器都是华盛顿大学开发的。)通过约束求解器可以表达任意两个元素之间的关系,并能自动解决冲突。可是,随着旧元素的消失和新元素的加入(比如通过DOM操作),问题会变复杂。此外还要恰当地处理好循环依赖。考虑到这些问题,我很早就打消了通过CSS表达任意元素间布局约束的念头。

过去,要支持新规范必须说服所有浏览器制造商,要他们拿出宝贵的开发时间。这就提高了门槛,可能还高得离谱。而现在,已经可能像通过库扩展JavaScript一样扩展浏览器了,试验和研究样式表容易多了。

回到你的问题上:CSS还胜任它的角色吗?我认为胜任。我还没看到有可能取代它的新模型出现。新想法一定会有,但应该会扩展而非替代CSS。我相信我们今天写的CSS代码,500年后的计算机仍然能看懂。

谢谢你接受采访,祝CSS生日快乐!

英文来自: Dev.Opera

 

  • 大小: 75.7 KB
来自: 图灵社区
0
1
评论 共 1 条 请登录后发表评论
1 楼 SimleGate 2014-10-13 23:14
   

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • MM计算方案详解

    计算方案确定了所有条件类型,并控制这些条件类型如何来计算价格,下面分别对计算方案的各个选项加以说明:     步骤:就是用来标识条件类型在方案中的编号,步骤编号必需按升序排列,但中间可有间隔。通常我们在各个步骤间都会设置有间隔,这主要是为了将来方便修改计算方案。     计数:用来标识同一步骤中有不同的计算条件类型,如PB00与PBXX都是计算总价格,但PB00一般是由系统自动计算而PBXX是

  • Merkle Tree(默克尔树)算法解析

    Merkle Tree概念 Merkle Tree,通常也被称作Hash Tree,顾名思义,就是存储hash值的一棵树。Merkle树的叶子是数据块(例如,文件或者文件的集合)的hash值。非叶节点是其对应子节点串联字符串的hash。[1]1、HashHash是一个把任意长度的数据映射成固定长度数据的函数[2]。例如,对于数据完整性校验,最简单的方法是对整个数据做Hash运算得到固定长度的Has

  • 2018_初试 400+_浙大计算机考研经验

    初试各科:政治 65+,英语 85+,数学 130+,专业课 125+ 。跨考党。 以下经验方法,大家作个参考,根据具体效果决定是否采纳哈。 (1,大家有问题的话,也可以在这篇博客下留言。能力所及的范围内 会回答的) (2,更新的内容(少量)放在文章末尾)   政治: 所用资料:肖秀荣1000题,风中劲草核心考点,肖四,肖八 1,  开始复习时间。我个人属于看书偏慢的,政治复习开始比...

  • 双非保研攻略——保至复旦大学软件学院

            写这篇文章真的是想让双非的学弟学妹知道:双非保研确实不容易,但是如果你不放弃,最终还是会有好结果的。        在我感觉,大家如果是双非学校来保研的,首先应该感谢你的学校,因为还有大部分双非学校没有保研资格,你如果去了那边,你可能根本不会有你现在保研的名额,所以在此,先感谢我的母校——青岛大学。         保研的过程基本是:预测自己有保研名额——参加夏令营——获取推免...

  • 大量海归来抢工作了!图解大数据:为何80%留学生选择回国

    1847年,“中国留学生之父”容闳,漂洋过海三个月抵达纽约。7年后,他带着耶鲁大学第一张颁给中国人的毕业证书回国,成为中国第一位“海归”。百余年后,中国成为世界上最大的留...

  • p问题、np问题、npc问题、np难问题的理解(纯属个人见解)

    最近因为要证明np问题,所以找了一系列概念去理解这4个问题。理解的时候看到好多人给出了不同的答案,我下面会借鉴别人的答案来总结出一份对于我自己来说,最容易理解这4个问题的说法。 预备知识了解: 这部分内容的参考链接 时间复杂度 表明问题规模扩大后,程序需要的时间长度增长得有多快。程序的时间复杂度一般可以分为两种级别: (个人感想:这个对于程序员或者学数学或其他的来说不陌生,从程序的角度出...

  • 详解线索二叉树

    遍历二叉树是对非线性结构进行线性化操作,在得到的访问序列中,每个结点都只有一个直接前驱和一个直接后继。(除区头尾两个结点) 引入线索二叉树可以加快查找前驱与后继结点的速度,实质就是将二叉链表中的空指针改为指向前驱或后继的线索,线索化就是在遍历中修改空指针。 通常规定:对某一结点,若无左子树,将lchild指向前驱结点;若无右子树,将rchild指向后继结点。 还需要设置左右两个tag,用来标

  • 高校一级学科整体水平排名

    (根据全国学位中心评估结果)   数学  北京大学、复旦大学、浙江大学、南开大学、中山大学、中国科学技术大学、四川大学、南京大学、清华大学、北京师范大学、华东师范大学、吉林大学、中南大学、大连理工大学、西安交通大学、哈尔滨工业大学、国防科学技术大学、华中科技大学、北京理工大学、湖南大 学、苏州大学、首都师范大学、西北大学、湖南师范大学、东南大学、东北大学、华中师范大学、西安电子科技大学、西北

  • C++中虚函数、虚指针和虚表详解

    关于虚函数的背景知识 用virtual关键字申明的函数叫做虚函数,虚函数肯定是类的成员函数。 存在虚函数的类都有一个一维的虚函数表叫做虚表。每一个类的对象都有一个指向虚表开始的虚指针。虚表是和类对应的,虚表指针是和对象对应的。 多态性是一个接口多种实现,是面向对象的核心。分为编译多态性和运行多态性。 运行多态用虚函数来实现,结合动态绑定。 纯虚函数是虚函数再加上=0。并且该函数只有声明,没有实现。 抽象类是指包括至少一个纯虚函数的类。 详细原理: 编译器在编译的时候,发现Base类中有虚函数,此时编译器

  • 【研】2019 届 计算机 夏令营

    蓝色的是链接额。。 A+  北京大学         前沿交叉学科研究院   截至6.6     7月11日-13日       信息科学技术学院      截至6.10         信息工程学院(深圳)截至6.6     7月18日-21日 清华大学         交叉信息研究院        截至5.12    6月9日-10日             软件学院       ...

  • 线性规划-单纯形法算法(最好的一篇博文)

    这里是一位UCASer的一篇介绍关于线性规划的单纯形法算法的blog,是我看过解释最好一篇,写过blog的博主都知道,好的一篇blog是要花费很长的时间,这里很佩服博主,借鉴以学习。参考链接...

  • 2019复旦计算机专硕考研经验

    战果 政治 英语二 数学二 专业课 (960) 初试总分 复试总分 64 82 121 110 377 78.91 初试排名大约为 70. 初试 政治 我政治是从 10 月份开始复习 (预习)的. 政治完全没必要更早时间开始看, 一方面是因为每年政治考纲变化大, 所以往年教材参考意义不大, 另一方面 2 至 3 个月确实足以应付政治. 一轮预习: 10 月初 ~ 11 月初 使...

  • 开放下载!复旦大学邱锡鹏教授发布教科书《神经网络与深度学习》

    点击“小詹学Python”,“星标”或"置顶"关键时刻,第一时间送达本文转载自“机器之心”从2016到2019,根据多年教学和研究经验,邱锡鹏教授完成了深度学习教科书《神...

  • Spark的深入浅出

    Spark的简介 维基百科: Apache Spark是一个开源的集群运算框架,最初是由加州大学柏克莱分校AMPLab所开发.相对于Hadoop的MapReduce会在运行完工作后将中介数据存放到磁盘中,Spark使用了内存运算技术,能在数据尚未写入硬盘时在内存分析运算.Spark在内存内运算速度能做到比Hadoop MapReduce的运算速度快100倍,即便是运行程序于硬盘时,Spark也...

  • 操作系统CPU上下文切换

    进程切换 进行进程切换就是从正在运行的进程中收回处理器,然后再使待运行进程来占用处理器。 这里所说的从某个进程收回处理器,实质上就是把进程存放在处理器 的寄存器中的中间数据找个地方存起来,从而把处理器的寄存器腾出来让其他进程使用。那么被中止运行进程的中间数据存在何处好呢?当然这个地方应该是进程的 私有堆栈。    让进程来占用处理器,实质上是把某个进程存放在私有堆栈中寄存器的数据(前一次本进程

  • [保研直硕直博经验分享-2019] (上海交大计算机系夏令营+九推)

    文章目录前言保研成功的条件官方通知搜索方式报名条件以及时间节点报名条件时间节点夏令营时间点九推时间点夏令营前准备暑期夏令营机考机房环境题目类型面试九月推免其他问题和建议需不需要联系导师六级分数的高低重不重要十月推免学硕和专硕的区别后记 前言 作为一个喜欢顺其自然,几乎没有刻意追求什么的人,我在大学四年其实没有明确的目标和规划,对于保研的流程和方法也几乎一无所知,对于这件事情,我唯二的概念是,要保持...

  • 华为OD机试D卷 - 用连续自然数之和来表达整数 - 免费看解析和代码.html

    私信博主免费获取真题解析以及代码

Global site tag (gtag.js) - Google Analytics