ラベル IE の投稿を表示しています。 すべての投稿を表示

IE8 CSS 2.1 対応ガイドがあるよ

microsoft がInternet Explorer 8 CSS 2.1 対応ガイドを配布していたので、配布先を示しておく。

サイトデザインをしてる人は見ておいた方がイイかも。

新しいブラウザが出るたびにCSS Hackネタが増えるけど、これもそのネタのタネになりそうな匂いがする…

サイト:


配布されている資料:

例えば、以下のようなことが書かれている。
以下 Internet Explorer 8 CSS 2.1 対応ガイド より抜粋

誤った CSS 構文に対しての動作について
<style type="text/css">
body{color: green;} /* 通常のセレクター指定 */
body,,p{color: red;} /* カンマが二つある誤った複数セレクター指定 */
body&p,p,body{color: red;} /* アンド記号を利用した誤った複数セレクター指定 */
</style>

Internet Explorer 8 と Internet Explorer 7 は誤った CSS 構文に対して以下のように動作します。

Internet Explorer 8 の処理 Internet Explorer 7 の処理
body {color: green;} body {color: green;} として処理 body {color: green;} として処理
body,,p {color: red;} 無効なセレクター指定として無視 body {color: red;} として処理
body&p,p,body {color: red;} 無効なセレクター指定として無視 body,p {color: red;} として処理
最終的に適用されるプロパティ body {color: green;} body {color: red;}




英語だけどテストページもあった。
「動作確認して下さい」ってことか。

IE8を使ってみた

IE8の正式版がダウンロードできるようになっていたので使ってみた。

Google、Yahooともに、対応の速さにびっくり。
どちらのサイトからもそれぞれのツールバーを付加するなどの最適化が施されたものがダウンロードできるようになっていた。

例えば、GoogleはこちらからIE8をダウンロード出来る。

Yahooもサイトに行けばすぐに見つけられる。

やはり、ポータルサイトにとって、IEへの対応が自サービスの利用状況に大きな影響を及ぼすのだろうと容易に推測できる。


microsoft によると、

引用:
テスト用のベンチマークの結果ではなく 、「実際のあなたがいつも見ているページをどれだけ速く表示することができるか。」

だそうで…
確かにそれが大事なことなんですが… 実際どうよ。

体感速度はIE7に比べれば確かに速くはなったが、Firefox3やChromeに比べれば、後出しのはずのIE8が優っているとは感じられなかった。

それでもIE7を使うぐらいなら、8 にした方がイイのは確かです。

InPrivate という Chorme で言うところの「シークレット・モード」のようなものや開発者ツールという Firebug もどき、さらに Windows Live Toolbar などというものがあったりと、いかにも「後出しです」的な要素が満載。

気になったのはアンカーテキストのアンダーラインの位置が何やらおかしい。これは表示が崩れる原因になるのでページデザインを行っている人にとってはまた、ウザいネタが増えることになってしまった。

ついでに「Office Live」も使用してみたが、これもGoogle Docs の対抗サービスか?というものなんですが、とりあえず IE8上で問題なく動作した。

結局、各サービスでしのぎを削っていることを体感した、ということになったが、それはユーザーにとっては結構なことではあるかもしれないが、これらに振り廻されないようにしたいと改めて感じた。

理解できないmarginの表示

「これが仕様」とは理解し難いおかしなmarginの適用例を紹介します。
CSSに触れる機会のある方は知っておいた方が良いかと。これで飯食ってる人にとっては既知かも知れませんが。

htmlでは以下のように、要素(タグ)がネストしていることは珍しいことではないのですが、子要素に指定したmarginが親要素に適用されるのはどうにも理解出来ない。

<div id="Wrap1">
  <div id="Wrap2">
    <div id="Wrap3">
    </div>
  </div>
</div>

上記の構造の要素に対してスタイルを指定してみます。
右の例ではWebページの表示上では一番上となる要素であるWrap3のTopにmarginを10px指定した例です。

IEとその他のブラウザで表示に違いがあります。IEでは子要素に指定したmarginがその親要素のみ影響されますが、その他のブラウザでは子要素が属する親要素全てが影響されます。


Wrap3の親要素であるWrap2,その親要素であるWrap1にまでmarginが適用されています。もちろんWrap2,Wrap1にはmarginは指定していません。これだけでも理解できないのですが、更にWrap2にborderを指定するとWrap2とWrap1にmarginが適用されなくなるということです。

IEではmarginを指定してるWrap3までmarginが無効になっています。

IEでは例の如く、他のブラウザとは異なる表示をします。それを含めてこのborderを指定するとmarginが無効になることがあるということをどれだけ知られているのでしょうか。
Sony Style(ソニースタイル)
デル株式会社

Recent Posts