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

2012.04.17 カテゴリ：スタイルシート プロパティ セレクタ CSS

 

CSS3を使うにあたっていつも問題になるのが Internet Explorer︵IE︶です。CSS3への対応が遅い上に、旧バージョンを使い続けているユーザーも結構いますので、CSS3を使うことに躊躇する人も多いのではないでしょうか？
ということでCSS3を使うにあたって知っておきたいIE対策を紹介します。
css3-ie678.png

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


まず、IEのバージョンごとでCSS3にどこまで対応しているか知っておく必要があります。個人的によく使っているのはこのサイトです。
CSS3 & HTML5 Browser Support
CSS3Properties-check.png
CSS3で追加されたプロパティ、セレクタについてブラウザごとの対応状況が分かりやすく表示されています。

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


セレクタはSelectivizr.jsだけあれば簡単に対応できます。﹁CSSセレクタって何？﹂﹁CSS3セレクタってどういうものがあるの？﹂って方は﹁保存版！CSS3セレクタの説明書﹂をご覧ください。
Selectivizr.js
selectivizr02.png
ここで提供されている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
CSS3 PIE
利用できるプロパティは以下のとおりで、ジェネレータもありますので簡単に使えます。

●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
csssandpaper2.png
外部ファイルを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

指定した要素を回転させることができます。
CSS
.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

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

CSS
.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

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

CSS
.opacity {
  opacity:0.7;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
【サンプル】

このように背景が半透明になります。
 数値は赤字の方が 0～1
 紫の方がIE用で 0～100　まで指定できます。
 ともに数値が小さいほど透明になります。
RGBAカラーモデルで色を指定する

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

CSS
.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()はグラデーションとして使うものです。

【サンプル】RGBAカラーモデルで背景を指定しています。

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にはアンダーラインのみ表示されます。
 ie-hack-css3.png
以下のようにバージョンごとでの振り分けもできます。
 
#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を使える日はまだまだ来ないと思います。
そんな現状ですので、今回紹介した方法を覚えておくのもいいかと思います。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry

Popular Entry

  • このエントリーをはてなブックマークに追加