Internet Explorer 7で使えなくなるCSSハック

前回に続いて、Internet Explorer 7で使えなくなるCSSハックについていってみたいと思います。きっとどこかのサイトがすでに公開してると思うのですが、どうもうまく検索できなかったので…。

参考にしたのは、例によってCascading Style Sheet Compatibility in Internet Explorer 7です。

CSS Filters（おで訳。適当に省略してます）

ブラウザーベンダーによってCSSの実装が異なったり、さまざまなバグがあるせいで、CSS標準によっても結局表示がばらばら。結果としてウェブディベロッパーコミュニティはさまざまなCSSハック(MicrosoftはこれをCSS Filterと呼んでいる)を作リ出した。

IE7では、数々の（これらの原因となる）構文バグを修復したので、これまでのバージョンのIEで動作していた、以下のCSSハックは動作しなくなる。もし、あなたのページでこのようなCSSハックを使っているなら、CSSハックを取り除くか、置き換えるかすること。

とあります。取り除く、という解決法を教えてくれるのはいいのですが、IE7にアップグレードしていない人が見たらどうするんでしょ…。

* HTML Filter（おで訳）

このCSSハックは構文バグによるものである。IEだけにCSSルールを適用するのに使われた。このような構造はIE7以降のバージョンでは無視される。

/* 次のルールはIEのみに適用するのに使われたが、IE7以降は無視される */

* html {
}

* html body{
}

* html .foo{
}

_ Underscore Filter（おで訳）

このCSSハックは構文バグによるものである。IEだけにCSSルールを適用するのに使われる。このような構造はIE7以降のバージョンでは「カスタムプロパティ」として扱われる。カスタムプロパティはOMの中にあり、スクリプトを通してクエリされるが（筆者注：ユーザが自由に作り出せるプロパティのことと思われます。）、その値は適用されることはない。

/* 次のルールは、このプロパティを理解するブラウザーに対してはmin-heightを適用し、IEに対してはheightを適用するのに使われた。IE7では、_heightはカスタムプロパティとして扱われる（heightは適用されない）。 */

.myclass {
  min-height: 300px;
  _height: 300px;
  ...
}

/**/ comment filter（おで訳）

このCSSハックは構文バグによるものである。DOCTYPEがStrictの場合にInternet Explorerだけに対してプロパティーを隠すのに使われる（このフィルターはquirksモード/おそらく互換モードのこと/では動作しない）。 Internet Explorer 7ではプロパティは解析され適用される。

/* 以下のルールはInternet Explorerに対してheight（高さ）プロパティを隠すのに使われた。IE7では、この値は適用される。*/

.myclass {
  height/**/: 300px;
  ...
}

“html > body” child selecter filter（おで訳）

このCSSハックはこれまではIEの未実装項目によるものである。IEだけに対して宣言を隠すのに使われた。IE7のスタートとともに、IEでは宣言内でプロパティが適用されるようになる。

注意：子セレクタによるCSSスタイルはある特定のブラウザやバージョンを検知するのに使われると、CSSハックとみなされる。

/* 以下のルールはInternet Explorerに対してheight（高さ）プロパティを隠すのに使われた。IE7では、この値は適用される。*/

html > body {
  height: 300px;
  ...
}

“head + body” adjacent selector filter（おで訳）

このCSSハックはこれまでのIEの未実装項目によるものである。IEだけに対して宣言を隠すのに使われた。IE7以降では宣言内でプロパティが適用されるようになる。

注意：隣接セレクタによるCSSスタイルはある特定のブラウザやバージョンを検知するのに使われると、CSSハックとみなされる。

/* 以下のルールはInternet Explorerからheight（高さ）プロパティを隠すのに使われた。IE7では、この値は適用される。*/

head + body {
  height: 300px;
  ...
}

“head:first-child + body” first child and adjacent selecter filter（おで訳）

このCSSハックはこれまでのIEの未実装項目によるものである（:first-child疑似クラスと隣接セレクタ）。IEだけに対して宣言を隠すのに使われた。IE7のスタートとともに、IEでは宣言内でプロパティが適用されるようになる。

注意：:first-childセレクタと隣接セレクタが組み合わさったCSSスタイルはある特定のブラウザやバージョンを検知するのに使われると、CSSハックとみなされる。

/* 以下のルールはInternet Explorerに対してheight（高さ）プロパティを隠すのに使われる。IE7では、この値は適用される。*/

head:first-child + body {
  height: 300px;
  ...
}

CSSハックについては以上のようですが、引き続き対処法が書かれているようなのでさらに読み進めてみま～す。

2006.05.24追記：
IE7CSS問題のまとめと対策
2006.05.24現在での解決策について整理してみました。あわせてお読みください。