湮灭的风流－基于JavaScript的CSS技术概览

　　自从CSS出现以来，就有厂商希望CSS能够更加灵活一点，最早的CSS动态化体现为“动态表达式”（或动态属性，Dynamic attribute）的构想，动态表达式的构想也许是源自于以下的一些场景：

　　元素的尺寸或者位置由浏览器或者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代码如下所示：

<STYLE TYPE='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;
}
</STYLE>

是不是觉得非常怪异？您无需怀疑，这确实是浏览器鼻祖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 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标准，让其更加动态化。

转载于:https://www.cnblogs.com/xiehuiqi220/archive/2009/07/13/1522860.html

湮灭的风流－基于JavaScript的CSS技术概览相关推荐

9 个基于JavaScript 和 CSS 的 Web 图表框架
jQuery, MooTools, Prototype 等优秀的 JavaScript 框架拥有各种强大的功能,包括绘制 Web 图表,使用这些框架以及相应插件,我们可以非常轻松地实现曲线图,圆饼图, ...
前端HTML、JavaScript、CSS技术的日常记录
1. JavaScript(JS)中动态使超链接失效,一种是设置超链接的onclick事件返回false:另一种是动态地将超链接隐藏,如下图. 2. JS设置10秒后自动跳到某个页面 3. 设置表单f ...
[轉]9个优秀的基于 JavaScript 与 CSS 的 Web 图表框架
http://www.cnblogs.com/biko-zc/archive/2009/09/05/1560988.html
html5 数字滚动选择器,Odometer使用JavaScript和CSS制作数字滑动效果
Odometer是一个使用JavaScript和CSS技术,制作出数字上下滑动的动画效果插件,有点类似与我们的天然气的读数的动画效果,这个插件是轻量级的,压缩版本只有3kg,使用CSS3动画技术,所以 ...
网页开发基础，HTML、CSS技术、JavaScript基础
一.学习目标 1.HTML技术 2.CSS技术 3.JavaScript基础二.重要知识点 1.HTML技术超文本标记语言(英语:HyperText Markup Language,简称:HTML ...
基于JavaScript技术的横排文字转古书式竖排工具
基于JavaScript技术的横排文字转古书式竖排工具此工具可以把普通横排文字转换为古典的竖排由右至左的方式显示,并且增加适当的线标,方便读者阅读.您可以在论坛.博客发言之前用这个工具把要发表的文章 ...
基于JavaScript+css写一个简单的h5动态下雨效果
基于JavaScript+css写一个简单的h5动态下雨效果文章目录什么是前端展示效果 JavaScript是什么? 步骤 1.html 2.css 3.js 什么是前端前端它是一个工作,它的 ...
24HTML5期末大作业：XXX 网站设计——指环王：护戒使者(13页) HTML+CSS+JavaScript HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程网页规
HTML5期末大作业:XXX 网站设计--指环王:护戒使者(13页) HTML+CSS+JavaScript HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计网页规划 ...
HTML5期末大作业：XXX 网站设计——指环王：护戒使者(13页) HTML+CSS+JavaScript HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计网页规
HTML5期末大作业:XXX 网站设计--指环王:护戒使者(13页) HTML+CSS+JavaScript HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计网页规划 ...

湮灭的风流－基于JavaScript的CSS技术概览

湮灭的风流－基于JavaScript的CSS技术概览相关推荐

最新文章

热门文章