古いブラウザ用の魔法

Web業界では新規格がどんどん生まれていきます。そしてテクノロジーの発展は凄まじい速度なので古いものは非対応となり排他的な扱いを受けます。

わかりやすく言えば旧型のスマホが最新OSにアップデートできないような状況ですね。製品のサポート終了等の経験は誰もがあるのではないでしょうか？

パソコンやスマートフォンにはインターネットを見る専用の画面（ブラウザアプリ）がありますがブラウザにもたくさん種類が存在しています。iPhoneのサファリ、Androidのクロームといった普段からページ閲覧時に立ち上げているアイコンのことです。

時間をかけられない案件であれば「最新ブラウザのみ対応」とすればトラブルも少なくスムーズです。ただ、企業によってはセキュリティ面から現在も社内で古いブラウザを使っているケースもあるためご依頼次第では動作範囲を広げなくてはなりません。

全ブラウザが共通規格で作られていることはなく常に個別処理を書く必要があります。

たとえばhtmlであれば条件付きコメントやCSSのハック。JavaScriptならポリフィルも１つですね。参考までに記述をざっとご紹介させていただきます。

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]-->

/* IE6のみ対象 */
*html .element {
	color: red;
}

/* IE7のみ対象 */
*+html .element {
	color: blue;
}

if (typeof Object.create !== "function") {
	Object.create = function (proto) {
		function F() {}
		F.prototype = proto;
		return new F();
	};
}

下記はハイフンで挟むプレフィックスを使った例。

.element {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	transition: all 0.3s;
}

次はJavaScriptのライブラリ（jQuery）記述例。

if ($.browser.msie && parseInt($.browser.version) <= 8) {
	// 古いIE（IE8以下）用の特殊処理
	$('body').addClass('ie8-fix');
}

ブラウザでは表示直前に追記を書くことで強引に認識させることができるわけですね。とは言っても細かく対応してるとキリがありません。一般的には最新ブラウザのみ動作対象としますが実際は時間が許す限り細部の処理を書き続けるのが正解です。

どんなプロジェクトも「できるだけ丁寧に作り込む心がけ」が重要かもしれません。