CSS 发明者 Håkon Wium Lie 访谈(一)

简介: 导语:本人利用业余时间翻译。受本人水平所限,当中错谬不少,还望大家斧正!原文地址:https://dev.opera.com/articles/css-twenty-years-hakon/---------------------------------------------------...

导语:本人利用业余时间翻译。受本人水平所限,当中错谬不少,还望大家斧正!

原文地址:https://dev.opera.com/articles/css-twenty-years-hakon/

---------------------------------------------------------------------------------------------------------------------

二十年前的今日,Opera 的 CTO Håkon Wium Lie 推出了 HTML 层叠样式的第一个草案:CSS(下面的文字过于文艺,非本人能力所及,不如不译了……)

Twenty years ago today, Opera’s CTO Håkon Wium Lie published Cascading HTML style sheets – a proposal. If Paul McCartney were a web developer, and writing ‘Sergeant Pepper’s Lonely Hearts Club Band’ today, he would almost certainly write:

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!

However, when we went round to Paul’s house to ask him to sing this for us, he declined and set his guard dogs, FontTag and Bgcolor, on us. So, instead, to mark this occasion, Bruce sat down with Håkon to ask a few questions about the past, present and future of CSS.

CSS 诞生了二十年了。如同家有儿女初长成,你会感到十分开心吗?
CSS was conceived twenty years ago. Are you happy about how your baby, child and teenager has turned out?

是啊,我当然十分开心。CSS 是Web 基石之一而且 Web 页面越来越漂亮也可以说归功于 CSS。事实上 HTML 与 CSS 之间健康的相互发展是相得益彰的。同时,对于接下来的发展,仍有相当多的空间。
Yes, I’m very happy with CSS. CSS is a cornerstone web specification and web pages are more beautiful as a result of CSS being there. The fact that HTML is still alive and well is also a testimonial to the success of CSS. As with all youngsters, however, there is room for improvement.

你说过“CSS 拯救 HTML”,此话何解?
You’ve been quoted as saying you proposed CSS “to save HTML”. Please explain.

CSS 的缺席会让 HTML 世界显得不仅仅是寂寞,而且贫瘠。那时候 Web 开发者都是从桌面程序员过度而来的,包括我也是,那时甚至连 <color> 或 <font> 标签都没有。我想起我第一幅公开的 Web 页面,没有恰当的手段于是只能令图片文本化。那时候我记得是 1993 年。如果没有制定这些标准如果 CSS 没有出现,HTML 将会变得迥然不同,Web 将会变成一个只传递文本图片的巨大传真机。对失明者或搜索引擎来说,Web 将会是一片可怕之地。CSS 提供了一个可以表达作者设计意图的方式,而不需要添加新的 HTML 标签。
HTML would have been very different if CSS had not appeared. Authors who came to the web from a desktop publishing background were baffled by the lack of <color> and <font> tags. Including myself. In my first real publication on the web, I resorted to making images with text in it — you can see it in this publication from 1993. If this development had continued, the web would have become a giant fax machine where pictures of text would be passed along. This would have been terrible for blind users and search engines alike. CSS was proposed to prevent this development by giving authors a way to express their designs without adding new HTML tags.

在第一份草案中,还有百分比的影响符,如 h1.font.size = 24pt 100%,说明如下:
In the first proposal, there was a percentage of influence specifier, e.g. h1.font.size = 24pt 100%, described as follows:

在行尾的百分比表示需求的影响程度此处100%)。如果这是初始样式表(即在用户控制下一个)该需求可被满足,即,所有的标题元素将使用 Helvetica 字体。如果该语句是在一个更高的样式表任何未声明的子级都会受影响
The percentage at the end of the line indicates what degree of influence that is requested (here 100%). If this is the initial style sheet (i.e. the one under user control), this request can be fulfilled, i.e. all headline elements will be rendered using Helvetica. If the statement comes in a later style sheet, any unclaimed influence is granted.

后来为何放弃?
Why was this dropped?

