背景
フィルタ効果は以前から存在していましたが、SVG で動作するように設計されています。画像を合成してドキュメントにレンダリングする前に、画像に色の強さ、歪み、ぼかしなどの効果を適用するのに非常に強力です。
2009 年に Mozilla は、SVG だけでは不十分だと言いました。最終的に、Firefox 3.5 でフィルタをさらに進化させ、HTML コンテンツでの使用を許可しました。再生中の <video> に SVG フィルタを適用した、Paul Irish の時代を超えたデモをご覧ください。Firefox でのみ動作しますが、それでも最高です。
今日
2011 年の終わりに、Adobe をはじめとする企業がこの素晴らしい技術を CSS に導入するために懸命に取り組んでいました。具体的には、WebKit で実装が開始された CSS フィルタ効果 1.0 です。
CSS でフィルタを直接有効にすると、ほぼすべての DOM 要素でフィルタを利用できます。画像、<video>、<canvas> など。
将来
この仕様では、CSS シェーダーも定義されています。これにより、最終的には OpenGL シェーダー テクノロジーが CSS に導入される予定です。とても楽しみですね。ただし、システムの GPU を開く際には、セキュリティ上の考慮事項があります。そのため、WebKit では現時点では CSS フィルタ関数のみを実装しています。
サポート
Chrome 18.0.976.0（現在は Canary）、WebKit ナイトリー
Webkit ナイトリー版では、ハードウェア アクセラレーションされたコンテンツ（img { -webkit-transform: translateZ(0); } など）にフィルタを適用できます。Chrome では、アクセラレーションされたコンテンツのフィルタはまだ開発中です（--enable-accelerated-filters フラグを使用）。これには、デフォルトで高速化される <video> が含まれます。