Latar belakang
Efek filter sudah lama ada, tetapi dirancang agar dapat berfungsi di SVG. Efek ini sangat canggih dalam menerapkan efek, seperti intensitas warna, pemburaman, atau pemburaman pada gambar sebelum dikomposisikan dan dirender ke dalam dokumen.
Pada tahun 2009, Mozilla mengatakan SVG tidaklah cukup! Mereka akhirnya memanfaatkan filter satu langkah lebih jauh dan mengizinkannya untuk mengakses konten HTML di Firefox 3.5. Lihat demo SVG klasik Paul Irish tentang filter SVG dalam pemutaran <video>. Sekali lagi, hanya berfungsi di Firefox.
Hari ini
Kita lihat sekilas ke akhir tahun 2011 dan Adobe (serta yang lainnya) telah bekerja keras untuk menghadirkan teknologi luar biasa ini ke CSS. Secara khusus, saya merujuk pada CSS Filter Effects 1.0, yang sudah mulai diterapkan oleh WebKit.
Mengaktifkan filter secara langsung di CSS berarti hampir semua elemen DOM dapat memanfaatkannya! Gambar, <video>, <canvas>, apa saja.
Mendatang
Spesifikasi ini juga menentukan shader CSS, yang pada akhirnya akan menghadirkan teknologi shader OpenGL ke CSS. Itu SANGAT mengasyikkan! Namun, ada pertimbangan keamanan setiap kali Anda membuka GPU suatu sistem. Karena alasan ini, WebKit hanya menerapkan fungsi filter CSS untuk saat ini.
Dukungan
Chrome 18.0.976.0 (saat ini canary), Webkit Nightly
Di malam Webkit, filter dapat diterapkan ke konten dengan akselerasi hardware ( misalnya img { -webkit-transform: translateZ(0); } ). Di Chrome, filter pada konten yang diakselerasi masih dalam proses (gunakan tanda --enable-accelerated-filters). Ini mencakup <video>, yang dipercepat secara default.