-ms-filterは無意味

Microsoft Internet Explorerにはバージョン4.0で導入されたfilterプロパティがあります。IEバージョン8からCSS標準に準拠するために-ms-filterプロパティが導入されました。しかし導入経緯を理解せず、ただ単に記述しているサイトおよび解説サイトを散見するため、この記事を書きました。

まずfilterプロパティの書式は次のようになっています。

filter: progid:DXImageTransform.Microsoft.MotionBlur(strength=50), progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1), progid:DXImageTransform.Microsoft.Slide(Duration=2.500, slidestyle='HIDE');

filterプロパティを書かれる方は当然ながら書式を理解しているとは思いますが、改めてよく見るとその特殊性に気付くでしょうか？ progid: とコロンがあります。CSSではfont-size: 10px; のようにプロパティと値を挟む記号です。ピリオドもありますが、小数点ではありません。突然丸かっこも出現します。かっこの中や外にカンマもあります。シングルクォートで括られた文字列もあります。
このようにfilterプロパティはIE以外のCSS Parserからするととても特殊な書式で一つ間違えればCSS全体を構文エラーに陥れかねない存在です。

そこでMicrosoft社は-ms-filter導入時に書式を変更しました。

-ms-filter: "progid:DXImageTransform.Microsoft.MotionBlur(strength=50), progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1), progid:DXImageTransform.Microsoft.Slide(Duration=2.500, slidestyle='HIDE')";

-ms-filterプロパティの値は''か""で括られた単一の文字列です。これであればIE以外のCSS Parserも混乱することはありません。あくまでこの仕様は-ms-filterに適用され、filterは従来通りです。

よくある間違いその１はこの仕様変更です。-ms-filterの値が単一文字列となっていることを知らずに、filterと同じ内容を繰り返しているサイトを見かけます。

filter: progid:DXImageTransform.Microsoft.MotionBlur(strength=50), progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1), progid:DXImageTransform.Microsoft.Slide(Duration=2.500, slidestyle='HIDE'); -ms-filter: progid:DXImageTransform.Microsoft.MotionBlur(strength=50), progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1), progid:DXImageTransform.Microsoft.Slide(Duration=2.500, slidestyle='HIDE');

これでは-ms-filterプロパティは構文エラーになりIE8以降は無視します。それでもうまく表示されるのはIE8以降もfilterプロパティを解釈しているからです。

よくある間違いその２はfilterと-ms-filterを並べて書くことです。

filter: progid:DXImageTransform.Microsoft.MotionBlur(strength=50), progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1), progid:DXImageTransform.Microsoft.Slide(Duration=2.500, slidestyle='HIDE'); -ms-filter: "progid:DXImageTransform.Microsoft.MotionBlur(strength=50), progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1), progid:DXImageTransform.Microsoft.Slide(Duration=2.500, slidestyle='HIDE')";

IE4以降はfilterプロパティのみを、IE8以降はfilterと-ms-filterの両方ともを認識します。では-ms-filterを書く意義は…ありませんね。

正しくはIE7以前にも対応したい場合はfilterだけを書き他のブラウザーは混乱しないことを祈ります。そしてIE8以降だけに対応したい場合は-ms-filterだけを書くべきだと私は考えています。