CSS3 PIEでIE6~8対応

最近うまくサイトが見られないよ-、という声がありまして、どうやらOSがWindows XPでした。ということはIE6~8のどれかを使っている可能性があります。正直IEへの対応は面倒くさかったので、あんまり真剣に向き合っていなかったのですが(申し訳ないですm(_ _)m)、これを機に本腰を入れて対応してみました。

browser

まずはここ1ヶ月のユーザーの解析。4割がそれぞれIEとWebkit、残りがFirefoxそのほか。FirefoxとWebkitは早い段階からHTML5やCSS3に対応している、短いスパンでサポート期限を区切っているので、さほど考慮する必要がないと思います。

それに対してIEは6が未だに現役ですから、対応せざるを得ないか。IE9以下は何らかの対応をしないといけないのですが、その割合が3割・・・案外多かったorz

HTML5.js

まずは下準備として、HTML5から登場したタグに対してCSSを有効化できる「HTML5.js」を導入。IE9未満ではnavやheader、hooterをそもそもタグとして認識してくれないので、それの対策です。

HTMLのコメントに[if lt IE 9]を付加すると、IE9未満のブラウザでのみコメント部を実行するようになります。[if lt IE 9]でIE9未満、[if lte IE 9]でIE9以下、[if IE 9]でIE9というような感じ。

WordPressではデフォルトでインストールされているようなので、今回はスルー。

CSS3 PIE

CSS3で登場した角丸、ボックスシャドウ、グラデーションを、CSSコードをほぼそのままにIE6~9で再現できるのが、このCSS3 PIE。今回は下記サイトから1.0.0をダウンロードし、PIE.htcをアップロードします。

CSS3 PIE: CSS3 decorations for IE

あとは有効にしたいCSS要素末尾にPIE.htcへのリンクを記入します(10行目)。表示しているページからの相対パス、もしくは絶対パスでのリンクになります。また背景のグラデーションには-pie-のプレフィックスが必要です。

.box {
	box-shadow: 5px 5px 10px #000080;
	border-radius: 3px;
	background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: linear-gradient(top, #f4f4f4, #e6e6e6);
	-pie-background: linear-gradient(#f4f4f4, #e6e6e6);
	behavior: url("/PIE.htc");
}

これだけでIE6へも対応できるのは嬉しい!あとは上述のIEをバージョンごとに条件分岐する構文で、CSSをある程度振り替えれば、だいたい対応できます。

投稿日:
カテゴリー: ICT タグ:

作成者: きたけん

神戸出身&在住。大学では環境を学び、今はまちづくりに携わる。思い立ったらすぐに飛び出してしまう。