基于JavaScript的相关CSS技术概览-css in js

CSS技术概览：动态表达式的构想也许是源自于以下的一些场景：

元素的尺寸或者位置由浏览器或者html文档来计算

使用变量作为style属性的值，比如频繁使用的颜色，用一个全局变量

包括浏览器的鼻祖Netscape以及IE浏览器都试图在CSS中使用javascript，Netscape公司在很久很久以前提出了JSS技术，当然只支持Netscape浏览器：

“JavaScript Style Sheets. In the beginning, they were JASS (JavaScript Accessible Style Sheets), then JSSS or JSS (JavaScript Style Sheets), and now Netscape has taken to calling them Style Sheets with JavaScript Syntax. They exist in the Netscape DHTML documentation, a few books, and a couple of old third party articles on the web. The best introduction to JSS is by HTML veteran Chuck Musciano, at SunWorld. A concise, clear examination, this article was written a year ago (April 1997). Next to nothing has been written on the Web since then。”

一段经典的Netscape浏览器的JSS代码如下所示：

'text/javascript'>  
with (parent.frames.main.document.classes.items.SPAN) {  
    width = menuWidth;  
    color = fntCol;  
    fontSize = fntSiz;  
    fontWeight = fntWgh;  
    fontStyle = fntSty;  
    fontFamily = fntFam;  
    borderWidth = borWid;  
    borderColor = borCol;  
    borderStyle = borSty;  
    lineHeight = linHgt;  
}

是不是觉得非常怪异？您无需怀疑，这确实是浏览器鼻祖netscape的发明，随着与ie竞争的失败，Netscape浏览器逐渐退出历史舞台，相应地，JSS技术已经泯灭于人间。以下的地址给出了JSS的详细介绍：http://www.webreference.com/dhtml/column18/menuFrJSS.html

微软公司在IE5之后提出了“动态属性(Dynamic Properties)”技术：

“IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javas cript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式，CSS属性的值等于Javas cript表达式计算的结果。在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。 ”

CSS技术概览：一段经典的CSS Expression代码如下：

#myDiv   
{  
     position: absolute;  
     width: 100px;  
     height: 100px;  
     left: expression(document.body.offsetWidth - 110 + "px");  
     top: expression(document.body.offsetHeight - 110 + "px");  
     background: red;  
}

IE的动态表达式出现的时候，引起不少web开发者的狂欢，但是时隔不久，其卑劣的性能开始引起人们的诟病，据称，动态表达式在DOM发生更新的那一瞬间居然执行了上万次，另外由于与web标准的不兼容，CSS Expression几乎已经被日益追求潮流的web开发者所摈弃。

最终，IE8宣称在其标准模式不再支持动态表达式（Dynamic Dynamic Properties或者CSS Expression），参见：http://blogs.msdn.com/ie/archive/2008/10/16/ending-expressions.aspx

关于动态表达式（Dynamic Properties或者CSS Expression）的更多介绍，请参见：http://msdn.microsoft.com/en-us/library/ms537634(VS.85).aspx

至此，两大浏览器的巨头都终止了在CSS中使用Javascript的妄想，但是CSS混javascript的灭亡只是浏览器大战以及自定标准与W3C标准竞争的牺牲品而已。

从以上的史实来看，在CSS中使用javascript看来已被证明为一条没有前途的路，因此民间程序员开始把动态CSS的研究重心转为CSS的核心之一－“选择器”，亦即“通过javascript实现当前尚不能实现的选择器”，这一方面的研究成果，最著名的莫过于在厨房摆放一台个人网站服务器的英国人狄恩-爱德华（Dean edwards，个人主页：http://dean.edwards.name/）的"ie7.js"，网址：http://code.google.com/p/ie7-js/或http://ie7-js.googlecode.com/svn/test/index.html，"ie7.js"提前实现了W3C的CSS3标准，当然它的功能不限于此。

在民间，还是有很多人在研究如何在CSS中使用Javascript或者使用JavaScript来扩展现有CSS的功能，比如这位仁兄：http://andykent.bingodisk.com/bingo/public/jss/，他开发了一个基于JQuery的插件，能够提前实现CSS3的选择器，他把他的作品命名为JSS（Javascript Style Sheets）。

为什么一些狂热的程序员会对基于javascript的CSS乐此不疲呢？

笔者认为主要有以下两个原因：

1、CSS本身的静态特性

2、W3C标准与浏览器版本不能也永远不能同步的矛盾

3、HTML开发人员的期望与W3C标准不能也永远不能同步的矛盾

HTML的CSS技术本身的缺点已经引起了软件开发巨头的注意，在当前狂躁的应用程序标记语言中，比如微软的XAML或adobe的MXML，其CSS（暂且称之为CSS吧）不仅可以动态定义，甚至还可以定义属性、内容和事件。也许，在几年之后，我们将看到W3C准备修正新的CSS标准，让其更加动态化。CSS技术概览到此结束。

【编辑推荐】