こんにちは、ECプロデュース部の岡本です。
未だに高いシェアを誇る「Internet Explorer 8」。9月にはこのようなレポートも発表されていました。
IE10がシェア第2位へ – 8月ブラウザシェア | マイナビニュース
今回はこのIE8にレスポンシブサイトを「jsを使用せずに」対応させる方法を紹介いたします。
コーダー泣かせの「IE8」
レスポンシブWebデザインのサイトを作成する際、必ずといっていいほど問題になるのが「IE8」対応です。
「レスポンシブ化の要」とも言える「メディアクエリ」に対応していないため、専用のjsプラグインを読み込む必要があります。
IE8でメディアクエリを読み込ませるjsプラグインについては、別の記事にて紹介しておりますのでそちらを御覧ください。
レスポンシブWebデザインをIE8に対応させる方法 | スマートフォン＆モバイルEC事例ノウハウ集｜モバイルファーストラボ
jsで対応させるデメリット
レスポンシブWebデザインのアキレス腱でもある「メディアクエリ」をIE8でも対応させるため、「専用のJavaScript」を読み込ませることが一般的です。
有名なところでは「Respond.js」や「html5shiv.js」がありますが、どちらも一長一短と言わざるをえない現状です。
このブログでも、他のブログでも「バグが発生しやすいので、取り扱いに要注意」という内容の記事が紹介されています。
- レスポンシブWebデザインをIE8に対応させる方法
- IE8以下でもメディアクエリーに対応する Respond.js の紹介と動かない時の対処法
- HTML5のIE8対応「html5shiv.js」の役割を誤解してた＆HTML5のIE8対応って必要？
元々非対応のブラウザにjavascriptで無理やり認識させるようなものですので、やはりどこかしらで不具合が生じてしまう様子です。
HTML5 Boilerplateというコミュニティでは、「プログレッシブ・エンハンスメントに反する」として「Modernizr2.5のカスタム・ビルダー」からRespond.jsを除外することを発表した際、これらのスクリプトを使用するデメリットについて以下のようにまとめられていました。
Respond.js には @import が未対応という制限以外に、CSS ファイルを Ajax で読み込むため、次のような問題があります。
- <head> 内の JavaScript によりブロッキングが発生する
- 追加の HTTP リクエストが必要となる
- Ajax 完了前にレンダリングされると、FOUC が発生する
- クロス・ドメインとなる CSS には対応できない
古いブラウザがサポートできない機能を何らかの手段で補う、いわゆる ポリーフィル として一旦は H5BP に採用された Respond.js ですが、プログレッシブ・エンハンスメント の考え方から言っても、古いブラウザにそこまでのハンディキャップを負わせる価値はない、がコミュニティーの決定となったのです。
Respond.jsとレスポンシブWebデザインをめぐるベストプラクティス議論
発想の転換：IE8から制作する
簡単にIE8対応ができると人気のjavascriptによる対応ですが、様々なリスクを抱えていることが明らかになりました。
これらはページ速度の低下や一定条件下でエラーが発生するなど、サイトオーナーとしてはあまり喜ばしくない問題でもあります。
そこで再注目したいのが「プログレッシブ・エンハンスメント」です。
プログレッシブ・エンハンスメント – レトロブラウザベースで作る
「プログレッシブ・エンハンスメント」とはブラウザの互換性に対する考え方の１つで、「どのユーザーにも同じように情報コンテンツを提供すること」を重視しています。
そのため基本的には「古いブラウザに合わせた」コンテンツを作成し、「新しいブラウザ利用者」には「よりリッチな見せ方」を提供することが推奨されています。
「IE8でも見れるサイトにして欲しい」ということであれば、「IE8で閲覧できるサイト」をまず制作するということですね。
そして今回紹介する手法は「新しいブラウザ利用者」向けの「リッチな見せ方」として、「レスポンシブWebデザイン」を実装させるものとなります。
レスポンシブWebデザインを実装させる目的は、「マルチデバイス対応」です。
そう考えた場合、そもそもPC以外の端末に存在しない「IE8」にとって「レスポンシブWebデザイン」は「リッチな見せ方」に該当します。
そこで「IE8では固定幅、モダンブラウザではレスポンシブ化されたウェブサイト」を作るポイントを次項からご紹介します。
html:rootを使った「レスポンシブ化」
さっそくjsdo.itにてサンプルを制作しました。
IE8で見ると固定幅、モダンブラウザで閲覧するとレスポンシブになっていることがわかるかと思います。
この「IE8対応のレスポンシブ」を実現させているのは、CSS3の要素「:root擬似要素」です。
サンプルページのCSSを見て頂くと、「固定幅レイアウト」でまずスタイリングされていることがわかります。
そして51行目以降では一変して、「html:root」を利用してレスポンシブなスタイルが記述されています。
これはIE8がCSS3に非対応であることを利用して、「一旦固定幅レイアウトで作成し、CSS3でレスポンシブレイアウトに上書きする」という方式です。
まずIE8などのレトロブラウザ向けにデザインし、モダンなブラウザではよりリッチなデザインを実現させる。
少しCSSの記述量は多くなりますが、まさに「プログレッシブ・エンハンスメントなレスポンシブ化」を実現させています。
また今回は「calcプロパティ」を利用することで、33.3333%のような「割り切れない数字」になるレイアウトでも「100% / 3」などの計算式化することで綺麗に整えることも実現させています。
この「calcプロパティ」についてはIE8だけでなく「Androidブラウザ」でも非対応の要素ですので、必ず「Android用の実数」「calc」「-webkit-calc」の３つを記述するようにして下さい。
まとめ
XPのサポート終了と共にシェアが低くなることが期待されているIE8ですが、まだまだ対応が必要な業界は数多く存在しています。
「無理やり対応させる」のではなく、ブラウザにあったスタイルを設定していく必要性はしばらく続きそうです。
