Arka plan
Filtre efektleri bir süredir kullanılsa da SVG'de çalışacak şekilde tasarlanmıştır. Bu filtreler, bir resim birleştirilip dokümana oluşturulmadan önce resime renk yoğunluğu, bozulma veya bulanıklık gibi efektler uygulama konusunda inanılmaz derecede güçlüdür.
2009'da Mozilla, SVG'nin yeterli olmadığını söylemişti. Filtreleri bir adım daha ileri götürerek Firefox 3.5'te HTML içeriğinde filtrelere izin verdiler. Paul Irish'ın oynatılan bir <video>
üzerinde SVG filtrelerini gösteren zamansız demo'suna göz atın. Yine de yalnızca Firefox'ta çalışır ancak yine de çok kullanışlıdır.
Bugün
2011'in sonuna geldiğimizde Adobe (ve diğer şirketler) bu muhteşem teknolojiyi CSS'ye getirmek için yoğun bir şekilde çalışıyordu. Daha açık belirtmek gerekirse, WebKit'in uygulamaya başladığı CSS Filtre Efektleri 1.0'dan bahsediyoruz.
Filtreleri doğrudan CSS'de etkinleştirmek, neredeyse tüm DOM öğelerinin bunlardan yararlanabileceği anlamına gelir. Resimler, <video>
, <canvas>
, aklınıza ne gelirse.

Gelecek
Spesifikasyonda, OpenGL gölgelendirici teknolojisini CSS'ye getirecek olan CSS gölgelendiricileri de tanımlanmaktadır. Bu çok heyecan verici. Ancak bir sistemin GPU'sunu her açtığınızda güvenlikle ilgili konular vardır. Bu nedenle, WebKit'te şu anda yalnızca CSS filtre işlevleri uygulanmıştır.
Destek
Chrome 18.0.976.0 (şu anda Canary), Webkit her gece
Webkit gece sürümlerinde, donanım hızlandırmalı içeriğe filtreler uygulanabilir ( ör. img { -webkit-transform: translateZ(0); }
). Chrome'da, hızlandırılmış içerikteki filtreler üzerinde hâlâ çalışma devam etmektedir (--enable-accelerated-filters
işaretçisini kullanın). Varsayılan olarak hızlandırılan <video>
de bu kapsamdadır.