Latar belakang
Efek filter sudah ada sejak lama, tetapi dirancang untuk berfungsi di SVG. Filter ini sangat canggih dalam menerapkan efek seperti intensitas warna, penyimpangan, atau pemburaman pada gambar sebelum digabungkan dan dirender ke dalam dokumen.
Nah, pada tahun 2009, Mozilla mengatakan bahwa SVG tidak cukup. Mereka akhirnya mengambil langkah lebih jauh dan mengizinkan filter pada konten HTML di Firefox 3.5. Lihat demo filter SVG yang tak lekang oleh waktu dari Paul Irish pada <video> yang sedang diputar. Sekali lagi, hanya berfungsi di Firefox, tetapi tetap keren.
Hari ini
Flash forward ke akhir tahun 2011 dan Adobe (serta lainnya) telah bekerja keras untuk menghadirkan teknologi luar biasa ini ke CSS. Secara khusus, saya merujuk pada Efek Filter CSS 1.0, yang telah mulai diterapkan oleh WebKit.
Mengaktifkan filter langsung di CSS berarti hampir semua elemen DOM dapat memanfaatkannya. Gambar, <video>, <canvas>, dan sebagainya.
Mendatang
Spesifikasi ini juga menentukan shader CSS, yang pada akhirnya akan menghadirkan teknologi shader OpenGL ke CSS. Sangat menarik! Namun, ada pertimbangan keamanan setiap kali Anda membuka GPU sistem. Oleh karena itu, WebKit hanya memiliki fungsi filter CSS yang diimplementasikan untuk saat ini.
Dukungan
Chrome 18.0.976.0 (saat ini canary), Webkit nightly
Di build malam Webkit, filter dapat diterapkan ke konten yang diakselerasi hardware ( misalnya, img { -webkit-transform: translateZ(0); } ). Di Chrome, filter pada konten yang diakselerasi masih dalam proses (gunakan tanda --enable-accelerated-filters). Hal ini mencakup <video>, yang dipercepat secara default.