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現在での解決策について整理してみました。あわせてお読みください。

,

“Internet Explorer 7で使えなくなるCSSハック” への7件のフィードバック

  1. うちの会社では私の独断と偏見によりIE非推奨なので、正直あんまり関係ないかなぁ。
    モチロンNW管理してる立場上IEも使うことあるけど、個人的嗜好もあるし今更TABブラウザやめるのもねぇ・・・って感じですね。
    おでさんトコみたいにでっかい会社なら、いろいろ検証に時間も取れる常死すとか(w)あるけど、私みたいに一人で面倒見なきゃいけないような小さい会社なら、穴だらけのIE使ってる奴が社内に居たら
    (゜д゜#)ゴルァ!!
    しますわ。
    とりあえず人柱ご苦労様(^_^;
    参考にさせてもらいます。

  2. このサイトもそうだけど、全体アクセスの6割、ボット除くと9割5分はIEによるアクセスになるので、IE無視できないのよっw

    というかどのサイトでも同様の状況だと思うけれど…。
    自分で使う分にはFirefoxでいいかなーと。IEをタブでも開けるしねw

    でも、会社のシステム不具合出るからなー…。

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

    }

    これは確かに、IE6・7ともに使用できますが、firefoxで使用できません。。

    どうしたらfirefoxでも使えますか?

  4. >まさびっちさん
    このエントリー自体がIE7で使えなくなるCSSハックを取り上げたものなので、IE7およびFirefoxは/**/を正しく解釈してしまうはずです。

    IE7とFirefox向けにはこのハックは使わず、IE6向けにのみ条件付コメント(Conditional Comment)で使うというのが解決法になるかとおもいます。

フォームは コメントしてほしそうに こちらを見ている……!

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください