monoの開発ブログ

IE9でも複雑なグラデーションを利用する

Microsoftはベンダープレフィックス付きでCSS3の先行実装を積極的に公開しない方針らしく、グラデーションなどの新しい機能を利用することができません。一応単純なグラデーションはIE独自のfilterで実現できるのですが、途中にcolor-stopを挟むような複雑なグラデーションは利用できません。

この記事では、IE9で複雑なグラデーションを実現する方法を紹介します。IE8以下ではどうやっても無理だと思うので諦めてください。

SVGを利用する

IE9はSVGの表示に対応しているので、background-imageにSVGを指定すればグラデーションを実現できます。これについては以下の記事で紹介されています。

しかし、この方法はSVGファイルを用意しておく必要があり非常に面倒です。そこで、SCSSとCompassを利用してSVGを自動生成するようにしてみます。

SCSSとCompass

SCSSはRailsでも利用されるようになったのでご存じの方も多いと思いますが、CSSを生成するための言語です。CSSにはない多数の機能を持っており、より簡潔な記述で目的を達成できるようになります。

今回利用するのはMixinという機能です。よく使う機能をMixinとして定義しておくことで、後からincludeして再利用できるようになります。Compassは多数のMixinを提供してくれるフレームワークで、includeするだけで簡単に複雑なCSSを生成できます。

SCSSやCompassの基本的な使い方は以下が参考になると思います。

利用例

SCSSとCompassでグラデーションを実現するためには、scssファイルの先頭でcompass/css3をimportし、background-imageをincludeします。 IE9向けにSVGを出力するためには、$experimental-support-for-svgにtrueをセットしておきます。

@import "compass/css3"

$experimental-support-for-svg: true;

#scss-gradient-box {
  @include background-image(linear-gradient(left, #f00, #ff0 20%, #0f0 40%, #0ff 60%, #00f 80%, #f0f));
}

これを変換すると、以下のようなCSSが生成されます。1つのincludeから非常に長いコードが出力されていることがわかると思います。SVGもばっちり生成されて埋めこまれていますね。

#scss-gradient-box {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjZmZmZjAwIi8+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiMwMGZmMDAiLz48c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iIzAwZmZmZiIvPjxzdG9wIG9mZnNldD0iODAlIiBzdG9wLWNvbG9yPSIjMDAwMGZmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmYwMGZmIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #ff0000), color-stop(20%, #ffff00), color-stop(40%, #00ff00), color-stop(60%, #00ffff), color-stop(80%, #0000ff), color-stop(100%, #ff00ff));
  background-image: -webkit-linear-gradient(left, #ff0000,#ffff00 20%,#00ff00 40%,#00ffff 60%,#0000ff 80%,#ff00ff);
  background-image: -moz-linear-gradient(left, #ff0000,#ffff00 20%,#00ff00 40%,#00ffff 60%,#0000ff 80%,#ff00ff);
  background-image: -o-linear-gradient(left, #ff0000,#ffff00 20%,#00ff00 40%,#00ffff 60%,#0000ff 80%,#ff00ff);
  background-image: -ms-linear-gradient(left, #ff0000,#ffff00 20%,#00ff00 40%,#00ffff 60%,#0000ff 80%,#ff00ff);
  background-image: linear-gradient(left, #ff0000,#ffff00 20%,#00ff00 40%,#00ffff 60%,#0000ff 80%,#ff00ff) } 

対応しているブラウザであれば以下に虹色のグラデーションが表示されるはずです。対応していないブラウザではグレーのボックスが出ます。

おわりに

SCSSとCompassを利用することで、手作業では困難なSVGを自動生成することができました。ついでにベンダープレフィックス付きのプロパティを生成してくれるのも地味に便利だったりするので、CSS3の新機能をガンガン使いたいという場合にはオススメです。