Utilisation de base des sprites CSS

On utilise souvent Javascript pour précharger les images d’une page web ou bien gérer l’apparence de survol, d’état, de certains éléments.

Cependant, bien que cette approche soit très efficace et qu’elle ait longuement été documentée, elle présente quelques ennuis.

Parmi les principaux, on peut citer le fait que les designers ont besoins de représenter une interface au travers d’un grand nombre de fichiers et de ce fait, cela nécessite un grand nombre de requêtes client serveur. Nous allons voir qu’il existe une autre approche.

Depuis longtemps déjà, il est possible de coupler la souplesse de CSS à une ancienne technique utilisée lors du développement de logiciel. Cette technique consiste à regrouper l’ensemble de l’iconographie d’une interface et de ses états, sur une même et unique planche graphique. Il suffit alors d’indiquer la position d’un élément sur cette planche pour l’utiliser.

Ceci permet deux choses : D’une part, de regrouper l’ensemble des éléments visuels sur un même document et donc d’en simplifier la mise à jour, d’autre part, de ne réaliser qu’un seul chargement de fichiers, du fait qu’il n’y a qu’un seul document. Ce qui a pour effet de réduire grandement les échanges avec le serveur, et de supprimer les latences liées au préchargement. Cette technique se base sur l’utilisation de Sprites. Nous allons au cours de cette étape en décortiquer les principales mises en œuvre.

Présentation et définition

Commençons par une bonne vieille définition de la technique des Sprites. Les sprites sont apparus pour des besoins de composition d’interfaces graphiques lors de la réalisation d’applications. Puis ils ont été repris et améliorés, lors de la création de jeux vidéo en 2d. La technique consiste a représenter côte à côte, sur une grille bitmap, un ensemble d’éléments graphiques devant composer, et/ou compléter, le visuel d’une interface.

Il suffit alors par un jeu de code approprié de venir localiser dans cette grille la position de l’élément souhaité et de l’afficher sur l’interface, en prenant soin toutefois, de masquer le reste de la grille. Ceci à l’avantage de centraliser l’ensemble des éléments graphiques en un seul fichier et d’en accélérer les performances d’utilisation.

Coupler cette technique avec l’utilisation des CSS est un vrai jeu d’enfant, c’est un peu comme si nous jouions à la bataille navale. Il suffit simplement de paramétrer correctement la propriété background-image, en gérant la position background-position et les dimensions de l’élément receveur width, height… et ce… au pixel près.

Nous allons explorer quelques unes de ces possibilités au cours de cet article, afin de mieux en comprendre les mécaniques. Nous commencerons par la mise en place d’un menu visuel, puis nous irons un peu plus loin en décortiquant une carte image.

Préparation du contexte

Mise en place de la structure du menu

Afin d’illustrer la mise en pratique et l’utilisation des Sprites, prenons l’exemple simple d’un bandeau interactif. Un simple menu. Imaginons donc un menu intégralement visuel portant sur des bouquets de fleurs, qui propose un ensemble d’éléments présentant chacun un choix de composition florale différent.

Avant de commencer, vous pouvez télécharger l’ensemble des fichiers nécessaires. Comme pour toute utilisation de CSS, il faut au préalable définir la structure HTML. Une structure de liste non ordonnée sera très bien adaptée pour ce genre de contexte :

<ul class="bouquet">
  <li>Composé</li>
  <li>Rose</li>
  <li>Orange</li>
  <li>Rouge</li>
</ul>

Proposition du visuel

Maintenant côté visuel, il est facile d’imaginer la représentation de ce menu sous forme de bandeau en ligne. Certes, jusque là rien de bien nouveau, ni de bien complexe à mettre en place. En usant de quelques déclarations CSS et images d’arrières plan distinctes, le tour serait vite joué.

Poussons alors l’interactivité en se disant que par défaut, ces images pourraient être en niveaux de gris et que l’élément basculerait en mode couleur uniquement au moment du survol. Là encore, comme nous l’avons souligné précédemment, bien des techniques permettent ce genre de possibilité. Concentrons nous cette fois-ci sur l’emploi de sprites CSS.

Préparation de la feuille CSS de base

Lors de l’emploi de la technique des sprites CSS, il est préférable d’utiliser une feuille CSS de réinitialisation. Celle-ci veillera à ce que toute marge ou autre gestion d’affichage par défaut des navigateurs, soit bien contrôlée et ne vienne pas interférer sur le bon fonctionnement des sprites.

Dans le cadre de cet article, nous nous assurerons simplement de la réinitialisation des marges et des bordures. Nous prendrons soin d’inclure ces déclarations directement dans les règles appropriées. Dans un premier temps, délimitons les blocs d’éléments de liste en blocs horizontaux de 100 par 100 pixels.

Puis, et uniquement afin de visualiser les blocs d’éléments de liste, prenons soin d’ajouter une bordure temporaire pour les éléments <li>, afin de s’assurer que ceux-ci sont bien positionnés.

