JeffreyFrancesco.org 公開日 タグ Tag Permalink 現在地 Facebook page Twitter RSS feed

HTML5 + CSS3 で組む場合、IE8 以下では JavaScript 有効でないと表示が崩れる心配がある件を Media Queries で何とかしてみる

IE9 も無事日本語版がリリースされ、HTML5 + CSS3 で全ての Web サイトを構築していけそうな環境も着々と整ってきているように感じる今日この頃ですが、当サイトへのアクセスログを見る限りまだまだ IE についてはヴァージョン7〜8が主流といったところ（5月以降に絞ってみても IE6 と IE9 のアクセスがほぼ同じという状況）ですので、さすがにもうしばらくの間は完全に無視する訳にはいかないのかな、と思っています。

しかし、HTML5 のセクショニング要素などもきちんと使って組んでいこうとなると、IE8 以下に関しては html5.js や IE9.js などをロードしない事には HTML5 の新要素を絡めたスタイルを適用出来ない、つまりは JavaScript 無効の場合の表示に関しては基本的に保証は出来ないよなあ…というのも実情でして、これをどうするかってのは一部の方にとっては懸案事項の一つかと。もちろん無視するという手もあ（ry

んで、過去を振り返ってみますと、 CSS レイアウトが盛んになりかけた当時、Netscape Navigator…あ、Communicator だったっけな…まあとにかくそれのw 4.7（懐かしい…）などの CSS 対応がとても不完全なブラウザに対しては、その実装の不完全さを逆に利用して、

<!-- 例1: NN 4.7 は media 属性に screen 以外の値を指定した CSS を読み込まない -->
<link rel="stylesheet" type="text/css" href="/style.css" media="screen, tv">

<!-- 例2: IE4 は url() を使わない形式の @import 規則を認識しない -->
<style type="text/css">@import "/style.css";</style>

などとして CSS そのものを適用させないというのをやってたと思います。

参考資料
CSSハック via Css-Style.jp

なので、IE8 以下でかつ JavaScript が無効の場合に一部だけスタイルが適用されて変にレイアウトが崩れた場合などを考慮しながら組むよりも、いっその事これと同じような方法を使って、制作者スタイルシートを適用させずにデフォルトスタイルシートで表示されるようにする、というのも一つの方向としてありなんじゃない？と思いまして、今回はその方法を少し考えてみました。

とはいってもコード自体はそんなに複雑ではなく（各ブラウザの実装状況を知っていれば誰でも思い付くような簡単なものです）基本は CSS を指定する link 要素を次のように書くだけという。

<link rel="stylesheet" href="/style.css" media="screen and (min-width: 0)">

IE9（と、その他のモダンブラウザ全ての新しめのバージョン）であれば CSS3 の Media Queries に対応しているので、これを利用して IE8 以下にはスタイルシートを適用しないようにしています。また Media Queries 対応のブラウザにおいても min-width: 0 というのは「最小幅が0(単位は問わない)幅以上」=「どんな幅でも」と同義ですから、単純に media="screen" という指定をしているのと何ら変わりがなく、結果スクリーンメディアであればどんな条件下であれ style.css が適用されるという訳です。それ以上の振り分けが必要であれば CSS ファイル内でしてあげれば良いですし。

もちろん、これだけでは IE8 以下においては全くスタイルシートが適用されない事になります（別にそれで良いんであればそのままでも構いませんが）から、この後で条件付コメントを利用して例えば IE9.js などを読み込む際に、一緒に次のようなスクリプトを書いてスタイルシートが適用されるよう変更してしまえばよろしいかと。要は「JavaScript 有効でないとレンダリング出来ないのだから CSS 自体 JavaScript 操作で適用するようにしてしまっても別に問題なくない？」という発想。

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<script>
    var s = document.getElementsByTagName('link')[0];
    s.href = "/style-ie.css";
    s.media = "screen";
</script>
<[endif]-->

まあこれは一例ですので環境に応じて多少の変更が必要かもしれませんが、やっているのは次のような事。

  1. IE9.js を読み込む。これで HTML5 の新要素を認識するようになったので、
  2. CSS を指定している link 要素を探し出して、
  3. href 属性を IE8 以下用の CSS に変更して、
  4. 最後に media 属性の値をノーマルな screen だけの指定に変更

今回は IE8 以下には専用のスタイルシートを適用するという想定で書いてみましたが、IE9.js を利用する事でモダンブラウザ用のスタイルシートを使っても特に問題が出ないようであれば、3.の操作は不要になるかと思います。適当に書いたサンプルを置いておきますが、このサンプルでは IE8 以下用に別の CSS を用意して、

  • モダンブラウザ（IE9 含む）の場合はカラーかつ、角丸のボーダーやシャドウなど
  • IE8 以下で JavaScript 有効の場合、レイアウトは大きく変わらないけど白黒表示
  • IE8 以下で JavaScript 無効の場合、ブラウザデフォルトのスタイル

がそれぞれ適用されるようにしています。事情により（イコール面倒くさいから、汗）今回はスクリーンショットなしで。Windows 環境があれば IE Tester で確認とか、ブラウザを切り替えて閲覧してみるとその差は確認出来るかと思います。

専用の CSS を用意するかしないかはご自由ですが、あった方が色々有効的かも…と思っています。例えば冒頭に IE8 以下ご利用の場合の注意書きとか IE9 ダウンロードリンクを貼ったメッセージを置いておき CSS で表示・非表示を切り替えるとか、あと先の IE8 の場合は白黒というのもそうですが、いっそテキストブラウザのような CSS を組むとか。笑 まあそんな感じでちょっとノスタルジックな見た目にして「あ、このブラウザってもしかして古いのかな？」と思わせる事で、上手くモダンブラウザヘの移行を促進出来るかもしれない…などと思ったりもしますが、多分そんなに上手くは行かないんでしょうねえ。涙

まあそこまでしなくても CSS をモジュール化してインポートしてるような場合に、IE8 以下では無意味な部分のインポートを省いたり、IE9.js などの力を借りても上手くいかない部分にパッチを当てたり出来るので、多分その方が便利かなと。

という訳で、今回はちょっとした小ネタのつもりで書き始めたのですが、結局はいつものような長めの文章になってしまいました。残念でならない。