CSS3 Patterns Gallery présente un condensé de ce qu’il est maintenant possible de réaliser avec l’aide de CSS3 sur les arrières-plans ; le tout sans l’aide d’image supplémentaire.
En jouant avec les arrières-plans multiples, des dégradés, les couleurs semi-transparentes, la taille des motifs et avec l’aide de pas mal d’astuce, il semble possible de réaliser des choses où il était jusque là obligatoirement nécessaire de charger un fichier graphique.
C’est évidemment impressionnant et je suis emballé par ces nouvelles possibilités.
Mais passé ce premier effet de surprise, je me pose quelques questions :
Est-ce intéressant côté performances ? Cela fait toujours une requête de moins, mais quid du rendu de ces éléments complexes, n’est-ce pas trop gourmand en ressources (la page d’exemple est ainsi très lente au défilement) ?
N’est-ce pas pousser la technique dans ses derniers retranchements au point de complexifier à outrance la lecture et la maintenance de ces motifs. Ou est-ce moi qui n’ai pas bien l’habitude encore de lire ces propriétés CSS ?
Quels avantages y a t-il à s’aventurer sur ces techniques (je parle bien de ces exemples très avancés, pas juste des dégradés CSS) là où des alternatives simples fonctionnent déjà depuis longtemps ?
Je ne demande qu’à être convaincu : faites-vous plaisir.
5 commentaires ↓
Salut,
Bon, ben, c’est pas pour faire mon relou, hein, mais il existe un outil encore mieux que ça pour faire des motifs, et ça s’appelle SVG.
Je ne rentre pas dans les détails, mais en gros : plus performant, plus riche, plus souple, plus complet et plus facile à produire avec des outils d’authoring (Illustrator, Inkscape) qui ont largement fait leurs preuves.
Après, pour mixer CSS et SVG : background-image: url(mon-motif.svg) et roulez jeunesse (notez que tous les navigateurs, sans aucune exception, qui supportent CSS3 (background multiple, CSS gradients, etc.) supportent également SVG).
Voili, voilou
Le CSS est de plus en plus riche en possibilités, toujours simple et bien pensé à la conception je trouve.
Côté performance, j’enrichis de plus en plus mes réalisations avec des clauses CSS (CSS3 si possible) et je ressens pas de ralentissements notoires sur le chargement des pages. Quand la connexion est lente, un petit laps de temps est remarquable, mais il reste très court. De plus, utiliser le CSS pour remplacer les nombreuses (petites ou grandes) images permet d’économiser de la bande passante et les requêtes HTTP.
Côté maintenance et évolution, on peut avoir le besoin de décliner des chartes de couleurs en fonction du module, de l’environnement dans lequel on est. Pour ce faire, on était obligé de retrouver les fichiers PSD originaux, lancer PShop et enfin décliner les variantes. Si le gabarit est un peu trop grand, rebelote… Avec le CSS, il suffit de retoucher le code. Il est même possible d’utiliser des frameworks CSS (tels que SCSS ou Less framework) pour coder les clauses dynamiquement et/ou intelligement.
Si un intégrateur ou développeur reprend un site, le coût de maintenance est largement plus bas dans le cas d’un site codé en CSS qu’en images incrusté. Aussi CSS3 permet aujourd’hui de produire des effets (réflexions, transformation) bien sympathiques qu’il est plus long de faire avec un soft. Couplé avec du JS jQuery, les possibilités deviennent très grandes…
Quelques rendus CSS3 : http://mashable.com/2010/06/04/awesome-css3-techniques/
Pour ma part, je suis déjà convaincu
Hello Mehdi,
Note que je ne veut freiner en rien à l’adoption des techniques CSS3. Je pose simplement une question sur leurs bonnes utilisations ; avec ici un exemple précis, très/trop avancé.
Quand je lis le commentaire de Jérémie, je me dis que les techniques qui nous sont offertes sont nombreuses : autant choisir la meilleure en fonction de l’usage.
A noter que si le sujet c’est d’économiser des requêtes HTTP, l’usage du protocole data: est très efficace pour ça. De même, même s’il est vraie que CSS3 permet en général d’économiser des octets par rapport à l’usage d’image, il faut faire attention aux raccourcis hâtif et il faudra bien vérifier au cas par cas car dans certains cas, des images très bien optimisées peuvent être plus économes (Ok, je concède que peu de gens savent vraiment bien optimiser leurs images)
En suite, affirmer qu’il est plus facile de maintenir des dégradés CSS3 à la main plutôt que d’ouvrir un outil d’édition d’image, ça reste à prouver. En fait, comme le dit Mehdi, ça dépend beaucoup de qui assure la maintenance. En général, les designer sont plus à l’aise avec Photoshop ou Illustrator. Et même pour les intégrateurs, la syntaxe des dégradés CSS est très loin d’être simple à lire et à maitriser (ça fait sans doute partie des syntaxes les plus difficiles de CSS… Les Animations CSS ne sont pas loin du compte non-plus).
@Vincent, oui je comprends bien l’idée. C’est également ma démarche, qui se base sur mes connaissances seulement
@Jeremie, oui data permet aussi de le faire, mais moins pratique à utiliser je trouve. Les seuls cas où je trouve efficace l’intégration d’images / css arrivent lorsqu’il y a des images ou motifs complexes ou irréguliers (même si des stars du CSS ont réussi à designer les icones iPhone seulement en CSS (à voir avec chrome) ).
Par contre, je n’hésite pas à les faire sous PShop quand j’ai des contraintes de compatibilité. En effet, le CSS3 n’est malheureusement pas exploité par tous les navigateurs (cf. tableau général (IE : toujours à la traîne ), donc pour des questions d’ergonomie fonctionnelle, le CSS ne suffit pas. Je crois qu’il y a beaucoup moins de soucis pour les portables et tablettes.
Il est vrai comme tu dis que cela dépend de qui va reprendre le taf, mais il est assez facile de progresser avec le CSS comparé à d’autres technos, quand on voit les sources dispos sur le net, la possibilité d’attraper le CSS de jolis sites en regardant le codesource de la page, et des outils qui te pré-mâchent le travail (par exemple pour les dégradés)…
Laisser un commentaire