ブログ

IE9でSVGグラデーションを使う場合の注意事項

Internet Explorer 9では、SVGが使えます。グラデーションが使えます。その場合に起きる問題の解決法について書いてみました。

SVGとfilterを併用するシーン

Internet Explorer 9では、SVGが使えます。つまり、SVGでグラデーションが使えます。
しかし、Internet Explorer 9はInternet Explorerシリーズの独自拡張であるfilterプロパティにも対応しています。

案件によっては、Internet Explorer 8以下にもグラデーションを使うために、filterプロパティもグラデーションを記載することも多いでしょう。では、この場合、どう記載するのでしょうか？

SVGは「background-image」を使います。しかし、それとは別にfilterプロパティも使います。

では、グラデーションを使っていた部分のCSS指定を、メディアクエリーを使って上書きする場合は、どうなるでしょうか？

通常だと、「background」の指定を上書きするだけだと思います。しかし、それだとfilterプロパティの指定は上書きされません。つまり、「background」でグラデーションの指定を消しても、filterプロパティの指定が残っています。

Internet Explorer 9ではSVGとfilterプロパティ、両方に対応していることははじめに記載しました。そのため、グラデーションはfilterプロパティの指定の部分の表示が残っているため、「background」でグラデーションの指定を消しても、Internet Explorer 9ではグラデーションが表示されたままと言うことになります。

SVGとfilterの問題を解消する

では、SVGとfilterの問題を解消することでおきる、Internet Explorer 9の問題をどうしたら解決できるのでしょうか？

ColorZillaの提供しているUltimate CSS Gradient Generatorは、CSSグラデーションを生成できるサービスです。
いつからか知りませんが、いつのまにかCSSグラデーションを生成するついでに、Internet Explorer 9のためにSVGグラデーションを生成できるようになっていました。

Ultimate CSS Gradient Generatorで「IE9 Support」のチェックボックスをクリックすると、非表示だったコンテンツが表示され、「IE9 Support」のオプションを使うときの注意事項が表示されます。

そこには、「Add a "gradient" class to all your elements that have a gradient, and add the following override to your HTML to complete the IE9 support:」と記載されています。つまり、「HTMLに以下の記載を追加してください」ということです。

その下のコードでは、条件分岐コメントでIE9のみを指定して、「filter:none;」を記載しろと記載されています。ここではHTMLでの記載例が書かれています。

結論から言うと、条件分岐コメントでInternet Explorer 9に「filter:none;」を指定するか、Internet Explorer 8以下のみにfilterプロパティを指定するように振り分けるか、どちらかの指定が必要です。

私の場合は、「320 and up」をカスタマイズしたテンプレートを使っています。このテンプレートのHTML要素の条件分岐コメント部分にInternet Explorer 9だけのコードを追加して、CSS側で「filter:none;」を指定するようにしています。