mhtml datauri 与 css expression

mhtml ，datauri ，css expression 三者有什么关系？

1.基础：

一切源自 yahoo performace 所提出的第一条：尽量减少连接数规则 。

于是在 ie<8 下，有人提出了 mhtml 解决方案 。并且也有了自动化工具 cssembed 。

 

 

2.问题：

合并图片后的 x.css 在 ie<8 下变成了：

 

background-image:url(mhtml:http://website/x.css!xx.png)

 

当然如果这个 css 只用于一个地方，没问题 website 可以固定， 可是对于组件css来说：他所用在的地方是不定的，也就是说 website 不定，

 

 

3.解决：

这就需要给css 申明加上动态功能，而这也恰好是 ie<8 所支持的 css expression ：

 

expression(function (el) {
    if (window.path) el.style.backgroundImage = 'url(mhtml:' + +window.path+'!italic.png)';
}(this))

 

path 可以在外部（不想写里面了，太多，也不讨论命名污染问题）遍历节点计算出当前的css路径来（当然引用要保证文件名不变），这里顺便解决了 expression 效率低下问题(墙) :)

 

 

update 2011-03-24 : ie9 css expression 重复执行问题

 

上面使用行内样式重置外部的 css experssion 使得 css expression 只执行一次的做法在 ie9 中并不能达到预期，ie9 仍会一遍遍得执行 css expression，即使设置了对应属性的行内样式值。

 

updated 2010-10-12 : 控制 css expression 的执行

 

上述在一次 css 表达式执行后，就把行内对应样式重写，由于行内样式优先级高于外部样式，那么外部样式中定义的 css expression 就不再被重复执行了，如果我们想让外部样式中的css再次执行，（比如同一样式的另一个 class 附带 css expression），这时我们只需清空当前的行内样式即可：

 

this.style.backgroundImage="";

 

那么对应该样式的css expression 就又开始执行了：）

 

 

4.自动化：

 

当然最好是加点自动化，毕竟 cssembed都有工具了，可以在ant中使用正则统一替换下：

 

<replaceregexp match="background-image:[^!;]+!([^)]+)\)"
                               replace="background-image:\
                       expression(function(el){\
                       if(window.path\
                       )\
                       el.style.backgroundImage=\
                       'url(mhtml:'+window.path+\
                       '!\1)';}(this))"
                               flags="g" 
 encoding="${charset}">
                    <fileset dir="${build.dir}"
                             includes="**/*-mhtml.css"/>
                </replaceregexp>

 

 

ps: 利用 css expression 使得 ie6,7 支持 inherit

 

ie6,7 不支持 inherit 属性值 ，但是由于 reset css 的存在，使得 inherit 的设置很有必要，例如 reset css 中 （当然我并不赞成）

 

strong,em {
   font-style:normal;
   font-weight:normal;
}

 

而某段区域我们又希望 strong，em 具备本身的展现形式，那么就可以这样重新设置：

 

.x strong {
  font-style:inherit;
  font-weight:bold;
}

.x em {
  font-style:italic;
  font-weight:inherit;
}

 

这样的话，下面的 html 才能正常显示：

 

<em><strong>粗斜</strong></em>


<strong><em>粗斜</em></strong>

 

但是 ie6,7 不支持 inherit，忽略了该设置值，仍然是 normal ，则上面的 html 每段字只会展现一种效果了。由于 inherit 的本质是 ：

 

Specifying a value of inherit for any CSS property that’s applied to an element will cause the element to gain its parent’s computed value for the property in question.

 

那么，其实可以利用 css expression 通过脚本来取得元素的父亲对应计算值设置给自己的 runtimestyle 即可：

 

 

.x i, .x cite, .x em, .x var, .x dfn {
    font-style: italic;
    font-weight: inherit;
    *font-weight:expression(function (el){el.runtimeStyle.fontWeight = el.parentNode.currentStyle.fontWeight;}(this));
}

.x strong {
    font-style: inherit;
    *font-style:expression(function (el){el.runtimeStyle.fontStyle = el.parentNode.currentStyle.fontStyle;}(this));
    font-weight: bold;
}