Utilisation des images dans les CSS

Les techniques modernes de publication Web reposent désormais sur la séparation du fond de la forme. Le fond est pris en charge par le langage HTML , et la forme par le langage CSS . Un des points parfois délicats est l'utilisation d'images qui font logiquement partie de la forme et non du fond, dans un but purement esthétique. Nous allons voir dans cet article plusieurs méthodes permettant d'intégrer ces images dans un document HTML uniquement par le biais des CSS.

Quand utiliser les CSS pour les images ?

Beaucoup d'images sont utilisées dans le but unique d'embellir les pages HTML. Ces images n'apportent rien au contenu, et en toute logique ne devrait pas être présentes dans la partie HTML de la page. De plus, si l'on souhaite changer l'apparence de la page, il est plus pratique de n'avoir que le fichier CSS à changer, plutôt que de devoir parcourir le ou les fichiers HTML à la recherche des images de présentation.

Mais attention : les images insérées par CSS sont complètement absentes du contenu, et donc inaccessibles pour les navigateurs non-graphiques. Elles ne peuvent pas être dotées d'attribut alt et ne peuvent donc pas avoir d'équivalent texte. Les images CSS ne doivent donc pas remplacer des images significatives, propres au contenu.

Les images de fond

La première méthode pour ajouter des images en utilisant les CSS est d'utiliser les images de fond. Outre l'utilisation classique qui consiste essentiellement à fournir un fond de page, les CSS permettent d'atteindre des effets plus qu'intéressants.

Remplacement d'un élément img isolé

En utilisant un élément div vide, on peut aisément remplacer une image purement décorative par une image de fond. Le principe consiste simplement à dimensionner le div à la même taille que l'image cible, et à lui appliquer l'image à remplacer comme image de fond. Un petit raffinement est de supprimer la répétition de l'image pour éviter des effets disgracieux sur les bords.

Compatibilités :

• MSIE Windows : ne pas oublier les différences de calcul de la taille des éléments entre le modèle de boîtes MSIE et le modèle standard lors de la détermination des dimensions du div. A ce sujet, voir Gérer les modèles de boîtes CSS standard et Microsoft ;

• MSIE Mac, Gecko (Mozilla & Netscape 6+), Opera 7.0, Konqueror 3.1.0 : support parfait.

Code HTML :

<div id="avatar">&nbsp;</div>

Feuille de style :

div#avatar {
  background-image: url(avatar-p.png);
  background-repeat: no-repeat;
  width: 80px;
  height: 103px;
  padding: 0;
}

Le résultat est similaire à l'illustration suivante :

Tester le résultat dans votre navigateur : exemple 1 (remplacement d'un élément img isolé).

Création d'une bordure stylée

L'objectif ici est de créer une bordure stylée. Pour cela, nous allons utiliser une image de fond que l'on va répéter uniquement dans une direction grâce à background-repeat. On va la positionner à l'aide de la propriété background-position, et on joue un peu sur les marges intérieures pour bien séparer la bordure du reste. Le tour est joué !

Malheureusement, pour mettre des bordures de chaque côté, il faut imbriquer plusieurs éléments div, ce qui n'est pas forcément idéal comme solution (mais c'est la seule en CSS2).

Compatibilités :

• MSIE Windows, MSIE Mac, Gecko (Mozilla & Netscape 6+), Opera 7.0, Konqueror 3.1.0 : support parfait.

Code HTML :

<div class="bordure-top">
  <div class="bordure-bottom">
    Texte d'exemple.
    </div>
</div>

Feuille de style :

div.bordure-top {
  padding-top: 15px;
  border-left: 1px solid;
  border-right: 1px solid;
  background-image: url(borderh.gif);
  background-position: top;
  background-repeat: repeat-x;
}
div.bordure-bottom {
  padding: 0px 7px 15px 7px;
  background-image: url(borderh.gif);
  background-position: bottom;
  background-repeat: repeat-x;
}

Le résultat est similaire à l'illustration suivante :

