page_adsence

2011年4月1日金曜日

IE6でfirst-childとlast-childを使うには

IE6でfirst-childやlast-childを使いたい場合には以下のようにする。
例)背景色を変えたい場合
* html div {
    background-color: expression((this.parentNode.firstChild == this) ? '#FFB6C1': '#DADADA';
}

ちなみに同じ要素に対して、first-childとlast-childを使いたい場合は以下のようにする。
* html div {
    background-color: expression((this.parentNode.firstChild == this) ? '#FFB6C1' : (this.parentNode.lastChild == this) ? '#ADD8E6' : '#DADADA');
}

とこういった感じでやる。
ちなみに上記はIE6のみに適用するように記述してある。
expressionとかをいっぱいやりすぎるとサイト全体が重くなるので要注意。
ただでさえJavascriptの処理が遅いIE6で連発するのは危険。
どうしようもない場合にこれを使う位の感じで使った方がよい。

ついでに調べていたらexpressionはやたらめったら評価されてしまうので、
one-time expressionを使いましょうって記事がありました。
以下が例です。(時間によって適用される背景色が変わるようになっているみたいです。)
<style>
P {
    background-color: expression(altBgcolor(this));
}
</style>
<script>
function altBgcolor(elem) {
    elem.style.backgroundColor = (new Date()).getHours()%2 ? "#F08A00" : "#B8D4FF";
}
</script>

expressionが設定されているスタイルを上書きするようになってるみたいです。
確かにこれなら一度評価された時点で上書きされてしまうので、
何度も評価される事態を回避できます。
これならある程度の数を使っても大丈夫そうです。