Contexte
Les effets de filtre existent depuis un certain temps, mais ils ont été conçus pour fonctionner en SVG. Ils sont extrêmement efficaces pour appliquer des effets tels que l'intensité des couleurs, la distorsion ou le flou à une image avant qu'elle ne soit composée et affichée dans le document.
Déjà en 2009, Mozilla a déclaré que le format SVG n'était pas suffisant. Ils ont ensuite poussé les filtres encore plus loin et les ont autorisés sur le contenu HTML dans Firefox 3.5. Découvrez la démonstration intemporelle de Paul Irish sur les filtres SVG sur un <video> en cours de lecture. Encore une fois, cela ne fonctionne que dans Firefox, mais c'est toujours la meilleure option.
Aujourd'hui
À la fin de l'année 2011, Adobe (et d'autres) s'est efforcé d'intégrer cette technologie incroyable au CSS. Plus précisément, je fais référence aux effets de filtre CSS 1.0, que WebKit a commencé à implémenter.
En activant les filtres directement dans le CSS, vous pouvez les utiliser pour presque tous les éléments DOM. Images, <video>, <canvas>, etc.
Futur
La spécification définit également les shaders CSS, qui finiront par intégrer la technologie de nuanceur OpenGL au CSS. C'est très très excitant ! Toutefois, vous devez prendre en compte des considérations de sécurité chaque fois que vous ouvrez le GPU d'un système. Pour cette raison, WebKit ne propose pour le moment que des fonctions de filtre CSS.
Assistance
Chrome 18.0.976.0 (actuellement Canary), version nocturne de WebKit
Dans les versions nocturnes de Webkit, les filtres peuvent être appliqués au contenu accéléré matériellement ( par exemple, img { -webkit-transform: translateZ(0); }). Dans Chrome, les filtres sur le contenu accéléré sont encore en cours de développement (utilisez l'indicateur --enable-accelerated-filters). Cela inclut <video>, qui est accéléré par défaut.