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