CSSでIE6に「first-child」を適用

IE6でも「first-child」を適用させる方法がありました。
実行にはjavascriptが必要ですが、記述はCSSのみでOKです。

記述方法
/* 通常の first-child の記述 */
p:first-child {color:#F00}
/* スターハックでIE6のみ対応 */
* p.first-child{ /*IE-expression (first-child) */
color:#F00;
}
* p{ /* IE-expression (first-child) */
behavior: expression(
this.className += (this.previousSibling == null) ? " first-child" : "",
this.style.behavior = "none"
);
}

他にもexpressionを使って通常ではIEに適用されないスタイル(max-widthとか)を適用させることができます。
ただし、expressionは画面のリサイズ、マウス操作などでもその都度実行されるため動作が重くなる点に注意が必要です。

<追記>
いまだにIE6を使ってるようなパソコンだと基本的な処理能力が低いため、expressionを使ってあれもこれもと適応させるとフリーズしてしまい、結局使えませんでした。IE6に対応させるには昨日や表現を削ぎ落とす方向で考えたほうが良さそうです。

コーディングに関する記事

コメント