CSS3を使うにあたって知っておきたいIE対策のまとめ

1. CSS3の対応状況を確認する

まず、IEのバージョンごとでCSS3にどこまで対応しているか知っておく必要があります。個人的によく使っているのはこのサイトです。

CSS3 & HTML5 Browser Support

CSS3で追加されたプロパティ、セレクタについてブラウザごとの対応状況が分かりやすく表示されています。

2. CSS3セレクタに対応する

セレクタはSelectivizr.jsだけあれば簡単に対応できます。「CSSセレクタって何？」「CSS3セレクタってどういうものがあるの？」って方は「保存版！CSS3セレクタの説明書」をご覧ください。

Selectivizr.js

ここで提供されているselectivizr.jsとJavaScriptライブラリを読み込むだけで、CSS3セレクタがIE6～8でも利用可能となります。コードも外部ファイルを読み込むだけですのでとてもシンプルです。

<script type="text/javascript" src="[JSライブラリ]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
<![endif]-->

ライブラリは以下のものが使え、ライブラリごとでセクレタの対応状況が違います。jQueryなんかは元々使っている人も多いと思います。そんな場合はselectivizr.jsを読み込むだけで大丈夫です。

• jQuery
• Dojo
• Prototype
• YUI
• MooTools
• DOMAssistant
• NWMatcher

では、ちょっとだけ注意点を説明します。

jsライブラリはGoogle Libraries APIでも大丈夫

私は普段Google Libraries APIのjQueryを使っています。こんな感じですね。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

もちろんこれでちゃんと動きます。

CSSは外部ファイルに記述する

Selectivizrは外部ファイルでCSSを指定しないと機能しません。head内に記述せず、外部ファイル内でCSSを記述しましょう。

ローカルでは動かない

サーバにアップしないと動きません。ローカルで試したけど動かないので諦めるなんてことがあったらもったいないですね。

セレクタに関してはSelectivizrの一択かなと個人的に思ってます。デメリットといえば1番普及しているjQueryを使ったときの対応状況がいまいちというところくらいです。

3. CSS3プロパティに対応する

次はCSS3プロパティですが、こちらはセレクタのように簡単にはいきません。対応する方法は色々あるものの、使えるプロパティが限られており、正確に再現できない場合もあります。

ここでは個人的に使えると思った2種類を紹介します。

CSS3 PIE: CSS3 decorations for IE

利用できるプロパティは以下のとおりで、ジェネレータもありますので簡単に使えます。

• border-radius
• box-shadow
• border-image
• multiple background images（背景に複数の画像を使う）
• linear-gradient as background image（背景のグラデーション）

show CSSにチェックを入れるとコードが表示されますが、PIE.htcをダウンロードするのと、アップした場所の指定だけ気をつけてください。

.sample {
  border-radius:10px;
  box-shadow:0px 2px 3px #666;
  border-image: url("img/sample.png") 15 round;
  behavior: url(PIE.htc);
}

border-radius、box-shadow、border-imageについては5行目にあるようにPIE.htcを読み込むだけで対応できます。ただ、box-shadowのinsetには対応していません。

背景関連だけは「-pie-」というベンダープレフィックス的なものを頭につける必要があります。グラデーションの場合はこんな感じになります。

