IE8などの古いブラウザでは、CSS3で使用する角丸やグラデーションなどの一部プロパティが効かないものがあります。そのようなブラウザにもこれらのプロパティを有効にしてくれるプラグインに「CSS3 PIE」というものがあります。

CSS3 PIEの使い方

まずは、CSS3 PIEのサイトでファイルをダウンロードします。解凍するといろいろファイルがありますが、使うのは「PIE.js」だけです。

CSSを振り分ける

CSSを管理するためにブラウザごとにクラスを付与させます。

<!DOCTYPE html>
<!--[if IE 8]><html lang="ja" class="ie ie8"><![endif]-->
<!--[if gte IE 9]><html lang="ja" class="ie"><![endif]-->
<!--[if !(IE)]><html lang="ja"><![endif]-->

IE用にCSSとJavascriptを用意する

PIE.jsを動作させるには、この他にjsファイルを作る必要があります。あとはIEだけに読み込ませるCSSも準備しておきます。

<!--[if lte IE 9]>
<link rel="stylesheet" href="css/ie.css">
<script src="js/PIE.js"></script>
<script src="js/ie.js"></script>
<![endif]-->

あとは、PIE.jsを適用させたい要素をie.jsに記述していけば、角丸やシャドウといった表現を実装することができます。例えば、「.box」という要素に適用させたい場合は以下のように記述します。

$function() {
  if (window.PIE) {
    $(.box).each(function() {
      PIE.attach(this);
    });
  }
});

ただ、グラデーションを適用させるには、これ以外に「pieプレフィックス」というものを使ってCSSに記述しなければなりません。この「pieプレフィックス」に関しては、他のプレフィックスとは違い、プロパティに付与させます。また、これと一緒に「position」プロパティも指定する必要があります。

.ie .box {
  position: relative;
  -pie- background: linear-gradient(top, #eee 20%, #aaa 100%);
}

これで、グラデーションも適用させることができます。

その他の記事