Les drapeaux nationaux – Sprite CSS

Une façon d’optimiser le chargement des images et des icones est l’utilisation de sprites CSS. Un sprite est une image composée de plusieurs plus petites images. Afin d’afficher une des images élémentaires, on affiche le sprite en background et on place la bonne image avec les propriétés CSS width et height pour dimensionner la div où sera affichée l’image, et la propriété background-position afin de placer la bonne (petite) image, composante du sprite.

Le sprite est chargé une fois pour toute au chargement de la page, les images plus petites sont affichées grâce au CSS qui dimensionne et positionne le sprite.

Sprite composé de 247 drapeaux.
Sprite contenant les drapeaux nationaux.

Une utilisation intéressante de ce principe est l’emploi de drapeaux des pays. On remplit une grande image avec tous les drapeaux dont on a besoin, et l’on définit deux classes CSS: l’une générale pour dimensionner l’espace recevant un drapeau, et l’autre ayant dans son nom le code du pays.

Pour les drapeaux, le site flag-sprites.com permet de générer une image png avec les drapeaux souhaités en différents formats (16 × 11, 16 × 16, 32 × 32, 16 × 10, 18 × 12, 25 × 15) et la feuille de style CSS associée avec la classe flag pour dimensionner l’icone et la classe flag-code pour positionner le sprite.

On peut insérer une image transparente de 1 × 1 pixel (blank.gif) et attribuer les classes flag et flag-code.

On peut aussi définir l’image transparente en base64, on n’a alors plus besoin du fichier blank.gif, ce qui donne:

On peut aussi, sans image transparente, définir un span en inline-block:

en ajoutant inline-block dans le CSS:

Et hop, de jolis drapeaux générés en sprite à utiliser sur son site.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *