CSS中使用expression表达式

1. expression表达式是什么

在CSS中,expression是一种Javascript表达式,它可以用于CSS属性中。expression跟函数很像,都接受参数而返回值。但是expression不同于其他Javascript表达式,它可以直接在CSS样式中使用。具体格式如下:

selector {

property: expression(expression);

}

2. expression的作用

expression表达式可以用于在CSS中动态的修改属性值,这个功能在一些老的浏览器中特别有用。例如,我们可以利用expression表达式来实现网页背景随时间变化的效果:

body {

background-color: expression(new Date().getHours()/12);

}

上述表达式会根据当前的时间动态修改背景颜色,实现背景色的变化效果。

3. expression表达式的好处和坏处

expression表达式的优点是它可以将CSS样式动态地计算出来,这在一些特殊场合下尤其有用。例如我们可以使用expression表达式来计算属性值,然后根据属性值来显示不同的样式。另一个例子是在IE6等老的浏览器中,可以利用expression表达式来动态改变元素的大小和位置,这个功能在现代浏览器中已经被CSS3的flexbox等属性替代了。

但是,expression表达式也有很多问题。首先,expression表达式会明显降低网站的性能,因为每次使用expression表达式都要调用Javascript代码,这会使网页的加载速度变慢。另外,在一些浏览器中expression表达式也可能存在安全问题。因此,尽量避免使用expression表达式。

4. 使用expression表达式的注意事项

如果你还坚持要使用expression表达式,那么请注意以下事项:

(1)避免使用复杂的表达式

复杂的表达式会使网站的性能降低,而且很容易写错。

(2)测试你的表达式

expression表达式比较特殊,不同的浏览器解析方式不同。因此,在使用expression表达式之前,你需要在各种不同的浏览器中测试你的表达式,确保它在不同的浏览器中都能正常工作。

(3)使用条件注释

由于不同的浏览器对expression表达式的解析方式不同,因此我们可以使用条件注释来针对不同的浏览器来加载不同的样式文件。

<!--[if lte IE 6]>

5. 参考文献

- [CSS expression](https://developer.mozilla.org/en-US/docs/Web/CSS/Expression)

- [CSS expression 记录](http://www.cnblogs.com/Wayou/p/css_expression.html)