CSS Sprites pour les nuls by Quentin

En cette période estival, j’essaye par tout les moyens mis à ma disposition d’attirer de plus en plus de personne sur le blog, hier vous étiez 2 004 personnes à me lire. Pour réaliser mes objectifs, il faut que les scriptes de QuentinZone soient optimisé; Je me suis donc attaqué aux CSS aujourd’hui, j’ai rencontré quelques difficultées. J’ai par conséquence décidé de vous faire partager mon expérience en terme de CSS Sprites.

Remerciement

Avent d’entrer dans le vif du sujet, je tient remercier Frédéric Pereira pour sont Article explicatif du CSS Sprites sur Weedle.

Le principe

Le principe du CSS Sprites est simple au lieu de charger vos image séparément; toutes les images sont unifié dans une seul image. Le fichier CSS décide quel zone de l’image doit apparaitre sur le site ou blog.

Générer les CSS Sprites

il est possible de créé sont image à partir de Photoshop puis de calculer manuellement les coordonné pour chaque sous image l’une après l’autre. Rassurez-vous c’est un travail très fastidieux qui peut être automatisé à l’aide de site tels que Générateur de Sprites CSS.

Le Générateur fait tout pour vous, de la génération de l’image aux calcule de tous les « background-position« . Il faut maintenant éditer le CSS de votre site ou de votre thème WordPress.

Intégration des CSS Sprites

C’est cette étape qui ma donné le plus de fils à retordre, dans tout les tutos que j’ai lu; il faut créer une class qui intègre l’image du CSS Sprite; puis il faut remplacer les images respective de chaque div par le fameux background-position; puis ajouter la class du départ dans chaque de vos page HTML et PHP.

J’ai élaboré une nouvelle technique, me méthode consiste à remplacer les lignes du type « background: url(‘http://images.quentinzone.fr/back.png’) » par ces deux lignes:

background: url(csg-4e31494386c85.png) no-repeat top left;

background-position: 0 0; width: 1px; height: 1px;

La première appelle l’image qui contient toutes les images.  la seconde affiche le morceau de l’image souhaité.

et c’est tous pas de modification dans vos page HTML et PHP: c’est le gros avantage de cette méthode. Cependant la même image est demandé plusieurs fois de suite dans le CSS; j’ignore si cela est nuisible votre site.

Pour tout question les commentaires sont là ! De plus, mon article est très synthétisé si certaine chose vous échappe sur le CSS sprites je vous conseil l’article de Fred.

 

 

2 commentaires pour “CSS Sprites pour les nuls by Quentin”

  • love

  • Intéressant, j’avais jamais entendu parler de ce « système » mais j’me demande si ça allège vraiment le poids de la page vu que l’image est demandée plusieurs fois.

Laisser un commentaire


Blogroll