html, body, a, img, ol, ul, li {
    margin: 0;
    padding: 0;
    border: 0;
}
ul, ol {
  list-style:none;
}
.bouquet li{
    float:left;
    width:100px;
    height:100px;
    border:dotted 1px red;
}

Gestion du menu en utilisant des sprites CSS

Préparation des sprites

Revenons un instant sur le visuel de base et modifions le fichier d’origine, pour le préparer suivant la technique d’utilisation de sprites CSS. Ajoutons les éléments en niveaux de gris.

Utilisons le même et unique fichier : il représente dans sa partie haute les éléments bouquets de fleurs en niveaux de gris (images au repos) et dans la partie basse les éléments bouquets de fleurs en couleurs (images survolées).

Dans cet exemple, l’image totale sera composée de deux rangées de quatre éléments de 150 par 150 pixels, ce qui porte le fichier final à 600 pixels par 300 pixels. A noter que toute autre organisation aurait été acceptable. Quelque soit l’organisation retenue, ce type d’information, dimension totale et par élément, est importante pour la suite, car nous devrons l’utiliser afin de positionner correctement chaque sprite.

Adaptation du code HTML et de le feuille de style CSS

Dans le code HTML actuel, rien ne permet de distinguer un élément de liste d’un autre, nous allons donc devoir ajouter un signe distinctif à chacun d’entre eux. Histoire de simplifier l’approche, nous pouvons utiliser une banale classe pour chaque élément <li> : ciblons les respectivement, class= »a », class= »b », class= »c » et class= »d ».

De même, dans les CSS mises en place précédemment, nous avions bordé les éléments <li>, et nous leur avions donné une dimension de 100 par 100 pixels. Prenons soin de modifier et adapter ce code, afin de supprimer la bordure et augmenter la dimension des éléments <li> à 150 par 150 pixels.

Dernière chose : supprimer l’affichage du contenu textuel en l’indentant de quelques milliers de pixels. N’oublions pas que nous souhaitons obtenir un menu uniquement visuel.

.bouquet li{
    text-indent:-9999px;
    float:left;
    width:150px;
    height:150px;
}

Notre fichier graphique est composé de deux parties : la partie haute qui représente les éléments au repos et la partie basse qui représente les éléments survolés. Le fichier faisant 600 par 300 pixels, il suffit d’afficher la partie haute pour représenter le bandeau de la barre de menu au repos.

Une fois encore, la structure HTML actuelle et plus particulièrement l’élément <ul>, nous permet d’appliquer une règle CSS qui va pouvoir prendre en charge cela. Il suffit de préciser une image d’arrière plan et surtout de dimensionner l’élément.

