给IE打补丁技巧之CSS Expression
CSS Expression是自IE5开始提供的特性,虽然因安全性、性能问题臭名昭著,到IE8也终于寿终正寝。回过头看,与XMLHttpRequest一样,CSS Expression的理念确实也有先驱之功,从CSS Expression也可看出由jQuery发扬光大的用CSS selector绑定行为的编程方式的雏形。不过雏形只能是雏形。由于设计上的缺陷,CSS Expression不堪大用,通常只局限为patch一些CSS特性,例如min-width/max-width。
不过CSS Expression在patch IE方面其实还可以发挥更大的功用。Dean Edwards首创了一次性执行experssion的模式,巧妙的利用了IE的内建Selector机制,同时又避免了experssion被反复计算的性能问题。这种模式被许多patch所使用。例如Peter Nederlof的hover/active/focus伪类补丁。
但是这个模式仍然有不足。Dean使用的是behavior属性。而单个CSS属性只能被用一次,即在一个元素上,最后根据cascade规则只会有一个behavior声明会胜出,因此你无法为一个元素同时启用多个特性(即调用多个行为)。
Peter Nederlof因为要绑定三个行为(分别对应于三个伪类),因此征用了3个不常用的css property(text-kashida, text-kashida-space, text-justify)。
显然,可以征用的css属性是很有限的(比方说你不能把background这样常用的属性给搞坏了,所以西方人也就是会欺负一下日本人专用的CSS属性)。如果能使用任意自定义的css属性的话,就好了。实际上IE对于不认识的property也是可以通过currentStyle返回其cascade之后的值的,而且expression对于自定义property也是有效的。
但是custom property存在一些问题:
1. 无法用runtimeStyle来override自定义属性
2. 即使删除包含expression的stylesheet,expression仍然有效
3. 在expression调用的方法里也不能调用removeExpression来强行删除表达式(会扔异常)
下面我讲一下我对这个问题的研究和解决方法。
根据我的研究,expression的机制与普通CSS属性不同,是设置在每个元素的style上的。