【レビュー】

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

CSS3 Wizardy is what you need to create the kind of Web site or Web app to really stand out.

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でサポートされていないためだと説明がある。

サンプルをFirefox 4 beta 6で閲覧したケース - 想定の表示

サンプルをChrome 7で閲覧したケース - 想定の表示

サンプルをIE9で閲覧したケース - CSS3グラデーションが効いていない

サンプルをIE8で閲覧したケース - ダイアログが起動しない

フレキシブルボックスモデルについては、従来のフローとポジション指定の組み合わせで回避できるという。しかし、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グラデーションをサポートしていない場合にこうしたテクニックを使うように切り分けておいた方が良いと説明している。

関連キーワード


転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

求人情報