你指的机制是尝试把作者和读者喜好和需求结合起来设计灵感来自麻省理工学院媒体实验室的想法在未来的电视不会亮度和色彩控制但对于色情,暴力或者左翼和右翼内容敏感 CSS 的建议是弹性的,让作者自己来,决定取舍在这期间,浏览器尝试混合的需求,使每个人都高兴这非常适用于某些属性如字体大小 font-size),但某些就不适合(如 font-family 的对于这份草案的想法,Bert 进行了批评(此处大家将就吧,太难翻译了……):
The mechanism you refer to was there to try combine the needs and preferences of both authors and readers. It was inspired by an idea from the MIT Media Lab: TVs in the future would not have controls for brightness and color, but for sex and violence, or left-wing and right-wing, perhaps. The CSS proposal was to have sliding scale where the author was fully in charge in one end of the scale, and the user was fully in charge in the other end of the scale. In between, the browser would try to mix requests to make everyone happy. This works well for certain properties (like font-size) but is hard to do for others (like font-family). In his first response to the CSS proposal, Bert criticized this idea:

The idea that two designs can be averaged to come up with an intermediate style seems utterly wrong to me. What happens when my blue-on-yellow style is combined with somebody else’s yellow-on-blue? Do I get green-on-green? Or who wants to look at a page with Avant-garde titles over Helvetica paragraphs?

I responded:

Some attributes mix better than others. A typical use of “weighted average” is to soften the author’s attempt to be distinct, e.g. the suggested font sizes – while the user still gets the message. One doesn’t have to use this feature, but while “100%” is equal to a binary “1” there is no going back from a binary syntax. In general, I think computer interfaces are much too binary.

Of course, Bert was right (he is, almost always) that the proposal created more problems than it solved, and the mixing was dropped.

有点像 JS 风格,后来为什么改了?
Ditto the JS-style dot syntax. Why did it change?

你管这个叫 JS 风格,有意思。不过那时候 JavaScript 好像还没有那么普及吧,所以我也不可能参照那玩意。我是用 X11 Windows 系统的 X 资源得到灵感的,那是一个 MIT 的项目。
It’s interesting you call it JS-style syntax. When I first proposed CSS, JavaScript was not around so I couldn’t borrow it from there. Rather, the syntax was inspired by X resources from the X11 Window System, another inspirational project coming out of MIT.

之所以把 CSS 语法从 font.size转换到 font-size,是基于两方面的原因:一、使用分隔符看起来更像在书写英语,增加了可读性;二、DSSSL 和 DSSSL-Lite 都采用分隔符作为属性名。James Clark,写了第一份 DSSSL-Lite 的人,参见了 W3C 工作组的层叠样式,我和 Bert 就在 DSSSL 身上借用了分隔符。从缺点来说,就是分隔符看起来像数学的减号,解析器会分不清。
The reason for changing the CSS syntax from font.size to font-size was twofold. First, the hyphen makes it look more like written English, which improves human readability. Second, DSSSL and DSSSL-Lite used hyphenated property names. James Clark, who wrote the first draft of DSSSL-Lite, participated in the first W3C workshop on style sheets, and Bert and I borrowed the hyphen from DSSSL. On the downside, the hyphen represents minus in math, which sometimes confuses parsers.

目录
相关文章
|
前端开发
CSS 发明者 H&#229;kon Wium Lie 访谈(三)
如果你手上有魔棒,你会发出什么的魔咒,让 CSS 按照你的想法走?另外,还有什么你想搞进来的,而且又会受到大家欢迎的?If you could wave a magic wand, which bit of current CSS would you banish from the world,...
770 0
|
Web App开发 前端开发
CSS 发明者 H&#229;kon Wium Lie 访谈(二)
Bert Bos 如何参与进来的,你们怎么一起工作的?How did Bert Bos get involved, and how did you work together? 伯特·波斯回顾我的初步建议。
733 0
|
3月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
3月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
3月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
3月前
|
前端开发 容器
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习
|
3月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
3月前
|
前端开发
医院检查单子p图软件,在线制作仿真病历,js+css+html装逼神器
本示例展示如何用HTML/CSS创建医疗信息页面,内容仅供学习参考。页面模拟“阳光医院体检中心”场景,提供预约功能验证(如姓名、手机号、日期)。所有数据仅用于演示
|
8月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
328 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子