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.
2 commentaires ↓
Je suis tout à fait d’accord avec toi. Il me semble que l’image toute simple est plus rapide à réaliser et moins gourmande sur les postes clients. Sachant que les sites sont de plus en plus consultés sur les supports mobiles, c’est la course aux performances.
Pour avoir testé en diverses occasions cette technique, j’en tire une conclusion simple : aucun intérêt !!
Même dans le cas d’un motif simple, si vous avez un dégradé radial Firefox va avoir du mal ( entre la version 4 et 16 environ, ça le faisait carrément freezer ! ). Puis la densité de la syntaxe et la nécessité des préfixes vendeurs rendent l’astuce relativement lourde.
De mon côté, dans tous les cas testés je me suis finalement tourné vers un png-8 bien compressé et encodé en base64 : j’économise toujours la requête, le poids est relativement proche ( plus lourd mais vraiment négligeable ), moins de consommation pour le rendu, et meilleure compatibilité.
Laisser un commentaire