前回に続いて、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件のフィードバック
うちの会社では私の独断と偏見によりIE非推奨なので、正直あんまり関係ないかなぁ。
モチロンNW管理してる立場上IEも使うことあるけど、個人的嗜好もあるし今更TABブラウザやめるのもねぇ・・・って感じですね。
おでさんトコみたいにでっかい会社なら、いろいろ検証に時間も取れる常死すとか(w)あるけど、私みたいに一人で面倒見なきゃいけないような小さい会社なら、穴だらけのIE使ってる奴が社内に居たら
(゜д゜#)ゴルァ!!
しますわ。
とりあえず人柱ご苦労様(^_^;
参考にさせてもらいます。
このサイトもそうだけど、全体アクセスの6割、ボット除くと9割5分はIEによるアクセスになるので、IE無視できないのよっw
というかどのサイトでも同様の状況だと思うけれど…。
自分で使う分にはFirefoxでいいかなーと。IEをタブでも開けるしねw
でも、会社のシステム不具合出るからなー…。
【CSS】IE7で使えなくなるCSSハック
Cascading Style Sheet Compatibility in Internet Explorer 7 http://msdn.micros…
Mac版IEとCSSハック(@importに関するバグの利用…
【格安パソコンなら!ソーテックオンラインショップ!】 Mac版IEだけスタイル (more…)
IE7のCSS対応状況とハック…
IE7の英語版がリリースされました。 日本語版もあと2,3週間でリリースとのことです。 そんな中、仕事でIE6,IE7を対象としたCSSを組まなけれ (more…)
.myclass {
height/**/: 300px;
…
}
これは確かに、IE6・7ともに使用できますが、firefoxで使用できません。。
どうしたらfirefoxでも使えますか?
>まさびっちさん
このエントリー自体がIE7で使えなくなるCSSハックを取り上げたものなので、IE7およびFirefoxは/**/を正しく解釈してしまうはずです。
IE7とFirefox向けにはこのハックは使わず、IE6向けにのみ条件付コメント(Conditional Comment)で使うというのが解決法になるかとおもいます。