CSS中的行为：expression和behavior

随着最新的浏览器对css2甚至css3的支持不断完善，我们可以利用CSS中的JavaScript在一些特殊处理上，特别是在对IE5-IE6的特效兼容性上，有着更多的应用。

一个简单的例子：

<ul> 
 <li>示例文字：品味经典 fufuok.com</li> 
 <li>示例文字：品味经典 fufuok.com</li> 
 <li>示例文字：品味经典 fufuok.com</li> 
 <li>示例文字：品味经典 fufuok.com</li> 
 <li>示例文字：品味经典 fufuok.com</li> 
 <li>示例文字：品味经典 fufuok.com</li> 
</ul> 

很简单的一个列表，如果现在想在这些列表上，实现一个用户体验更好的改变：当鼠标移到每个列表项上，这个列表的背景颜色高亮显示。最简单直接的修改如下：

<ul> 
 <li onmouseover="this.style.backgroundColor='pink'" onmouseout="this.style.backgroundColor='';">示例文字：品味经典 fufuok.com</li> 
 <li onmouseover="this.style.backgroundColor='pink'" onmouseout="this.style.backgroundColor='';">示例文字：品味经典 fufuok.com</li> 
 <li onmouseover="this.style.backgroundColor='pink'" onmouseout="this.style.backgroundColor='';">示例文字：品味经典 fufuok.com</li> 
 <li onmouseover="this.style.backgroundColor='pink'" onmouseout="this.style.backgroundColor='';">示例文字：品味经典 fufuok.com</li> 
 <li onmouseover="this.style.backgroundColor='pink'" onmouseout="this.style.backgroundColor='';">示例文字：品味经典 fufuok.com</li> 
 <li onmouseover="this.style.backgroundColor='pink'" onmouseout="this.style.backgroundColor='';">示例文字：品味经典 fufuok.com</li> 
</ul> 

如果需要在整个网站的li标签上都实现这样的效果，就要用到css中的expression了。在公用的css样式表文件中，加入下面的样式，即可立刻实现对所有li标签的效果：

<style type="text/css"> 
 li {star : expression(onmouseover=function() {this.style.backgroundColor="pink"}, onmouseout=function(){this.style.backgroundColor="";})}  
</style> 
 
<ul> 
 <li>示例文字：品味经典 fufuok.com</li> 
 <li>示例文字：品味经典 fufuok.com</li> 
 <li>示例文字：品味经典 fufuok.com</li> 
 <li>示例文字：品味经典 fufuok.com</li> 
 <li>示例文字：品味经典 fufuok.com</li> 
 <li>示例文字：品味经典 fufuok.com</li> 
</ul> 

一句“star : expression(onmouseover=function() {this.style.backgroundColor="pink"}, onmouseout=function(){this.style.backgroundColor="";})”就实现了刚才的效果，而且没有对前台结构做任何改变。这就是expression的作用。

如果需要给所有的表格单元、引用标签、超链接全部加上这种效果，可以对td、blockquote和a标签都加上这段代码样式。当然，为了系统的可扩展性和可维护性，建议使用behavior行为。

behavior相比expression更善于解决一些重量级的任务（例如在IE6中实现对透明PNG的支持等），上面的效果，如果用behavior来实现的话，将会非常轻松。先建一个htc文件，文件名为：changeColor.htc，内容如下：

<public:attach event="onmouseover" onevent="befor()" />  
<public:attach event="onmouseout" onevent="after()" />  
 
<script type="text/javascript">  
function befor(){  
this.style.backgroundColor="#7FFFAA";  
this.style.color="red";  
this.style.cursor="pointer";   
}  
function after(){  
this.style.backgroundColor="";  
this.style.color="";  
this.style.cursor="";  
}  
</script> 

然后在通用的css文件中加入下面的样式，来引入htc文件：

<style>  
 li, td, blockquote,a { behavior: url("changeColor.htc") }  
</style> 

这样，就将样式和行为完全的分离开来了。需要再改变什么效果，只要在通用css或者htc文件中进行相应的修改即可。

expression和behavior的重要说明：

1、只有IE才可以使用
css中的行为,expression和behavior只有IE才有效，FireFox无效，而且IE也只有IE5以上的版本才支持。

2、不推荐使用expression和behavior
在页面渲染的过程中，expression和behavior需要大量的计算，会大量地耗费客户端资源。所以不到迫不得已，请不要使用expression和behavior。

3、expression和behavior的现实意义
上面两点，好像已经判了expression和behavior死刑。其实，并不是，它们依然有着现实意义——就是用另外一种途径解决IE6的兼容性问题（IE5已经基本退出市场，可以不用考虑）。例如：IE7以上的版本、FireFox、Opera、Safari都已经支持透明PNG图片，但是IE6却不能支持。这是IE6天生的缺陷，但是为了能让IE6也能够兼容我们的设计效果，那么这时候behavior便有了用武之地。

总的来说，expression和behavior在逐渐的没落，但是只要IE6还是浏览器市场上占有一席之地，expression和behavior就依然有着旺盛的生命力。

另外：较多的使用css中的行为，会极大的消耗客户端资源。从而影响网页的渲染速度。所以并不推荐大范围的使用css行为。

MORE: Yes! B/S !

CSS，前台