之前说到CSS Expression,然后网上查了一查,发现这是属于CSS中的行为。

众所周知,网页三要素就是结构,表现,行为,也就是说HTML是结构,CSS是表现,JavaScript是行为。

这里所说的CSS中的行为,就是说,在CSS里面使用JavaScript语言。

CSS Expression和Behavior属于CSS中的行为,也就是说,通过这两种方法,我们可以在CSS里面使用JS语言。

其中Expression的用法可以看这里 ,而Behavior的用法大概是这样的:

behavior:url(css/PIE.htc);

而JS语言就写在了htc文件里面。里面大概可以像这个例子changeColor.htc:

<public:attach event="onmouseover" onevent="before()" />
<public:attach event="onmouseout" onevent="after()" />

<script type="text/javascript">
    function before(){
    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文件里面这样用

li{behavior:url(css/changeColor.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 的Expression。

CSS Expression也称为CSS表达式,它是动态设置CSS属性的强大方法,但也存在着一定的危险性。

在CSS Expression中使用JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。

这里的CSS属性可以是元素固有的属性,也可以是自定义属性。

CSS Expression在其它浏览器中不起作用,因此在跨浏览器的编码中单独针对IE设置时会比较有用。

从IE5开始支持CSS Expression。我们看下面的代码:

background-color: expression( (new Date()).getHours()%2 ? "#F00" : "#00F" );

上面的代码是使用CSS Expression,实现隔一个小时切换一次背景颜色。

CSS Expression的问题就在于它的计算频率要比想象的多出很多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS Expression增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

一个减少CSS Expression计算次数的方法就是使用一次性的表达式,它在第一次运行时将结果赋给指定的样式属性,并用这个属性来代替CSS Expression。

如果样式属性必须在页面周期内动态地改变,使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS Expression,一定要记住它们要计算成千上万次并且可能会对页面的性能产生影响。

 

图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?

可以通过按比例缩小或者放大到某尺寸(自己指定),来保持图片不变形走样的完全显示。

 

一、   对于标准浏览器(如Firefox),或者最新都IE7浏览器,直接使用max-width,max-height;或者min-width,min-height的CSS属性即可。如:

我们想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高,已经可以满足你的需要了。我们看下面的代码:

img{
max-width:100px;
max-height:100px;
overflow:hidden;
}

二、对于IE6及其以下版本的浏览器,则可以利用其支持的expression属性,在css code中嵌入javascript code来实现图片的缩放:

img{
width:expression(this.width>150?"150px":this.width);
height:expression(this.height>150?" 150px":this.height);
}

三、完美解决方案

img{
border:0;
margin:0;
padding:0;
max-width:150px;
width:expression(this.width>150?"150px":this.width);
max-height:150px;
height:expression(this.height>150?" 150px":this.height);
}

转自:http://wendesign.net/blogs330.html

 

© 2012 Hedgehog Suffusion theme by Sayontan Sinha