会社で構築している会員制サイトのシステム部分(phpでアレコレ)に関しては一段落が着いたので、html(+CSS)部分をちょっといぢってみようと思った。

巷ではhtml5+CSS3でのコーディングが注目を浴び始めているが、html5は対応ブラウザの問題が非常に頭を悩ませる。

HTML5 & CSS3 Support
http://www.findmebyip.com/litmus/

上記サイトにおいて各ブラウザのhtml5実装状況を見てみると、IE9ではいくつかの機能が実装されている(とはいえ、他のモダンブラウザと比較するとかなりエグイ)が、IE8以下は壊滅的状況である。

会員制サイトのユーザー環境をGoogle Analyticsで調べてみると全体の70%近くがIEユーザー、しかもその内の60%近くがIE8以下(IE8:40%、IE7、IE6:各10%ずつ程度)なので、ざっと全体の40%近くがIE8以下で閲覧していることになる。

これでは、html5はとてもじゃないが、である。

一方CSS3に関して同じく上記サイトで調べてみると、モダンブラウザにはやや(?)劣るもののhtml5に比べればまだ実装が進んでいるようである。

で、問題はIE8以下。

こちらも、まあ当たり前であるがやはり壊滅的である。

CSSに関してはサポートしていないプロパティやセレクタは無視され、htmlに関してはサポートしていない要素や属性が無視される。

CSSはデザインを制御するものであるため、レイアウトが大きく崩れるようなコーディングをしない限り、ボックスの角丸やシャドウなどに関してモダンブラウザをターゲットにCSS3でコーディングしてみるのもアリ。

ただ、htmlに関しては文書構造のマークアップであるため、要素や属性が無視されるとそもそも文書構造としての体をなさないことになる。

従って、Windows XPではIE9にはバージョンアップできないため、サポート提供期間が終了する2014年4月辺りまでの2年間は、PC向けサイトでのhtml5+CSS3でのコーディングは控えたほうが良さそうである。

ただし、これは“シンプルにhtml5+CSS3のみでコーディングする場合”に限ってのハナシである。

海の遥か彼方には優秀な人間がたくさんいて、IE8以下などのオールドブラウザにもhtml5やCSS3を対応させるためのオープンソースライブラリを開発してくれている。

これらのライブラリを上手く組み合わせて使えば、IE8以下でもhtml5+CSS3でコーディングされたソースを“それなりに”レンダリングできるようになる。

html5shim
http://code.google.com/p/html5shim/

これはGoogleが配布している、IE8以下にhtml5の新要素をレンダリングさせるためJavaScriptライブラリである。

上記サイトから“html5shim.js”をダウンロードし、適当なディレクトリにアップロードしてからhead要素内に次のコードを記述すればよい。

<!--[if lt IE 9]>
<script src="path/to/html5shiv.js"></script>
<![endif]-->

<!--[if lt IE 9]>部分は“条件付コメント”と言い、Microsoft社の独自仕様である。

つまり、IE以外のブラウザでは<!-- ~ -->内がただのコメントとして扱われるので、無視される。

“lt”は“less than”の意味で“未満”を表す。(ちなみに、“gt”は“greater than”で“より上”、“lte”は“less than equal”で“以下”。htmlの文字実体参照で“<”が“&lt;”、“>”が“&gt;”である理由がようやく分かった。)

従ってこの場合はIE9未満、すなわちIE8以下においてのみ上記script要素が読み込まれることになる。

一方、CSS3のライブラリは様々あるが、ボックスの角丸やシャドウなどに関してのみの適用と考えた場合、ちょうど使いやすそうなものがあった。

CSS3 PIE
http://css3pie.com/

これは、border-radius(角丸)、box-shadow(影)、linear-gradient(グラデーション)のプロパティをIE上で表現させるためのライブラリで、いくつかのサイトでも“角丸がキレイ”などと好評を博している。

基本的には、上記サイトからPIE.htcをダウンロードして適当なディレクトリにアップロードしてから、適用したいセレクタに以下のようなプロパティを記述するだけでOK。

selecter {
  -webkit-border-radius: 10px; /* for Safari and Chrome */
  -moz-border-radius: 10px; /* for Firefox */
  border-radius: 10px;
  behavior: url(path/to/PIE.htc);
  position: relative;
}

ちなみに、border-radiusの前の“-xxx-”は“ベンダープレフィックス”と呼ばれる接頭辞である。

これは、現段階でCSS3は(html5も)“策定中”であり、最終的な“W3C勧告”としてリリースされておらず、各ブラウザは“先行実装”という形でサポートしているため、それが拡張機能であることを明示するためのものである。

現状では、各ブラウザごとの“ベンダープレフィックス”を付けたプロパティを記述しないとレンダリングされない。

しかし、将来的に正式に“W3C勧告”された場合は接頭辞は必要なくなる(はず)なので、併せて接頭辞のないW3Cの標準プロパティも記述しておく必要がある。

閑話休題。

話が大きく逸れたが、PIE.htc(中身はJavaScriptファイル)を利用する際にはいくつかの注意点がある。

CSS3PIE(PIE.htc)が効かないと思ったら
http://css.microrza.com/csstips/iecss_css3pie/

上記サイトをおおいに参考にさせていただいたが、主な点は次の3つ。

  • behaviorプロパティに記述するurlは、PIE.htcを使用しているファイルからPIE.htcへの相対パス、もしくはPIE.htc自身の絶対パスにする必要がある。
  • 背景色やボーダーが消えてしまうので、各セレクタに“position:relative;”を記述する必要がある。
  • サーバーによっては.htc(HTML Component)拡張子が認識できない恐れがあるため、.htaccessファイルに“AddType text/x-component .htc”と記述する必要がある。

これらをクリアすれば、IE8以下においてもボックスの角丸や陰付きを表現することができるようになるため、いちいち背景画像を用意しなくてもボックス周りの装飾が容易になる。

さて、次回は実際にPIE.htcを使ってみよう。