28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous.

On utilisait autrefois une technique empruntée aux jeux vidéo des années 90 et consistant à combiner les petites images en utilisant des sprites CSS.

http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html

Plutôt que de charger chaque petite icône, on chargeait une seule grosse image, car la grosse consommation de temps provenait essentiellement du temps de la connexion.

On obtenait une sorte de gros machin comme ça :
http://www.weblogcode.org/wp-content/uploads/2014/01/combined-image-of-css-sprite-in-weblogcode.png

Est-ce que cette technique est toujours d’actualité ?
Merci pour vos explications...
Modifié par Pyanepsion (13 Jul 2015 - 16:30)
Merci MatthieuR pour cette réponse.

Voilà alors mon interrogation. Cette technique est incompatible avec le HTTP/2 qui est arrivé en mars et avec son ancêtre le SPDY que voulait mettre en avant Google.

Dès lors, je me pose la question : est-il judicieux d’utiliser encore la technique des images combinées en estimant que le déploiement du HTTP/2 va prendre du temps, ou au contraire, le HTTP/2 étant si attrayant, il serait ridicule de perdre du temps ?

La technique des images combinées souffre en effet certaines critiques :
— L’image totale est nécessairement en 24 bits.
— L’organisation de cette image dépend de contraintes incompatibles : l’image la plus rapide à charger doit être un pavé alors que l’organisation la plus maintenable est soit horizontale soit verticale.
— Il est compliqué de modifier sans erreur une icône, voire de changer sa dimension.
— L’utilisation d’une seule image pour le thème amène des difficultés supplémentaires avec la gestion du tampon.

Or, tant que apache2 ne passera pas au HTTP/2, il sera impossible de l’activer sur un serveur privé.

"Wikipédia" a écrit :
Apache 2.4.12 supports HTTP/2 via the module mod_h2,[58] although appropriate patches must be applied to the source code of the server in order for it to support that module. The next release of Apache should already have these patches included. Old versions of SPDY were supported via the module mod_spdy,[59] however the development of the module has stopped.[60]


On peut toutefois constater que ce nouveau format est déjà très populaire, loin devant le très vieux ipV6 par exemple, ou plus surprenant devant l’utilisation de la compression ou du CSS.
http://w3techs.com/technologies/details/ce-http2/all/all

Alors, que faire ?
Il parrait que Compass dispose d'un très bon plugin pour gérer les sprites. On peut aussi encoder en base64 directement dans la feuille de style. Pour les icônes en monochrome on a aussi @font-face...
Modifié par Olivier C (16 Jul 2015 - 10:09)