EC studio EC studio デザインブログ

thumb_ie-tester2.jpg
ブラウザチェックに苦労しているコーダー・マークアップエンジニアには大変便利なツールがありました。

それがIE5.5 IE6 IE7 IE8 でのレンダリングを確認できるツール、
IE Tester。

http://www.my-debugbar.com/wiki/IETester/HomePage

IETester v0.2 では

  • IE 5.5
  • IE 6
  • IE 7
  • IE 8 beta

のレンダリング検証ができるようです。IE7にまだアップデートされていない場合は、IE7以降での検証はできません。

インストール方法については、一般的なアプリケーションと同じようにインストーラーを起動してインストールすればOKです。すでにインストールされているInternetExplorerの起動ファイルなどを指定するなどの作業は必要ありません。

インストールが完了し、「IE Tester.exe」を起動すれば検証用のブラウザが起動します。

コンディショナルコメントで検証

IEの独自拡張であるコンディショナルコメント(Conditional Comments)を使って、実際に各ブラウザでの判定を見てみましょう。

コンディショナルコメント(Conditional Comments)で検証
上記URLを IE Tester で開いてください。

IEのバージョン違いでの検証だと、スタンドアローン版のIEをインストールするという方法もありますが、環境によってはスタンドアローン版の場合このコンディショナルコメントが適応されません。

最近はCSSハックによる振り分けを避ける傾向にあるので、代替としてコンディショナルコメントを利用している人には良いですね。

※コンディショナルコメントはあくまでIEの独自拡張なので、本当は使わないのが理想です。

なおコンディショナルコメント(Conditional Comments)については下記ページを参考にさせていただきました。
条件付コメント(Conditional Comments)実験ページ

IE向けCSSハックで検証

IE向けCSSハックではどこまでレンダリングが再現されるでしょうか。

IE向けCSSハックで検証
上記URLを IE Tester で開いてください。

IE向けハックには、@importで読み込む外部CSSファイルを制御するのが多いかなと思いますが、今回はスタイルも少ないのでサンプルページようなハックにしました。

ハックにもいろいろ種類があるので、もしかしたら適応されないものも中にはあるかもしれませんが、上記以外でいろいろと検証した限りでは忠実に再現していたように思います。

とはいえまだまだベータ(アルファかな?)版ということもあり、バグも出てくるかもしれせんが、これでずいぶんと検証が楽になるので使ってみてはどうでしょうか。

より本格的な環境チェックをしたい場合には、こちらの記事も参考にしてください。
1台のマシンでIE6とIE7の環境を安全に動かす – EC studio 技術ブログ


関連した記事:
投稿者
カテゴリー
人気のエントリー
最近のエントリー
アーカイブ
Copyright© ChatWork, All Rights Reserved. secured by ESET.