IEの各バージョンを分岐させる方法

  • このエントリーをはてなブックマークに追加
IEの各バージョンを分岐させる方法

まだまだなくならないIE10以前・・・

Windowsに最初からインストールされているInternet ExplorerことIE
今では最新バージョンの11以前はサポートが終了していますね。
サポートの切れたインターネットブラウザは閲覧こそできますが、セキュリティ面では無防備になりつつあります。
ウイルス対策は有料ソフトでやっているから大丈夫!と安心しているかもしれませんが、セキュリティの穴を見つけてはウイルスが入ってきてしまいます。なのでセキュリティの穴は少ない方が良いというわけですね。
人と同じです。ウイルスによって病気にかかってから治すよりも、病気にならないように予防したほうが早く治るのと一緒なのです。
なので旧バージョンのブラウザを使い続ける事はあまりお勧めはできないのですが、色々な理由でブラウザの更新をしていない方も大勢いることでしょう。

そういった理由から旧バージョンのIEも対象に調整しなければならない事があります。
特にCSS3が描画できないIE6,7,8,9が厄介ですね。対応する事も多いのではないでしょうか。

最新ではないブラウザを使っているのだから仕方ないと思うのは制作者側の意見です。閲覧者はホームページを見るのにIEを使うという認識でいる事がほとんどなので、「見れない = ホームページがおかしい(壊れている)」と捉えられても仕方ないのかもしれません。
こういった状況に対応するにはIEのバージョン別に読み込ませるCSSを変えて対応するしかなさそうです。

分岐させる方法について

条件付きコメントで読み込ませるHTMLを変える方法と、CSSをハックして割り当てるプロパティを変える方法を紹介します。

条件付きコメントの利用

基本的な書式は、下記のようになります。

IE8の場合
<!–[if IE 8]>

IE8未満の場合、IE7, IE6など
<!–[if lt IE 8]>

IE8以上の場合、IE8, IE9など
<!–[if gte IE 8]>

CSSハックの利用

IE8、またはそれ以下の場合
セミコロン(;)の前にバックスラッシュ(\)と数字の9を加えます。

IE7、またはそれ以下の場合
プロパティの前にアスタリスク(*)を加えます。

IE6の場合
プロパティの前にアンダースコア(_)を加えます。

.style{
  background: gray;
  background: pink\9; /* IE 8 */
  *background: green; /* IE 7 */
  _background: blue; /* IE 6 */
}

あまり利用する機会は少ない・・・

流石に対応しなければならない事案は少なくなりました。
困った時に「何か方法があった!」と思い出して調べて使う程度の認識で大丈夫かと思います。

IEを使って正常にホームページを見ようとしたとき、もうIE6,7,8は使い物になりません。
またまだサポート範囲内のwindows7はアップデートで最新のIE11までがインストール可能なので、表示がおかしいとかそういった事例は少ないかと思います。
ですがwindowsVistaを利用している方や、XPを使っている方もまだまだいるようです・・・
FireFoxなどは起動する度に更新が入りますが、IEは個人でアップデートしていかなければ旧バージョンが残ってしまいます。
忘れたころに対応しなければならない事案が出てくるかもしれません。

まとめ

・条件付きコメント、CSSハックでIE毎に割り当てる記述を変更できる

  • このエントリーをはてなブックマークに追加

CONTACTお問い合わせ

ホームページ制作に関するご質問などございましたら、
お気軽にお問い合わせください。

※ブログ記事に関するご質問はお答えしかねます。

TEL:0258-31-5005FAX:0258-37-7301

ホームページ制作やSEOのお悩みはぜひ弊社へご相談ください