.bouquet {
    width:600px;
    height:150px;
    background-image: url(menu-sprite-complet.jpg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

Gestion du survol

Nous allons faire abstraction de certains vieux navigateurs qui ne prennent pas en charge la pseudo classe : hover, directement appliquée des éléments autres que des liens. Restons focalisé sur la gestion des sprites CSS et testons uniquement dans des navigateurs contemporains (sinon il nous faudrait avoir recours à des balises <a>).

Ceci précisé, pour gérer l’action lors du survol, nous pouvons utiliser la même image d’arrière plan que celle du menu, mais cette fois-ci, en ciblant simplement l’élément survolé en le localisant sur la grille bitmap.

Nous pouvons centraliser la définition et la gestion de l’image d’arrière plan sur une règle générique. Puis, au cas par cas, en s’appuyant sur les classes ajoutées à l’étape précédente, nous viendrons positionner cet arrière plan, au pixel près, en fonction des besoins.

Attention, nous aurions tendance à positionner les éléments de survol en fonction de leur position de la carte, en clair : le premier à 0 pixel, le second à 150 pixels, le troisième à 300 pixels et ainsi de suite… seulement, du fait qu’il s’agit d’un décalage à appliquer, il faut que ces valeurs soient négatives. Donc, le premier élément est bien à 0 pixel, mais le second est à -150 pixels, le troisième à -300 pixels et ainsi de suite. Cette remarque s’applique également sur l’axe vertical.

Nous obtenons le code suivant :

.bouquet li:hover{
    background-image: url(menu-sprite-complet.jpg);
    background-repeat: no-repeat;
}
.bouquet li.a:hover{
  background-position: 0px -150px;
}
.bouquet li.b:hover{
  background-position: -150px -150px;
}
.bouquet li.c:hover{
  background-position: -300px -150px;
}
.bouquet li.d:hover{
  background-position: -450px -150px;
}

Utiliser les sprites pour gérer une interface utilisateur

Une fois ce principe assimilé, il est facile de comprendre les avantages et la souplesse d’utilisation d’une telle méthode. A présent, si l’on se rapproche de la composition de la grille utilisée par Google, on en comprend vite les tenants et aboutissants.

En regardant chaque icône qui la compose, on s’aperçoit que l’utilisation d’une telle grille ne se limite pas forcément à un simple menu, mais que, bien au contraire, l’intégralité de l’identité visuelle d’un site web peut y être représentée, y compris l’éventuelle représentation de ses diverses déclinaisons. Ceci simplifie grandement la maintenance, la mise à jour et l’évolution de la charte graphique.

Cependant, il peut être complexe de positionner chaque élément sur la grille, et de reporter cette position dans les propriétés de feuilles de styles CSS. Il existe diverses astuces, ou approches, qui permettent de simplifier cette tâche.

Par exemple, au risque d’alourdir un peu le fichier bitmap de la grille et contrairement à l’exemple de Google, il est possible de positionner chaque élément sur une grille plus importante, par exemple tous les 100 pixels et ce, sans essayer d’imbriquer au mieux chacun d’entre eux, ni de gagner de l’espace. Il existe également des solutions logicielles utilisables sous forme d’applications autonomes ou de tierces parties de logiciels graphiques.

En voici quelques unes :

• CSS Sprites Generator
• Générateur de sprites CSS
• Sprite Me
• Smart Sprites
• Sprite.cow
• CSS Sprites Maker – Fireworks
• Atlas CSS – Photoshop
• 8 CSS Sprites Generator Ressources

Carte image en utilisant les Sprites CSS

Il nous arrive de devoir réaliser des cartes images, qu’il s’agisse de la présentation d’un produit ou d’une équipe ou bien pour présenter une réelle carte géographique. Pour cela, nous pouvons avoir recours aux balises HTML qui prennent en compte les cartes images.

Seulement voilà, les moteurs de recherche, les lecteurs d’écran et certains types de lecteurs n’ont pas accès à la structure du document. Il s’agit là d’une élément quasi ‘multimédia’ à part entière et il n’est pas possible d’en extraire quelque donnée sémantique que ce soit.

Une fois encore, les Sprites vont pouvoir nous apporter une solution. Certes, le découpage des zones de survol ne sera pas aussi précis que ce que nous propose les carte images HTML. De même, les fichiers grille-images générés peuvent être plus lourds qu’avec une carte image. Et pour enfoncer le clou, il est certain que la mise en place elle-même peut s’avérer parfois complexe…

Mais bien que tous ces premiers points ne plaident pas en faveur de l’utilisation des sprites CSS… il faut garder à l’esprit que ceux-ci nous proposent une gestion plus sémantique de ce type de présentation et que nous gardons une pleine séparation structure / aperçu. Enfin, une fois la mécanique mise en place, autant les moteurs de recherche que les personnes pourvues d’un lecteur d’écran, pourront toujours accéder à l’information… et de manière transparente.

Présentation d’une carte régionale

La principale difficulté de mise en place pour une carte géographique, vient une fois encore de la gestion du positionnement des divers éléments et de leur report dans les déclarations CSS. De plus, pour l’exemple de cette carte, nous proposons deux niveaux de survol :

Un premier niveau qui active la zone de la carte survolée et un second qui se produit lorsqu’on survole la ville chef-lieu du département. Ceci nous permet de pousser un peu plus loin la gestion interactive des sprites CSS et d’ouvrir certaines portes. Avant d’aller plus loin, vous pouvez télécharger les fichiers nécessaires.

L’astuce s’appuie comme pour chaque usage des sprites CSS, sur le positionnement de l’image d’arrière-plan, mais également dans le redimensionnement de la seconde zone lors du survol. La détection s’effectue sur une zone de 10 par 10 pixels, mais une fois survolée, la zone se repositionne en 0,0 et prend les dimensions de sa zone parent. N’oublions pas que nous sommes en positionnement absolu.

Il faut porter une attention particulière à la propriété z-index, afin de s’assurer que l’élément le plus pertinent soit toujours au premier plan. Il est vrai que la zone réactive n’est pas très précise, mais pour ce genre d’interaction cela n’est pas du tout gênant, ou du moins ne devrait pas l’être.

A priori il n’est pas utile de détailler ligne à ligne le code produit, toutefois si besoin était, n’hésitez pas à nous le faire savoir. Pour l’instant, nous allons simplement nous attarder sur la gestion plus précise d’un département, puis dans un second temps, sur la gestion du point de ville (second survol) :

Détails du code nécessaire pour la gestion d’un département

.carte li.dep05 {
    left:139px;
    top:0;
    width:187px;
    height:146px;
    z-index:100;
}
.carte li.dep05:hover {
  background-position: -139px -330px;
}

Détails du code nécessaire pour la gestion d’un point ville

.carte li ul li{
    width:10px;
    height:10px;
    /* background-color:#FCC; */
}
.carte li.gap {
    left:69px;
    top:86px;
}
.carte li.gap:hover {
    top:0;
    left:0;
    width:187px;
    height:146px;
    background-position: -533px -330px;
}

Aller plus loin avec les sprites

Si vous êtes convaincu et nous le souhaitons, par cette méthode d’utilisation des CSS, nous vous invitons à en poursuivre l’exploration en vous rendant sur les excellents articles suivants, ou encore en tapant sprite CSS dans un moteur de recherche :

• CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
• CSS Sprites: Image Slicing’s Kiss of Death ou sa traduction sur le site de pompage.net