Contexte
Les effets de filtre existent depuis un certain temps, mais ils ont été conçus pour fonctionner dans le format SVG. Ils sont incroyablement efficaces pour appliquer des effets tels que l'intensité des couleurs, la déformation ou le floutage à une image avant qu'elle ne soit composée et rendue dans le document.
Eh bien, en 2009, Mozilla a déclaré que le SVG ne suffisait pas ! Ils ont finalement pu pousser les filtres un peu plus loin et les autoriser à accéder au contenu HTML dans Firefox 3.5. Découvrez la démonstration intemporelle des filtres SVG de Paul Irish sur un <video> en train de jouer. Encore une fois, cela ne fonctionne que dans Firefox, mais les abeilles sont genoux.
Aujourd'hui
Flash jusqu'à la fin de l'année 2011, Adobe (et d'autres) a travaillé d'arrache-pied pour intégrer cette technologie exceptionnelle aux CSS. Il s'agit plus précisément de CSS Filter Effects 1.0, que WebKit a commencé à implémenter.
Lorsque vous activez les filtres directement dans le CSS, presque tous les éléments DOM peuvent en profiter. Des images, <video>, <canvas>, etc.
Date future
La spécification définit également les nuanceurs CSS, qui intégreront à terme la technologie de nuanceur OpenGL dans CSS. C'est vraiment TRÈS excitant ! Cependant, des considérations de sécurité sont à prendre en compte chaque fois que vous ouvrez le GPU d'un système. Pour cette raison, WebKit n'a actuellement implémenté que des fonctions de filtre CSS.
Assistance
Chrome 18.0.976.0 (actuellement Canary), Webkit (la nuit)
Dans les bibliothèques WebKit, des filtres peuvent être appliqués à du contenu accéléré par le matériel ( par exemple, img { -webkit-transform: translateZ(0); }). Dans Chrome, les filtres sur le contenu accéléré sont toujours en cours de développement (utilisez l'indicateur --enable-accelerated-filters). Cela inclut <video>, qui est accéléré par défaut.