IE9でグラデーションを実現する方法

IE9はこれまでリリースされたIEシリーズのなかではもっとも標準規約に準拠したブラウザになる。特にCSS 2.1への準拠率はほかの主要ブラウザを抜いてトップレベルにあり、標準規約への準拠を進めるMicrosoftの姿勢をよく表している。しかし、Webデベロッパの多くはすでにCSS3で実現される機能に目を向けている。CSS3の機能を活用すると実現したいデザインを今までよりもスマートに表現できる。また、レンダリング処理をJavaScriptからCSSへ振り替えることで、ハードウェアレンダリングの機能を活用しつつ、JavaScriptを別の処理に利用することができるようになるなど、高速化テクニックとしても欠かせない状況になりつつある。

IE9もCSS3のいくつかの機能を実装しているが、CSS3で渇望されるいくつかの機能はまだ実装されていない。CSS Gradients for IE9 - CSS3 Wizardryの説明によれば、次のCSS3の機能がIE9ではまだ提供されていないことになる。

• フレキシブルボックスモデル
• 影付きテキスト
• 画像ボーダー
• CSSトランジッション
• 2D/3Dトランスフォーム
• CSSキーフレームアニメーション

CSS Gradients for IE9では最近Android、Blackberry 6、iOS、WebOS向けのモバイルWeb開発を手がけており、その際に考案したテクニックを紹介している。たとえばCSS Gradients for IE9に掲載されているポップアップサンプルを閲覧すると、FirefoxやChromeでは正しく表示されるものが、IE9やIE8では想定しているようにはレンダリングされない。これはフレキシブルボックスモデルがサポートされていないためと、CSS3グラデーションがIE9でサポートされていないためだと説明がある。

フレキシブルボックスモデルについては、従来のフローとポジション指定の組み合わせで回避できるという。しかし、CSS3グラデーションと同じ効果を得ることが難しいと説明がある。CSS Gradients for IE9ではこれを実現する方法として、CSS3グラデーションを適用したい要素に対してSVGグラデーションを背景画像として指定するというアイディアを考案。これでIE9においてもCSS3グラデーションと同じようなレンダリングを可能にしたと紹介している。たとえばCSS Gradients for IE9では次のCSSを紹介。CSS3グラデーションを使う内容になっている。

header {
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack:justify;
  -webkit-box-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-orient: horizontal;
  -moz-box-align: center;
  -moz-box-pack:justify;
  -moz-box-sizing: border-box;
  box-orient: horizontal;
  box-align: center;
  box-pack:justify;
  box-sizing: border-box;
  height: 45px;
  margin: 0;
  padding: 0 10px;
  background-image:
    -webkit-gradient(linear, left top, left bottom,
      from(#b2bbca),
      color-stop(0.25, #a7b0c3),
      color-stop(0.5, #909cb3),
      color-stop(0.5, #8593ac),
      color-stop(0.75, #7c8ba5),
      to(#73839f));
  background-image:
    -moz-linear-gradient(top,
      #b2bbca,
      #a7b0c3 25%,
      #909cb3 50%,
      #8593ac 50%,
      #7c8ba5 75%,
      #73839f);
  border-top: 1px solid #cdd5df;
  border-bottom: 1px solid #2d3642;
}

IE9に対してさらに追加で次のSVGファイルを用意。

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.0" width="100%"
   height="100%"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="myLinearGradient1"
                    x1="0%" y1="0%"
                    x2="0%" y2="100%"
                    spreadMethod="pad">
      <stop offset="0%"   stop-color="#b2bbca" stop-opacity="1"/>
      <stop offset="50%"   stop-color="#909cb3" stop-opacity="1"/>
      <stop offset="50%"   stop-color="#8593ac" stop-opacity="1"/>
      <stop offset="100%" stop-color="#73839f" stop-opacity="1"/>
    </linearGradient>
  </defs>
  <rect width="100%" height="100%"
     style="fill:url(#myLinearGradient1);" />
</svg>

IE9に対するCSSとしては次のように、上で用意したSVGファイルを背景画像として指定するように設定すればいいという。これでIE9ではCSS3グラデーションが機能しないかわりに、SVGグラデーションが同じ効果を実現することになる。

header {
  background-image: url("svg-gradient.svg");
}

この方法はOperaに対しても有効で、まだCSS3グラデーションをサポートしていないOperaに対してIE9と同様の効果を期待できるという。その場合、機能検出のコードをいれてCSS3グラデーションをサポートしていない場合にこうしたテクニックを使うように切り分けておいた方が良いと説明している。