![Blog [Home]](http://higash.net/higash/wp-content/themes/higash/img/gnavi_blog.jpg)
IE8の新機能とか互換モードとかCSSハックとか
さすがに正式版ともなるとその存在を無視するわけにはいかないので、ここらでWeb制作のためのIE8情報を簡単にまとめておこうと思います。
一緒に仕事してる人たちに「IE8でもちゃんと表示チェックしようね」とか言っておきながら、自分がまったくIE8についてわかっていないのも恥ずかしい話なので。
アクセラレータ？ Webスライス？
制作者が押さえておきたいエンドユーザ向けの新機能
IE8公式サイトのページタイトルは 「かつてない新機能」 。
個人的にはそれほど画期的な機能だとは思わないけれど、IE8にはいくつか制作者も知っておいたほうがよさそうな新機能があるようです。
まず、 アクセラレータ と呼ばれる機能。
BETA版ではアクティビティと呼ばれていたようですが、ページ上の文字列を選択してGoogle検索などをワンクリックで行えるようにする機能です。
「ツール」メニューの「アドオンの管理」で
アクセラレータを管理することができる
そして、もうひとつ押さえておきたい新機能は Webスライス 。
名前の通り、Webページ内の一部分を「切り取って」保存しておく機能です。基本的にはRSSみたいなもんかな？
ちなみに、このWebスライス機能を利用するにはページがWebスライスに対応している必要があります。
もしかして、「Webスライスに対応するページ作って」なんてクライアントからリクエストされることもあるのかも・・・無いよな・・・。
価格.com や Yahoo!オークション はWebスライスに対応している
FirefoxでIE8の新機能を使うには
アクセラレータやWebスライスはアドオンをインストールすれば、Firefoxでも利用することができます。
アクセラレータをFirefoxで使うには、 IE8 Activities (Accelerators) for Firefox というアドオンがあります。
また、WebスライスをFirefoxで使うには、 WebChunks というアドオンを使えばOKです。
これらのプラグインはMacのFirefoxでも使えるからうれしい。Firefox万歳。
アクセラレータやWebスライスを実装するには
Internet Explorer 8正式版レビュー − ＠IT には、 IE8の新機能「アクセラレータ」の実装方法 と IE8の新機能「Webスライス」の実装方法 が解説されています。
この記事を読む限りでは、実装はそれほど難しくなさそうですね。
ちなみにアクセラレータとWebスライスをWordPressに実装するためのプラグインも公開されています。
アクセラレータのプラグイン WordPress Internet Explorer 8 Accelerator は、閲覧中のWebページで選択した文字列をそのままWordPressの新規エントリーにしてしまおうというもの。
プラグインを有効にして、 WordPress Internet Explorer 8 Accelerator にあるフォームからアクセラレータを追加することができます。
アイデアは面白いけど、実際に使うことはなさそうかな・・・。
閲覧中のページで気になるキーワードを見つけて、
「よし、これで新規エントリー書こう！」って時には役立つかもしれない・・・
むしろ注目なのはWebスライスを実装するプラグイン webslicer 。
このプラグインをインストールすれば、WordPressが簡単にWebスライス対応ページになります。
webslicerで作成したWebスライス。表示されるのはもちろんRSSの内容。
ドキュメント互換モード
IE8はいくつかのドキュメント互換モードを備えています。
詳しくは Internet Explorer デベロッパー センター（msdn） 内の ドキュメント互換性の定義 に書かれていますが、とりあえず知っておくべきは Emulate IE7モード でしょう。
当サイトでは、IE7に対してCSSハックを使っている箇所のいくつかはIE8でも表示が崩れていました。
相変わらずFirefoxやSafariとはCSSのレンダリング結果が異なるのかなぁ？？
しかし、IE7で正常に表示できているこのサイトは、Emulate IE7モードを利用することでIE8での表示崩れを防ぐことができます。
IE8でIE7と同様の表示結果を得るには、次のような <meta> タグをHTMLの <head> 内に記述します。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
なお、このタグは <title> タグと他の <meta> タグ以外のタグよりも先に記述しなければなりません。
IE8のクセがまだよくわからない今の段階では、とりあえずEmulate IE7モードでIE8対策をしておくのが手っ取り早いかもしれません。
IE8用のCSSハック
IE8用のCSSハックはあまりよいものが見つからなかったのですが、ひとつ挙げるとしたら IE8正式版のみ適用するCSSハック│Web制作の現場から 〜入院、退院、そしてつまはじき〜 に紹介されているものかなぁ。
たとえば、<div> タグに対してIE8以外のブラウザに visibility:hidden; を、IE8（もちろん互換モードを使っていないIE8）だけにvisibility:visible; を適用するとすれば、以下のような記述になります。
div {
visibility:hidden;
}
html>/**/body div {
visibility/*\**/:visible\9;
}
この記述は明らかにプロパティが間違いになるので、CSS Validatorには通りません。 書式としてはinvalidです。
ちなみに上の記述でセレクタ（<div>）の前に html>/**/body を書かなければ、IE6〜IE8に適用されるCSSハックになります。
昨年、 CSSハックまとめ［2008年7月版］ というエントリーで掲載した検証表をアップデートしました。 http://higash.net/csshack/ をご覧ください。
以上、IE8の新機能とか互換モードとかCSSハックとかをざっと調べてまとめてみました。まだまだIE8については挙動がよくわかってないので引き続き研究してまいります。
Web制作者としては大嫌いなIEだけど、IEがあるから僕らがご飯を食べられるのもまた事実なわけでして・・・。今後ともよろしく、IE！
- Share & Bookmark