Tester le résultat dans votre navigateur : exemple 2 (création d'une bordure stylée).

Ajout d'une icône pour une classe (1)

Il arrive très souvent que l'on veuille ajouter une icône spécifique à une série d'éléments similaires. En particulier, on voit régulièrement sur certains sites des icônes jouxtant les liens pour signifier que le lien est extérieur au site. Il existe plusieurs moyens d'obtenir cet effet via les CSS, et nous allons étudier ici la solution utilisant les images de fond. L'avantage des CSS dans cette situation est énorme, il permet d'éliminer tous les éléments img de ce genre qui obscurcissent le code.

Compatibilités :

• MSIE Windows 5.0 : la propriété padding n'est pas appliquée aux éléments de type inline, ce qui fait que le texte peut recouvrir l'îcone ;

• MSIE Windows 5.5 - 6.0 : si l'élément est de type inline et qu'il est réparti sur plusieurs lignes, alors l'image est mal positionnée ;

• Konqueror 3.1.0 : l'icône se répète en fond ;

• MSIE Mac, Gecko (Mozilla & Netscape 6+), Opera 7.0 : support parfait.

Code HTML :

Texte d'exemple 
<a href="http://www.w3.org/" class="extern">Lien d'exemple</a> 
Texte d'exemple

Feuille de style :

a.extern {
  background-image: url(extern.png);
  background-repeat: no-repeat;
  background-position: center right;
  padding-right: 18px;
}

Le résultat est similaire à l'illustration suivante :

Tester le résultat dans votre navigateur : exemple 3 (ajout d'une icône pour une classe).

Le contenu généré

Le contenu généré est une technique permettant d'ajouter du contenu avant ou après un élément en utilisant les CSS (MSIE Windows ne supporte pas cette propriété).

Ajout d'une icône pour une classe (2)

C'est finalement l'utilisation la plus logique pour cette technique. Elle a l'avantage de garder la propriété background-image libre pour d'autres utilisations, mais comme je l'ai dit précédemment, elle n'est pas aussi universellement suportée que les images de fond. Le principe est relativement simple, il utilise les pseudo-éléments :before et :after. Ces pseudo-éléments sont justement conçus pour permettre l'ajout de contenu par CSS via la propriété content. Une petite remarque au passage, cette propriété n'est pas limitée à un seul contenu ; vous pouvez donc enchaîner ainsi du texte et des images.

Compatibilités :

• MSIE Windows, MSIE Mac : le contenu généré n'est pas supporté ;

• Konqueror 3.1.0 : la propriété content est supportée dans la plupart des cas simple, mais peut poser des problèmes si on veut utiliser plusieurs contenus générés dans la même balise ;

• Gecko (Mozilla & Netscape 6+), Opera 7.0 : support parfait.

Code HTML :

Texte d'exemple. 
<a href="http://www.w3.org/"
class="extern2">Lien d'exemple</a> 
Texte d'exemple

Feuille de style :

a.extern2:after {
  content: ' *' url(extern.png);
}

Le résultat est similaire à l'illustration suivante :

Tester le résultat dans votre navigateur : exemple 4 (ajout d'une icône pour une classe).

Les puces graphiques

Les puces des listes à puces peuvent aisément être remplacées par des images personnalisées. Mais en approfondissant un peu, on peut aller plus loin que l'utilisation ordinaire.

Personnalisation d'une puce particulière dans une liste à puces

Pour personnaliser un peu plus certains éléments d'une liste, il peut être souhaitable de changer la puce associée. Un cas d'utilisation courant est la mise en valeur d'un élément particulier de la liste, mais on peut imaginer aussi des cas de représentation arborescente plus complexes où chaque élément dispose de sa puce individualisée. Pour bien comprendre le mécanisme impliqué, il faut assimiler le fait qu'habituellement, la propriété list-style définissant l'aspect d'une puce est positionnée au niveau de la liste, et non au niveau de l'élément de la liste. Les éléments de la liste héritent alors de cette propriété. Cela permet de simplifier les feuilles de style, mais inutile de rentrer trop dans les détails, car la conclusion, c'est que la propriété list-style n'a de sens que pour les éléments de liste et non pour la liste elle même. Nous pouvons donc styler un élément de la liste en particulier.

Compatibilités :

• MSIE Windows, MSIE Mac, Gecko (Mozilla & Netscape 6+), Opera 7.0, Konqueror 3.1.0 : support parfait.

Code HTML :

<ul class="puces">
  <li>Article 1 bleu</li>
  <li>Article 2 bleu</li>
  <li id="puce-rouge">Article 3 rouge</li>
  <li>Article 4 bleu</li>
</ul>

Feuille de style :

ul.puces {
  list-style-image: url(dot.png);
}
li#puce-rouge {
  list-style-image: url(dot-rouge.png);
}

Le résultat est similaire à l'illustration suivante :

Tester le résultat dans votre navigateur : exemple 5 (personnalisation d'une puce particulière dans une liste à puces).

Ajout d'une puce à un titre

Pour embellir les titres d'un document, on peut souhaiter leur ajouter une puce. Pour cela nous pouvons bien sûr utiliser les techniques vues précédemment, mais il existe une autre méthode plus appropriée à ce genre d'élément. Sémantiquement, un titre est proche d'un élément de liste. Une fois rassemblés dans une table des matières, les titres deviennent d'ailleurs concrètement des éléments de liste. Nous allons donc donner aux titres l'aspect d'un élément de liste à puce, et nous pourrons ensuite le styler en conséquence. Pour changer l'aspect d'un élément, il faut utiliser la propriété display, et pour lui donner l'aspect d'un élément de liste à puce, il faut mettre la valeur list-item. Ensuite, il suffit de changer les propriétés classiques de style des listes pour obtenir l'effet désiré.

Compatibilités :

• MSIE Windows 5.0 - 5.5 : la propriété display: list-item n'est pas supportée ;

• MSIE Windows 6.0, MSIE Mac, Gecko (Mozilla & Netscape 6+), Opera 7.0, Konqueror 3.1.0 : support parfait.

Code HTML :

<h5 class="puces">Titre d'exemple</h5>
<p>Paragraphe d'exemple.</p>

Feuille de style :

h5.puces {
  display: list-item;
  list-style-image: url(dot.png);
  list-style-position: inside;
}

Le résultat est similaire à l'illustration suivante :

Tester le résultat dans votre navigateur : exemple 6 (ajout d'une puce à un titre).