InternetExplorer7はどう変わったの？CSS関連のバグの改善点：DSPT.NET BLOG

InternetExplorer7はどう変わったの？CSS関連のバグの改善点

2006年02月01日

昨日、MicrosoftからIEの次期バージョン「IE7」のベータテスト版が公開されたそうです。
RSSに対応したり、タブブラウザ化するなど良くなっているようですが、肝心のCSS関連のバグは改善されたんでしょうか？？IE7の開発者向け情報をちょこっと覗いてみました！

IEの開発者向けサイトに『Internet Explorer Developer Center（英文）』なるものがあり、開発者向けにIE7の改善点などの情報が掲載されています。

この部分に気になる記事を発見。
『Cascading Style Sheet Compatibility in Internet Explorer 7』

英訳すると「InternetExplorer7でのCSSの互換性」となんやら難しそうなタイトル。

とりあえず、内容はCSS関連で改善された情報みたいですが、いかんせん英語なので、読む気が失せてしまいます。とまぁ、それではいけないということで、、、

内容は既知の問題である「overflow」プロパティに関するバグの改善と、CSSフィルター（CSSハック）について、セレクタ関係の改善が見られるようです。

まず、「overflow」プロパティに関するバグですが、以下引用。

Box Model Changes
In IE7, we changed the behavior of overflow to align with the CSS2.1 box model. Overflow is describes as a method to specify whether content of a block-level element is clipped when it overflows the box. The default is visible. This value (visible) indicates that content is not clipped, i.e. it may be rendered outside the box. IE in the past did not support this behavior. Content always had to fit within a box dimensions. Imagine a box with width and height of 100px. If the content is smaller than 100px then IE would follow the specifications. If the content exceeded the size we would auto-grow the box to fit the content. To demonstrate this behavior, take a look at the following code sample.

で、英訳ですが、英訳独特のたどたどしい日本語に訳したところ、だいたい以下のような感じ。

ボックスモデルの変更
InternetExplorer7（以下IE7）で、我々はCSSレベル2.1のボックスモデルに従い、「overflow」の振る舞いを変更した。「overflow」はブロックレベル要素の内容がボックスからはみ出た場合、その部分が削られるかどうかの設定をするための手段として記述される。このプロパティの初期値は「visible」である。この値（visible）は内容が削られないことを示している。つまり、はみ出た内容はボックスの外に表示されるはずである。過去のバージョンのIEはこの振る舞いをサポートしていなかった。いつも内容はボックス要素の中に収まって（表示されて）いたはずである。横と縦の長さが100ピクセルのボックスを想像してみて欲しい。もし内容が100ピクセルの大きさよりも小さければ、IEは仕様に従っていることになる。しかし、内容がこの大きさ（100ピクセル）を超えると、内容が収まるように自動的にボックスを伸張してしまう。この振る舞いを実験するために、以下のサンプルコードを参照してください。

blockquote { width: 125px; height: 100px;
margin-top: 50px; margin-left: 50px;
border: thin dashed black}
cite { display: block;
text-align: right;
border: none}
p { margin: 0;}
</style>

<div>
<blockquote>
<p>some text long enough to make it interesting.</p>
<cite>- Foo </cite>
</blockquote>
</div>

IE6でこのサンプルコードを表示すると以下の図のようになる。

対照的に、次の図はIE7での表示である。

見て分かるように、この例では、<blockquote>（引用）の内容がその親要素である<div>要素（図の赤線の部分）から外に表示されている。もし、このような過去の伸張してしまうボックスに頼ったレイアウトをしていると、レイアウトは崩れることになる。本来ボックスからはみ出さずに表示されていた内容は新バージョンでは（ボックスからはみ出し、）隣接する内容に重なり合って表示されることになるので、「overflow」関連のバグによるレイアウト問題は容易に発見できるだろう。

だいぶ、英訳に疲れてきたので、CSSのセレクタ関連の改善は概要だけということで…

html > body
子セレクタに指定するCSSフィルター

head + body
隣接セレクタに関するCSSフィルター

head:first-child + body
擬似クラスと隣接セレクタに関するCSSフィルター

これらの子セレクタや隣接セレクタの書き方にIE6までは非対応だったので、「CSSハック」（個々のブラウザのCSSバグの違いを利用して、ブラウザの判断や分岐などの条件に使用する手法）として使われてきました。
しかし、IE7ではこれらのバグが修正され、正しく解釈するようになるので、CSSハックを利用してきたWEBサイトは修正をしなければならなくなるそうです。

これらの書き方にIE7が対応すると言うことで、今後はこのセレクタ関係の書き方が可能になるわけですが、MicrosoftのIE開発チームによれば、これらは「悪いCSSハック」に該当するので、使用を控えるべきとのことです。

う～ん、あまり改善されていないように感じるのは僕だけでしょうか…

投稿時刻:2006年02月01日 19:20　コメント (0)　トラックバック (3)　 [EDIT]

画面のトップへ戻る