Mode de fusion, de Photoshop à CSS3 ?!

Les designers les utilisent quotidiennement, mais les intégrateurs les détestent lorsqu'ils exportent les calques de ces derniers : les modes de fusion de Photoshop existent en CSS3 !

Background-blend-mode

Les designers en ont rêvé, c’est bientôt utilisable en intégration, je vous parle aujourd’huides modes de fusion. Même si leur implémentation dans les navigateurs n’est pas fameuse, il y a fort à parier que la propriété CSS  » background-blend-mode  » va se démocratiser dans l’/les (quelques) année(s) à venir.

Au niveau W3C, le concept en est à l’état de « Candidate Recommandation« .

Compatibilité : C’est pas encore tout à fait ça, mais… !

background-blend-mode-caniuse

Alors, oui : c’est clairement prématuré pour l’utiliser en production ! En revanche, la compatibilité augmente de manière plutôt encourageante lorsque l’on tente de faire fusionner plusieurs éléments d’une<canvas> ensemble, y compris sur mobile : Android 4.4 et IOS 7. 

Canvas

Deuxième option envisageable pour utiliser les modes de fusion, canvas ne sauve pourtant pas tout : IE (même jusqu’à la version 11) n’implémente toujours pas cette fonctionnalité. Cela dit, le W3C la considère encore comme étant à l’état embryonnaire « Draft« .

canvas-blend-mode-caniuse

Conclusion

On peut être quasiment certain que cette fonctionnalité deviendra rapidemment un standard du CSS. En y repensant, on se rend bien compte que la tendance du W3C est à l’encouragement de la prise en charge des éléments graphiques, conçus sur Photoshop, en intégration. Ombre portée, bords arrondis et dégradés ont déjà fait leur petit effet à leur lancement et épargner des calvities précoces chez les intégrateurs.

En allant plus loin, on peut ainsi se demander si manipuler Photoshop ou du CSS3 ne reviendra pas, à terme, au même. Déjà en 2010, Francis Chouquet posait cette question, lors d’une conférence à Paris Web. Je vous laisse vous forger votre opinion sur l’hypothétique « fusion » des métiers du Webdesign et celui du développement front-end.


CSS3/Photoshop : quel avenir pour le métier de… par parisweb