IE8Beta

ほんのちょこっとしか触っていませんが、取り急ぎの雑感としては、Firefox2よりもCSSサポートは高いですね。
僕の知っている限りでは、CSSサポートと言えば、Operaが最強なのですが、いろいろごちゃごちゃやってもOperaと遜色ありませんでした。特にfloat周りに力を入れたという印象です。やっとこさ「Acid2テスト」にも合格ですしね。

セレクタの実装なんかも、CSS3のほとんどを実装済みというものではありませんが、納得出来るレベルのものになってきました。特に、ながらく待ち望んだ「before/after擬似要素」がIEでも使える!ということです。また、ながらく苦しめられてきた「IEのhasLayoutプロパティ」というかなり謎の多かった仕様も消えうせるということで、これはもう感動ものです。

今までマークアップを生業とする身としては、何かと話題というか問題児なIEでした。IEが駄々っ子なために、泣きながら徹夜をしたという制作者の方もいらっしゃるかと思いますが、IE8のリリースとともに、一気に制作にかかる負担が解消されそうですね。
Javascriptやその他のプログラミング系の言語はあまり得意ではありませんので、自分では調べていないのですが、amachangさんのIE8 速攻徹底レビューなんかを見ても、全体的にWeb標準回りの強化がされていることが伺え知れます。

というわで、以下が検証(という程のものでもない)ソース。時間があれば、いろいろやってみたいっす。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>デモ</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
padding-top: 100px;
}
div.container {
width: 800px;
overflow: hidden;
}
div.content {
width: 3200px;
}
div.section {
float: left;
width: 760px;
padding: 10px;
border: 10px solid #313131;
}
div.section ul li {
list-style: none;
min-height: 200px;
background: url(demo.gif) right bottom no-repeat;
}
div.section ul li h3 {
position: relative;
}
div.section ul li h3:after {
content: "abcdef";
}
div.section ul li h3 img {
float: left;
margin-right: 10px;
border: 5px solid #a2a2a2;
}
div.section ul li p {
/*float: left;*//* 最後に追加してみたら、IE7・FF2でめっちゃ崩れた */
margin-left: 200px;
}
div.section dl {
clear: left;
}
</style>
</head><body>
<div class="container">
<div class="content">
<div class="section">
<ul>
<li>
<h3>hnタイトル<img src="demo.gif" mce_src="demo.gif" width="180" height="180" alt="" /></h3>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
<hr />
<p>ダミーテキスト</p>
<dl>
<dt>dtっす</dt>
<dd>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</dd>
</dl>
<p>dlの後のpっす。ダミーテキスト</p>
</li>
</ul>
<!-- /.section --></div>
<div class="section">
<ul>
<li>
<h3><img src="demo.gif" mce_src="demo.gif" width="180" height="180" alt="" />hnタイトル<span></span></h3>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
</li>
</ul>
<!-- /.section --></div>
<div class="section">
<ul>
<li>
<h3><img src="demo.gif" mce_src="demo.gif" width="180" height="180" alt="" />hnタイトル<span></span></h3>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
</li>
</ul>
<!-- /.section --></div>
<div class="section">
<ul>
<li>
<h3><img src="demo.gif" mce_src="demo.gif" width="180" height="180" alt="" />hnタイトル<span></span></h3>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
</li>
</ul>
<!-- /.section --></div>
<!-- /.content --></div>
<!-- /.container --></div>
</body>
</html>

また、IEといえば、2/13にIE6からIE7への自動更新がはじまっているのですが、思ったほどにグーンとは移行が進んでないですよね。ちなみに弊社(有限会社アイエイトワン)のサイトで見てみると、IEユーザー自体は約50%と他のサイトより少なめです(まぁ、職種的に同業の方がご覧になる機会が多いですからね)。その中での比率ですと…

  • IE6:64.20%
  • IE7:35.19%
  • IE5.5:0.62%

となっています。
【有限会社アイエイトワンサイトユーザーのブラウザシェア】Google Analyticsのページです

このようにIE7への移行はちょっと微妙な感じになっておりますし、IE8も2008年中にリリースと噂されている訳ですから、是非ともIE7はすっ飛ばしてしまって時期スタンダードはIE8になってしまえば良いのにと思います。

最後にちょっと残念(というかやっぱり)な感じというものです。IE8ではあらたに「WebSlices」という独自の機能を実装しています。これは何かと言うと、セマンティックWebということでは有名な、あの Microformats の代替的な機能となるものです。より詳しい情報としては、【詳報】セマンティックWebに向かうIE8の「8つの強化点」にて説明が掲載されております。
まぁ、ついにマイクロソフトさんもここまで対応するようになったということは間違いなく喜ばしいことなのではありますが、せっかくセマンティックWeb的なことに対応するのであれば、独自の機能などを作り出すのではなくて、世界中の皆でせっせと仕様を策定している Microformats の一部に対応した方が良いんじゃないの?と思います。

WebSlices というのは、Microformats の hAtom を拡張したものらしいのですが、記述の仕方が Microformats とは微妙ーに変わってきます。そんな中、時期バージョンでは Microformats そのものに対応するらしい Firefox とかもある訳です。
クロスブラウザと言うと今までは(X)HTML+CSSの世界やJavascript界隈で主として叫ばれていた言葉だったのですが、今後はセマンティックWebにおけるクロスブラウザ問題なんかも出てきてしまいそうな予感です。

とは言え、最後にネガティブな内容も書きましたが、全般的にWeb標準回りに強化した新たなIE8のリリースを今か今かと待ち遠しいです。

comment

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

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

TrackBack URL :