易栈网-膘叔（Neatstudio.COM）

1994年，Håkon Wium Lie提出了层叠样式表的概念，并于当年10月提交了他的样式表建议——Cascading HTML style sheets。1996年12月，他亲自主持并以他的建议为基础创建的Cascading Style Sheets, level 1，正式成为W3C的推荐标准。后来，几乎所有主要浏览器都实现了CSS。CSS的普及，结束了长达数年之久的“表现性HTML”的历史，开创了标准Web开发中结构、表现、行为分离的新时代。

1995年， Håkon Wium Lie针对测试Web浏览器在呈现HTML标记、CSS2.1样式、PNG图像及数据URI方面的支持情况，提出了Acid2建议。该建议后来由Web标准组织开发并发布，成为判定新（版）浏览器对Web标准支持情况的一个重要依据。

另外，Håkon Wium Lie与另一位CSS标准的制定者Bert Bos合著的Cascading Style Sheets: Designing for the Web, 3rd Edition 2005年5月由Addison-Wesley Professional出版。也是学习CSS的一本优秀图书。这里还有一篇发表于A List Apart的他们合写的文章：Printing a Book with CSS: Boom!

总而言之，翻译这篇论文的想法由来已久了。原因很简单，这篇论文是Håkon Wium Lie在他提出CSS的建议10年后写就的，其中全面翔实地包含了大量与CSS及Web发展有关的珍贵资料，是研究和学习CSS不可多得的重要参考文献。翻译这篇论文的过程，也是学习和研究的过程。希望自己在翻译完这篇论文后，对CSS和Web的理解能上升到一个新的层次。

原文地址则是：翻译CSS之父论文《层叠样式表》

Misc | 评论:0 | 阅读:17327

汇报行程

Submitted by gouki on 2009, November 18, 11:15 PM

这两天不在是因为：看牙齿和朋友结婚，明天回来后会在手机博客上贴照片，呵呵

自 WAP 发表

Misc | 评论:0 | 阅读:15889

CSS Position Fixed for IE6

Submitted by gouki on 2009, November 15, 9:55 AM

我对CSS的了解少之又少，还好公司有美工，非常精通这些。但偶尔在自己写的时候可就没有人帮助了。所以，看到点资料，都会想着记下来。。

想来司徒正美的英文比我好多了，他还能经常去国外的网站，我就不行。。。

以下就来自他的博客了：

逛mootools核心成员Thomas Aylott的博客看到，不过有点标题党了，实际效果并没有那么灵光，只是定义四个类，分别用来固定视口的上下左右。很遗憾，它无法解决与 top,bottom,left,right并用的问题（见例子）。它利用到IE8已经废弃的expression来计算页面的大小，从而固定我们想固定的元素。里面用到一技巧，就是给html或body元素添加一张背景图片，并设置background-attachment:fixed，用于强制在页面重绘之前执行CSS，也就是执行它里面的expression。另，我们也不需要一张真的图片，我们给它一个about:blank命令就可以，就像平时对付链接一样，仅仅就是想要一个hover效果非得塞给它一个href。

CSS代码

.fixed-top {position:fixed;bottombottom:auto;top:0px;}
.fixed-bottombottom {position:fixed;bottombottom:0px;top:auto;}
.fixed-left {position:fixed;rightright:auto;left:0px;}
.fixed-rightright {position:fixed;rightright:0px;left:auto;}
* html,* html body {background-image:url(about:blank);background-attachment:fixed;}
* html .fixed-top {position:absolute;bottombottom:auto;top:expression(eval(document.documentElement.scrollTop));}
* html .fixed-rightright {position:absolute;rightright:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0)));}
* html .fixed-bottombottom {position:absolute;bottombottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
* html .fixed-left {position:absolute;rightright:auto;left:expression(eval(document.documentElement.scrollLeft));}