ブログ

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;」を指定するようにしています。

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。