IE 9/10 未満のブラウザとそれ以外を判定する

CSS / Less JavaScript

HTML 5 や CSS 3 の新機能を使う場合、古いブラウザでも誤解なく内容が伝わるよう努めるべきだ。Safari, Chrome, Firefox, Opera の場合、自動アップデート機能やユーザのリテラシーの高さゆえ、古いバージョンを使い続けていることは少ない。そもそもバージョンの古い時代にはユーザが少なかったという経緯もある。

しかしながら Internet Explorer は未だにバージョン 8 を利用しているユーザも多い。またバージョン 9 でも機能面で物足りない場合がある。

そのような場合に、CSS や JavaScript の機能を使って判定する方法をここに示す。

CSS による判定

メディアクエリを使うと IE8 以前と IE9 以降でスタイルを書き分けることができる。

先にレガシーブラウザ用のスタイルを書き、そのあとにモダンブラウザ用のスタイルを上書きする。

.some-selector { property: for-legacy-browser; }

@media (min-width: 0) {
    .some-selector { property: for-modern-browser; }
}

他のブラウザではそれぞれ Safari 4, Chrome 4, Firefox 3.5, Opera 9, Safari (mobile) 4, Android 2.3 以降でモダンブラウザ用のスタイルが適用される。

同じ判定を JavaScript で行う場合、DOM Ready 以降に動的にスタイルシートを生成して判定する。

JavaScript で IE 9 以上

IE 8 以前と IE 9 以降で処理を切り分けたい場合は W3C Range を使うとよい。次のコードで判定できる。

modern = typeof window.getSelection === "function";

Safari 1.3, Chrome 1, Firefox 2 (Gecko 1.8.1), Opera 9 以降がモダンブラウザと判定される。

JavaScript で IE 10 以上

IE 9 以前と IE 10 以降で処理を切り分けたい場合は History API を使う。

modern = typeof history.pushState === "function";

Safari 5, Chrome 5, Firefox 4 (Gecko 2.0), Opera 11.5 以降がモダンブラウザと判定される。

あるいは File API を用いる。アプリケーションで使用する機能に応じて使い分けるとよい。

modern = typeof window.FileReader === "function";

Safari 6.0.2, Chrome 7, Firefox 3.6 (Gecko 1.9.2), Opera 12.02 以降がモダンブラウザと判定される。

番外編：IE 8 (標準モード) 以上

Native JSON が存在するかどうかで判定できる。IE 8 の互換モードでは native JSON がなぜか使えないため、このような判定ができる。IE 9 では互換モードでも JSON を使用できる。

modern = typeof window.JSON === "object";

Safari 4, Chrome 3, Firefox 3.5 (Gecko 1.9.1), Opera 10.5 以降がモダンブラウザと判定される。

参考