28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous.
Je viens de rencontrer un systeme d'image CSS qui me fait m'interroger sur son utilité.
Le principe consite en l'emploi d'une seule et unique image pour designer toute l'interface d'un site.
Au lieu d'avoir 20 petites images, on les place toutes dans le meme fichier et on joue sur le positionnement CSS dans chaque élément qui doit afficher une partie de l'image.

Au final le navigateur ne charge plus qu'une seule image ce qui allège le nombre de requete's vers le serveur.

Le systeme en place ici:

http://www.fitness-online.fr/css/img/amalgame-commun.gif
-http://www.fitness-online.fr

Suppression de la modération et rétablissement des liens après les échanges qui suivent...

Qu'en pensez vous?
Modifié par Felipe (17 Nov 2008 - 14:41)
Non, ça n'a rien à voire avec du spam.
C'est simplement que je n'avais jamais vu ce systeme.
Essayez d'afficher une image du second lien et vous verrez que ce site utilise cette méthode..
Administrateur
Bonjour,

cette technique se nomme CSS Sprites, une recherche te renverra vers le fameux article d'A List Apart ou sa traduction sur Pompage. 'fin j'imagine que tu connais déjà mais ce n'est peut-être pas le cas de tout le monde.

Ce fût une recommandation de la Team "Exceptional Performance" de Yahoo! lors de Paris-Web 2008 pour accélerer l'Internet et le temps de chargement des pages (et diminuer la charge serveur, etc). Donc oui c'est bien m'enfin surtout quand tu réalises un site web de A à Z, moins quand tu n'es chargé que de l'intégration statique et que tu renvoies les gabarits intégrés au fur et à mesure et que le site évolue régulièrement (s'il faut refaire l'image toutes les semaines, bonjour la maintenance). M'enfin j'ai le chic pour être dans le cas particulier où ça fonctionne moins bien Smiley ravi

Les recommandations de Yahoo! en 2 mots: YSlow (existe maintenant en extension Firefox, ai-je entendu) et Smush-It (Cygnus en a parlé sur le blog) (smush_it, smush.it, smushit, smush-it? Smiley confuse )

EDIT: pourrais-tu remettre STP le lien vers l'image et faire précéder le 1er lien d'un -http:// (un moins)? On a la gâchette facile sur le spam et il y a parfois des victimes innocentes Smiley lol
Modifié par Felipe (17 Nov 2008 - 14:32)
Ok fluozor, en fait le site affiche au moins 3 images, pas une seule... Mais c'est vrai que ce sont de grandes images.

Je vais retirer ma modération et remettre les liens pour que tu ais des réponses sur le procédé Smiley cligne
Effectivement Cette technique est connue depuis un bon moment et utilisée par le plus grand nombre pour les systemes de menu css, etc, mais dans le cas d'une interface complete je ne l'avais encore jamais rencontré.

En tout cas, merci pour cette réponse pertinente.
Gaffe tout de même à l'abus de CSS Sprites. S'il s'agit d'images portant une information, l'utilisation de backgrounds CSS n'est pas conseillée. Même pour gagner quelques hits sur le serveur.
De plus, il avait été question d'un CSS Sprite Generator pour générer les sprites automatiquement.

C'est très utile pour des icones par exemple, ou des boutons, pour la globalité d'une interface comme c'est le cas ici, c'est peut-être un peu extreme. Je pense notamment à la difficulté de mettre à jour le CSS qui va avec et au fait que cela force grandement à travailler avec des éléments de taille fixe.
Suis-je le seul à trouver ce concept (foutre toutes les images de présentation dans un seul et même fichier) un peu lourd ? Cela me semble inutile dans la plupart des cas (je ne prend pas en compte l'optimisation des images dans mon intervention) ... Smiley rolleyes

<edit>
Tymlis a écrit :
C'est très utile pour des icones par exemple, ou des boutons, pour la globalité d'une interface comme c'est le cas ici, c'est peut-être un peu extreme. Je pense notamment à la difficulté de mettre à jour le CSS qui va avec et au fait que cela force grandement à travailler avec des éléments de taille fixe.

+1. Smiley smile
</edit>
Modifié par yodaswii (17 Nov 2008 - 17:50)