WordPressやSymfonyのTipsを中心にアニメや日常の出来事について語ります。
メニュー

まだIEで消耗してるの?~もう迷わない!私のIE対策手法~

この記事は約4分26秒で読めます

IE8ロゴ
ゆっきー
ども、カフェブロガーの悠木です。 お気に入りのカフェはドトールコーヒーです。 14時からの限定スイーツ「シューシャポー」が大好きです。

2016年1月12日にIE8のサポートが終了しますが、サポートが切れても未だにXPが現役な環境ではIE8対応せざるを得ない状況があります。
この案件が最後だと思いたいですが、HTML5のIE8以下対策、CSS3のIE9以下対策についてまとめました。

HTML5+IE8対策のためにCSSが複雑になるのは嫌なのでなるべくシンプルな感じにしたいです。
バグが発生時に対応しやすくするため&メンテナンスしやすくするためHTML要素にIEのバージョンクラスを追加する方法を考えました。

HTML5のIE8対策のソースコード

GitHubに上げたHTML5+IE8対策(簡素版)のサンプルソースコードです。
コピペで動くはずです。

IE8対策の解説

ソースだけ載っけてもあとから見たら意味わからなくなるので、ちょこっと解説していきます。

HTML要素にIEバージョンクラスを追加

jQueryを使ってIEのバージョンを判断して、HTML要素に対応するクラスに紐付けてます。

jQueryのバージョン1.x系を読み込む必要があります。

jQueryの2.x系はIE8に対応していないので使えないですね。
IE8に足を引っ張られる感があるのは否めませんが…

$.browser.msieはjQueryの1.9以降は廃止になっているみたいです。
jQuery Migrate pluginを読み込んでおけばokです。

CDNを利用していますが、実際の開発ではサーバー内に配置して読み込んでます。

最新のjQueryのダウンロードはこちら

IE8対策のCSSハック

先ほどのjQueryで追加したクラスに対してIE8対策を施します。
サンプルコードでは直接スタイルを書き込んでますが、もちろん外部ファイルに分けて管理した方が良いですね。

HTML5タグ対策

コンテンツ部分の対策になります。
IE8headerタグなど認識してくれません。

そのため次のように記述します。

HTML5タグ内にdivタグを入れ子にしてdivタグに対してスタイルを適用させます。
たぶん、この方法が一般的なのかなー?

どうしてもHTML5タグにスタイルを適用させたい場合はhtml5shivを読み込ませてHTML5タグを認識させます。

これで次のように書いてもレイアウトが崩れなくなります。

【IE対策】互換表示させない

IEのバージョンごとにレンダリング方法が変わります。
そのため互換表示と標準表示によってWebページを正しく表示できない場合があります。

IE8が入っているのに、互換表示モードでIE6のレンダリング方法が使われてしまったり。
次のコードを入れることで常にIEの最新バージョンの標準モードを表示してくれます。

【モバイル対応】viewportの設定

詳しいviewportの設定については参考サイトをご覧ください。

【追加IE9対策】IE9以下のCSS3対策

IE9以下はCSS3に対応できていません。
CSS3セレクタとCSS3プロパティに対応するため下記2つのプラグインを導入します。

【IE6-IE8対策】CSS3セレクタに対応するため「Selectivizr.js」を導入する

http://selectivizr.com/

【IE6-IE9対策】CSS3セレクタに対応するため「CSS3PIE」を導入する

http://css3pie.com/

IE8以下のレスポンシブ対策

スマートフォンやタブレットでホームページにアクセスしたとき時に、
自動的に画面幅を調節するための仕様がありますが、IE8は対応しておりません。

【追加対策】IE8以下のレスポンシブ対策「Respond.js」を導入する

https://github.com/scottjehl/Respond

【追加対策】Bootstrapのバージョン4.x系について

私はサイト制作時にブートストラップによくお世話になっています。
新しく出たBootstrapのバージョン4.x系はIE8は非サポートなため、3.x系を使用しましょう。

【追加対策】Javascriptを無効化しているブラウザの対応

IEに限った話ではないですが、ブラウザ側でJavascriptが無効になっていると正常にサイトが表示されなくなってしまいます。

「サイトがちゃんと表示されないんだけど、どうなってるの!?」
「Javascript有効にする方法教えろ!!」

といった問い合わせを回避するべく、次のコードを仕込んでおきましょう。

ブラウザがJavascript無効だった場合に非表示にしていたメッセージボックスを表示する処理です。
リンクは下記のサイトに飛ぶようになっています。

全部入りのソースコード

必ずしもすべてのプラグインをIE対策のために導入する必要はないです。
お客さんの要望と相談して追加するか検討した方がよいでしょう。

GitHubに上げたHTML5+IE8対策(全部入り版)のサンプルソースコードです。

IE8対策の参考になりそうな記事一覧

さいごに

また需要のない記事を書いてしまいました。
そろそろIE8の葬儀を進めなければいけませんね。

というか約2ヶ月ぶりの記事でした。

コメントをお待ちしております

PR

カテゴリー