読者です 読者をやめる 読者になる 読者になる

もうlast-childとfirst-childくらい使いたい

使いたい

現状(IEのために現実的に)使えない CSS Selectors のうち、今一番使いたいものといえばそれは当然 last-child と first-child になるかと思います。僕が。で、これが無いと影響が HTML に及んでしまい、HTML に及ぶと言うことはサーバアプリケーションにまで及んでしまうので、とにかく使いたい。

ul.honyarara li {
border-right:1px solid #000;
}

ul.honyarara li:last-child {
border-right:none;
}

という奴です。

現実的に今のブラウザシェアを見て、これに対応していないのは、すでに IE6/7 だけとなりました(IE7 は対応なんですが、コメントもエレメントと数えやがりなさるので事実上使えないと考えておいた方がシュアーです)

で「IE6/7 だけ」となれば、逆の発想であれが使えます。CSS Expression。CSS Expression は IE8 の IE8 標準モードでは使えませんが、別に本筋で攻められるからそれはそれで構わないわけで。

ul.honyarara li {
border-right:1px solid #000;
}

ul.honyarara li:last-child {
border-right:none;
}

/* last-child for IE6/7 */
ul.honyarara li {
border-right:expression((this.__isLastChild = (this.parentNode.children.item(this.parentNode.children.length-1) == this))?'none':'1px solid #000');
}

こんな感じになるかと。

三項演算子の右側で '1px solid #000' とデフォルトを再代入しないといけないのはあれですが、これだけで済むならこっちの方が注意スコープが絞れてよろしいはず。 this.__isLastChild とオレオレ属性を作っているのは、CSS Property を複数段使うときに再度計算したくないからです。

/* last-child for IE6/7 */
ul.honyarara li {
border-right:expression((this.__isLastChild = (this.parentNode.children.item(this.parentNode.children.length-1) == this))?'none':'1px solid #000');
padding-right:expression(this.__isLastChild?'0':'15px');
}

こういうことができます。

使って良いのか

CSS Expression はいわゆる偏執的 MS 嫌いの人たちにあーだこーだ言われていますが、次のような点に気をつければ十分実用に耐えると考えています。

  • Redraw(再描画)面積を極力小さく抑える。(適用要素を少なくする、再描画の影響を受けてしまう以降の要素の数を少なくする、 absolute にしてしまう、など)
  • ブラウザリサイズ、戻る進む、等のブラウザに対するユーザインタラクションで一々再計算・再描画が起こらないようにする。

います。