HTML5 & CSS3のクロスブラウザー対応方法まとめ

この度、HTML5でWordPressのテーマを作成したわけですが、まだHTML5は勧告前の仕様であり、ブラウザーによっても実装状況はさまざまです。主要ブラウザーであるFirefox、Chrome、Safari、Operaについては、だいぶ実装が進んでいると言われていますが、Internet Explorer（特にIE8以下）については対応が大変遅れています。WebサイトをHTML5で作成した場合、現状ではどうしてもシェアの多いIEに対応させる必要があります。

ということで、今回私が行ったHTML5とCSS3のクロスブラウザー対応策をまとめておきます。

主要なブラウザーの対応状況は以下のサイトで確認することができます。

HTML5のIE9未満（IE8以下）への対応

IE（IE8以下）はHTML5で追加された新しい要素を理解できず、空の要素として扱ってしまいます。そこでIEにHTML5の要素を認識させるために、「HTML5.JS」という便利なJavaScriptのライブラリを使います。

HTML5.JSが中で何を行っているかは以下のサイトが参考になります。

[参考] HTML5.jsの中身を見てみよう

このHTML5.JSを<head>タグ内で読み込ませます。Google Codeでもhtml5shivとして公開されていますので、直接リンクして読み込ませても良いでしょう。その際に、IEの条件分岐コメントを使って、IE9未満のブラウザーの場合にのみHTML5.JSを読み込ませるようにします。

IEの条件分岐コメントについては、以下のサイトが参考になります。

[参考] Internet Explorerの条件分岐コメント | 謎解きウェブ | BLOG × WORLD ENDING

実際に<head>内に記載する内容は以下の通りとなります。

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

さらに、HTML5の要素をブロック要素としてCSSで定義します。

article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

CSS3のIE9未満（IE8以下）への対応

CSS3についても、IE（IE8以下）の対応が追いついていない状況です。そこで「PIE.htc」というスクリプトを使い、IE（IE8以下）でもCSS3のスタイルを適用するようにします。なお、現在PIE.htcが対応しているスタイルは以下のみとなります。

・border-radius
・box-shadow
・border-image
・multiple background images
・linear-gradient as background image

まずは、以下のサイトより「PIE.htc」ファイルをダウンロードし、FTPクライアントソフトなどを使ってサーバーにアップロードします。

次に、適用したいCSSスタイルの最後に以下を記載します。

behavior: url("PIE.htc");
position: relative;

※注意点として、PIE.htcへのパス指定は、CSSファイルからの相対パスではなく、CSSを読み込んでいるファイルからの相対パスとなります。うまくいかない場合は「絶対パス」もしくは「ルートパス」で指定するとよいでしょう。また、角丸やグラデーションなど特定のプロパティを指定する場合は、PIE.htcを読み込んでいるセレクタに「position:relative;」を指定する必要があります。

サーバーの設定によっては、.htcファイルが正しく動作しない場合があります。「.htaccess」ファイルに以下を追記し、サーバーへMIMEタイプと拡張子の登録を行います。

AddType text/x-component .htc

実装の例として、「角丸（boreder-radius）」、「影（box-shadow）」、「グラデーション（linear-gradient）」を指定する方法を挙げておきます。

◎ボックスに角丸を指定する場合 [ border-radius ]

#element {
  border: 1px solid #333;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  behavior: url("PIE.htc");
  position: relative;
}

◎ボックスに影を指定する場合 [ box-shadow ]

#element {
  -webkit-box-shadow: 0px 0px 18px #333;
  -moz-box-shadow: 0px 0px 18px #333;
  box-shadow: 0px 0px 18px #333;
  behavior: url("PIE.htc");
  position: relative;
}

◎グラデーションを指定する場合 [ linear-gradient ]

#element {
  background-color: #8b0;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#8b0), to(#9cc72c));
  background: -moz-linear-gradient(#8b0, #9cc72c);
  background: linear-gradient(#8b0, #9cc72c);
  -pie-background: linear-gradient(#8b0, #9cc72c);
  behavior: url("PIE.htc");
  position: relative;
}

CSS3のスタイルの指定方法については、以下のサイトが参考となります。

CSS3リファレンス（HTMLクイックリファレンス）

また、上記のCSS3 PIE: CSS3 decorations for IEのDEMOやCSS 3.0 MAKERを使用すると、CSSを自動生成してくれます。

opacityプロパティのIE9未満（IE8以下）への対応

昨今のHTML5で構築されるWebデザインにおいて、「透明」を使った表現はひとつのトレンドにもなりつつあります。CSS3の「opacity」プロパティは、要素の透明度を指定する際に使用されるプロパティです。

opacity－CSS3リファレンス（HTMLクイックリファレンス）

ただ残念なことに、opacityはIE8以下のブラウザーでは案の定対応していません。そこでIE6～IE8のブラウザー向けの対応策として、IEの独自拡張の「filter」プロパティを使用して以下のように指定します。

#element {
  background-color: #000;
  opacity: .7;　/* IE8以下以外のブラウザー向けの設定 */
  filter: alpha(opacity=70);　/* IE6、IE7向けの設定 */
  -ms-filter: "alpha(opacity=70)";　/* IE8向けの設定 */
}

透過PNGのIE6への対応

「透過PNG」はHTML5、CSS3とはまったく関係ない話ですが、クロスブラウザー対策としてよく話題に上がります。今回のテンプレートデザインにおいても透過PNGを使用したので、ついでに書いておきます。

IE6ではうまく透過PNGを表示することができません。そこで透過PNGを使用する場合は、以下の対策が必要となります。一番手っ取り早いのは、IE独自機能のAlphaImageLoader Filterを使う方法です。

AlphaImageLoader Filterの詳細については、以下のサイトが参考になります。

実装する場合は、まずIE6向けにCSSハックする必要があります。プロパティの前に「*html body」を記載し、新たにIE6向けにCSSを設定します。

*html body #element {
  …
}

上記を踏まえ、以下のように設定します。ここでは、IE6以外のブラウザー向けに指定した「background-image」を、IE6向けの設定において「background-image:none;」として非表示にしています。

/* IE6以外のブラウザー向けの設定 */
#element {
  background-image: url("透過PNG.png");
}

/* IE6向けの設定 */
*html body #element {
  background-image: none;
  filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(
    src = '透過PNG.png', sizingMethod = 'scale'
  );
}

以上、このブログでは下記の部分において上記すべての対策を施しています。（※レイアウトに関しては、IE6で若干くずれかかっているので現在調整中です。）

クロスブラウザー対応の方法として、上記以外にもさまざまな方法が存在しています。上記の方法は主にCSSの設定だけで対応できてしまうということで、大変お手軽で取っ付きやすい方法だと思っています。

ただ、本来であれば古いブラウザーを使っている方が、1日でも早くモダンブラウザーに切り替えてくれるのが理想ですけどね。

最後にIEのバージョンごとの表示を確認できるソフトウェアを紹介しておきます。Window版のみですが大変便利です。IEのアドオン版もあります。バリバリチェックしていきましょう！

カテゴリー: Web技術
CSS HTML5 UI/UX webデザイン WordPress

maesblog