.sample {
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
  background: -webkit-linear-gradient(#EEFF99, #66EE33);
  background: -moz-linear-gradient(#EEFF99, #66EE33);
  background: -ms-linear-gradient(#EEFF99, #66EE33);
  background: -o-linear-gradient(#EEFF99, #66EE33);
  background: linear-gradient(#EEFF99, #66EE33);
  -pie-background: linear-gradient(#EEFF99, #66EE33);
  behavior: url(PIE.htc);
}

背景に複数の画像を指定する場合はこんな感じです。

.sample {
  background: url(../img/bg.png) no-repeat center top, url(../img/bg2.png) repeat left top;
  -pie-background: url(../img/bg.png) no-repeat center top, url(../img/bg2.png) repeat left top;
  behavior: url(PIE.htc);

ということで、使用方法を簡単に説明しました。ファイルをアップして1行追加するだけなので手軽に使えます。

cssSandpaper – a CSS3 JavaScript Library

外部ファイルを4つ読み込む必要がありますが容量は軽いです。ページの下の方からダウンロードできます。

使えるプロパティも多いですし、精度も高いと思います。

• （-sand-）transform
• text-shadow
• （-sand-）box-shadow
• （-sand-）gradient
• opacity
• RGBA, HSL, HSLA カラー

transform、box-shadow、gradientは前にベンダーペレフィックス的な「-sand-」をつける必要があります。

text-shadowを使う場合は、textshadow.jsも読み込む必要があります。

ということでCSS3プロパティに対応する方法を2種類紹介しました。他にも方法はありますが、私の知る限りではこの二択です。

4. IE独自の仕様で対応する

IEには、CSS3っぽいIE独自のプロパティがありますので、CSS3対策としてそれなりに使えます。比較的実用的だと思うものを紹介します。

要素を回転させるtransform

指定した要素を回転させることができます。

.rotate {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

上からSafari、Chrome用、Firefox用、IE用となっています。上2つは回転する角度を、一番下は1から4の数字で90度ずつ回転します。

実際180度はあまり使いどころもないかもしれませんが、90度や270度はレイアウトのちょっとしたアクセントに使えそうです。

ボックスに影をつけるbox-shadow

指定するボックスに影をつけます。

.box-shadow {
  -moz-box-shadow: 2px 2px 3px #969696;
  -webkit-box-shadow: 2px 2px 3px #969696;
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
}

上からSafari、Chrome用、Firefox用、IE用となっています。

colorが影の色、directionが角度、strengthが幅となっています。

要素の透明度を指定するopacity

指定したところの透明度を指定することができます。

.opacity {
  opacity:0.7;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

RGBAカラーモデルで色を指定する

RGBAカラーモデルは、RGBカラーモデルのred・green・blueに、alphaが加わったもので、alphaは色の透明度を表します。

.rgba{
  background: rgba(51, 102, 153, 0.4);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#88336699', endColorstr='#88336699');

IEでは#AARRGGBBの最初のAAは00（透明）～ ff（不透明）の範囲で透明度を指定し、RRGGBBは色を指定します。本来gradient()はグラデーションとして使うものです。

5.IEは諦めて違うスタイルを適用する

IE対策は色々考え出されていますが、プロパティについてはいまいち決定的なものがありません。

この記事のタイトルに反することですが、いっそうのことIEは諦めてしまうのも1つの手段かなと思います。

#header a{
  color : #fff;
  font-size : 26px;
  font-weight : bold;
  text-decoration: none;
  color : #fff;
}
#header a:hover{
  text-shadow: 0px 0px 1px #ffffff,
      0px 0px 10px #FFD700,
      0px 0px 20px #FFD700,
      0px 0px 30px #FFD700,
      0px 0px 40px #FFD700;
  text-decoration: underline\9;
}

CSSハックですね。一番下の行はIE8以下にだけ適用されます。IE以外はピカッと光って、IEにはアンダーラインのみ表示されます。

以下のようにバージョンごとでの振り分けもできます。

#sample {
 color: red; /* 初期設定 */
 color : green\9; /* IE8以下のみに適応 */
 *color : yellow; /* IE7以下に適応 */
 _color : orange; /* IE6のみに適応 */
}

CSSハックはあまり好きじゃない人もいるかもしれませんが、いざというときのために覚えておけば使えると思います。

まとめ

ということでCSS3を使う際のIE対策についてまとめてみました。

ほんとに面倒なIEですが、Internet Explorer 6 Countdown によると、2012年3月現在でIE6のシェアは6.1%もあります。

10年以上前に出たIE6ですらこのシェアですので、何も気にせずCSS3を使える日はまだまだ来ないと思います。

そんな現状ですので、今回紹介した方法を覚えておくのもいいかと思います。