说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

CSS生日快乐:CSS之父Håkon Wium Lie访谈录

HTML文档下载 WORD文档下载 PDF文档下载
CSS是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

【编者按】CSS是能够真正做到网页表现与内容分离的一种样式设计语言,相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。


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的过去、现在和未来。

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

译文出自:图灵社区

冼茂源:HBase在垂直搜索业务以及数据存储中的应用! 阿里云计算北京布点 全球第三个云数据中心开放 【走近讲师】友友天宇CEO姚宏宇:与行业结合是私有云厂商的重要出路 万亿移动支付产业的难点和痛点 削减硬件运营成本?亚马逊或自主研发ARM架构芯片 开源框架eMobc:XML开发原生移动应用so easy iOS应用安全开发,你不知道的那些事 市场化API的十个捷径 MongoDB和Cloudera结盟,欲征服大数据市场 红帽收购Inktank,将统一Gluster与Ceph? 那些巨头公司Logo是这么演变来的…… 以史为镜,剖析PaaS大迷局 “心脏出血”还不够?又曝OAuth和OpenID登录漏洞 走近讲师:搜狐于顺治讲述搜狐PaaS云平台实践之路 AppFlood 2014 Q1报告:亚洲和中东市场成为开发者出海首选 华为联合运营商构建能力开放平台 Facebook产品设计主管:揭秘公司如何招聘优秀设计师 【附信息图】美国因软件缺陷导致的十大事件 二十一世纪Windows简史 为什么用户体验和生态系统决定云公司的成败 三星Tizen,路漫漫其修远兮 用户体验是新优势,互联网会受到何种影响? 从GitHub看编程语言流行度 陈沙克:Openstack Horizon Icehouse Blueprint简介 叶琪:Hadoop不是万能的 要明确场景扬长避短 云网融合驱动数据中心技术聚变 给想持续编码CEO的4个建议 盘点开发者最喜爱的十大开源Xcode插件 Cloudera CTO:取代MapReduce 未来会加大Spark等框架投入 中航信资深分析师李洋:自主搭建云平台 助力民航业低成本迎接大数据挑战 安全狗创始人陈奋:借助Hadoop与Spark,欲打造服务器上的360 如何解决MSN Messenger5.0不能发送文件给MSN Messenger4.6的问题? 怎样把时间放到数据库表里,格式需要转换吗? 文件操作,帮个忙吧? simple question 60 points wait for your picking 如何卸载rose 分虽小,结得快的啊!讨论一下…… option explicit是什么意思 大哥大姐们!看一下嘛!帮帮我! 又一次被奶牛拒掉,而且有了注册机。 simple question 60 points wait for your picking (菜鸟的问题)在EditBox中怎么换行? 超级难题 SQL如何写??? 如何让WinCE支持DVDROM 請問如何在ASP.NET中實現從客戶機上傳文件到服務器? 新手问:我声明api,但是参数里有我没有定义的类型,pb报错,怎么办 关于Tclientdataset中commandtext的问题 关于按扭的简单问题 调用ejb的错误,请帮忙看看,帮我顶顶也给分,谢谢 关于lei的配置问题 java中 ,换行为\r\n ,空格为什么呢???? 关于快速排序的问题?在线等待!!! 如何在网页上显示动态图表?(送100分) 高兴,散分,收集故事喽,多讲多得,不讲不得。请斑竹留情,不要删除。 一个文件上传的bean编译成功了,但不会使,哪位用过,请给出使用的源代码,或者其它能实现上传的也行,越简单越好并附说明的 我想在触发器中得到对当前表的SQL操作的内容,应该如何实现??v$sql视图中有相关的信息,如何提取?? 心情好好,散分,各位谈谈LINUX和UNIX的感受啊:) Can u help me? 在B/S下如何根据不同用户来相应的mail库 insert into 求解! 各位高手帮帮忙,关于存储过程的问题 请教:VFP6在表单1中,关闭表单1打开表单2。结果显示表单2后,表单1又显示了一下才关闭。怎样让表单1直接关闭呢?谢谢! 很简单的问题--可是我不懂如何用javascript实现弹出窗口(无菜单和工具条的) 请高手帮忙有关“邮件多播”的问题。 《Oracle Pro *C/C++设计》的下载 哪位有最简单的SERVLET的里子,包括添加,查询。。。 水园的人有没有搞过聚会啊? SOS,用脚本连接数据库问题,100分求助,请帮忙。 救救我!SOS!SOS! 请问谁有恩雅的Mp3下载地址吗? 提示wscript未定义?该如何改呢? 关于C#遍译可执行程序问题 请高手看看,这个问题很有意义!为了同时查询不同的数据库(在不同的服务器上),请问用ASP怎么样实现多线程查询不同的库? 我是初学者,在开发ejb中,请问update、add和delete 的操作 ,在session bean中直接写sql来updat、add、delete语句对库操作行吗?还是在e 请问如何编程实现将打印的内容控制在一页之内? 请问如何编程实现将打印的内容控制在一页之内? 微软专家来看:我的datagrid排序还不行,为什么??? ******请教,VC中重新排版源代码的功能按键怎么用???****** 请教MYSQL_RESULT()函数! 加密方法分析 我是初学者,在开发ejb中,请问update、add和delete 的操作 ,在session bean中直接写sql来updat、add、delete语句对库操作,还是在entiy 防伪编码排版 Do you swim in the river or in the swimming pool?回答请详细说明 SPEED DRIVER 哪里可以买到 SD1的卡要练的很厉害的2 soon finish the book write how you如何连词成句今天的作业,快点 我心中的好同学 作文 please drive (at) a safe speed的意思为什么不能用by What is the biggest country ________(anaadC)把打乱的单词拼好What is the tallest tree?_________(ewRdood)把打乱的单词拼好 我固执的无可救药用英语怎么说 求短时间提高英语口语的办法!本人水平特差 选词填空 1.are they[ ].yes,they are a.swim b.going to swimming c.swimming d.swims 是我太固执还是你太偏执用英语怎么说 北京哪些公园有英语角北京哪些公园在寒暑假,或平时就有固定的英语角,可以让普通市民参加的. Can Amy ____ A、swim B 、swimming C、swims D、to swim 早知是这个结果,偏偏自己固执,而使自己伤痕累累.这句话英语怎么说? 请问北京地区英语角有哪些?我家住四惠东,想知道周围有没有英语角.具体时间和地点是什么 She can’t _______ in the classroom.A.swims B.swim C.swimming D.to swim我不光要答案,还要原因~ 仍固执的守着一个模糊的背影,不肯告别.用英语怎么说?如题 北京哪有英语角 Can he___fast?A.swims B.swimming C.swim hurry 北京现在哪里还有英语角?我英语水平特别不好,可以说得从音标学起吧,所以想去英语角,感受一下氛围,最好能是周六日的,因为平时工作没有时间啊!去过的人给介绍介绍吧, 2010年12月的四级中仔细阅读的答案怎么新东方的和沪江网的不一样啊? 北京新东方暑期四级住宿班手机上网没办法查,我想知道今年北京新东方英语四级住宿班的时间,我上大一准备考四级,学四级哪种课程比较好?请把时间和价钱告诉我, 北京哪里还有英语角?人大周五晚还有吗? 沪江和新东方什么关系? 北京新东方暑假考研英语强化上走读班还是住宿班好 用所给词的正确形式填空Do you often go____(swim)? 新东方和沪江网校哪个更好一点? “有钱就任性”英语怎么说 how often do you go swim?改错 这次英语六级新东方和沪江答案有哪些不一样的,到底哪个对?如题! 北京新东方寒假四级住宿班的环境?我报的是四级的住宿~在水木清华校区报到的~请问有人在那学过吗?环境怎样?洗澡是怎样的情况?附近取钱方便吗?还有就是钱啊什么的保管安全吗? ( )( )you often( )in winter?go skating (提问) 上午刚考完四级,想问下现在新东方,沪江上面给的答案准吗?我今天上午刚考完四级,用沪江上面的答案估分418(作文估的75).我想问下现在新东方,沪江上面给的答案准吗?我都不知道自己还有没 “有钱就任性”用英语怎么说 he asked me ,Do you often go skiing in winter改间接引语,我就是不知道后面的go要不要变时态.纠结ING help! Do you often write letters____your sisterA for B to C with D at 北京新东方四级基础强化全程走读班能住宿么 翻译:"get undressed,take a shower和take off your shoes and clothes,go to bed. 关于名人的不良行为习惯说的仔细一些 “有钱就是任性”用英语怎么说 i go to _______ a shower.A take B make 选几为什么 英语作文不好怎么办, 北京新东方暑期英语四级精品班万泉河校区每班多少人?是202教室 还有 Many people love to ____a shower in the morning.A go B get C take D join 如何养成良好的行为习惯英语作文 找个一起练英语口语的老外 —Haven't you seen the speed limit sign?please driveA more slowly a bitB slowly a bit moreC a bit more slowlyD slowly more a bit选哪一个?解释一下 英语翻译Nothing Succeeds Without a Strong WillNo great work can be performed without will.We envy famous men and imagine that fame was due to some trock of luck.But when we know their histories,we find that it is long years of will and constant e 北京英语口语补习班,想老外一起英语口语练习, 请问“Drive at least 25 km/h below the speed limit. 石家庄哪里有英语角啊? 新东方2010英语四级预测2010年6月19号英语四级新东方押题预测作文 我想找个老外交流英文 英语口语比赛演讲稿 十万火急!微笑参与2008 要求:3-5分钟(350词以上) 谁有上过北京新东方英语四级周末课的?能说下具体的时间、课程安排吗?比如是周六还是周日?一天上几个小时,是怎么安排的呢? 哪里老外多?而且可以交流语言?我想找一个方便学英语的地方.在海淀这边.知春路这边最好.谢绝 广告! Do you swim often还是 Do you swim oftenly?哪个才是对的说法呢? fuckin hurry up fuckin hurry up man 翻译 Varable Speed Drive 新东方学四级英语有用吗..效果大不大..
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