Innovablog, Le Web où l’Innovation ordinaire : design, ergonomie, interfaces riches, web 2.0, eCommerce,…

Les feuilles de style CSS (pour Cascading Style Sheets) sont un outil merveilleux pour tout créateur web. Leur puissance est (presque) sans limite, dans le respect des standards du moins. J’initie une petite série (vous me direz encore une série !) sur les feuilles de style et leurs fondamentaux.

Plus qu’une définition qui n’aurait pas de sens, je tenterais de vous proposer quelques bonnes astuces à connaître qui pourront :

• Vous faire gagner du temps dans le process de développement. La phase de mise en forme reste toujours la plus longue à finaliser dans un projet web.
• Vous rendre donc plus productif.
• Faire gagner du temps à vos visiteurs / vos utilisateurs.

Je vais débuter par une astuce de mise en forme : le rollover CSS. Il s’agit de faire réagir une zone en changeant son apparence au survol de la souris, le tout sans Javascript. Les CSS sont là pour nous aider. C’est une technique proposée depuis maintenant des années mais très largement sous-utilisée.

Exemple #1 : cahier des charges

Dans ce premier exemple nous allons réaliser un jeu de deux bouton, alignés verticalement, qui possèderont le même état au repos mais afficheront une image personnalisée au survol. Précisions : aucun Javascript ne devra être employé. Adieu le onMouseover et autres onBlur…

La base Html

Nous appliquerons le style sur une base html très simple : une liste.

<ul id="menu">

<li id=”item1″><a href=”#”></a></li>

<li id=”item2″><a href=”#”></a></li>

</ul>

• Par facilité, chaque élément de liste se voit affecté un identifiant Css (Id).
• Cet ID pourrait se générer de façon automatique si l’on génère par exemple le menu de façon dynamique, avec quelque chose du genre :

<li id="item<?php echo $i; ?>">

Le fichier image utilisé

L’originalité de cette méthode est que l’on va utiliser un unique fichier image pour gérer les deux états : normal et hover.

Voici le fichier utilisé :

• Dans cette image, le premier logo servira à l’affichage au repos,
• Les deux seconds permettront d’afficher les états hover.
• Chaque logo a une hauteur de 72 pixels, pour une image d’une hauteur totale de 216px.

La mise en forme CSS

ul#menu li a {

display:block;

width:266px;

height:72px;

background:url(’logo-innovablog-css-rollover.png’) no-repeat 0 0;

border:1px solid #003F64;

}

• Un display:block permet d’affecter une largeur à l’élément.
• Le background est appliqué à l’élément anchor.
• De plus il est appliqué dans cet exemple à un élément commun aux boutons, puique leur affichage au repos sre identique.

#item1 a:hover, #item2 a:hover {

border:1px solid #F97;

}

• On matérialise une bordure de couleur différente sur le hover.

#item1 a:hover {

background:url('logo-innovablog-css-rollover.png') no-repeat 0 -72px;

}

#item2 a:hover {

background:url(’logo-innovablog-css-rollover.png’) no-repeat 0 -144px;

}

• On applique à chaque élément de liste son comportement sur le survol.
• Pour aller “chercher” le bon logo, on se décale dans le fichier vers le bas par une marge négative de -72 pixels (la largeur d’un logo).
• De la même façon pour l’affichage du second élément, où dans ce cas c’est de 72 x 2 = 144 pixels dont on se décale du sommet.

Le résultat est à voir ici.

Exemple #2 : cahier des charges

Nous chercherons toujours à créer un jeu de boutons sans Javascript. La seule différence résidera dans le positionnement des boutons qui sera horizontal.

Fichier image utilisé

• Avec cette seconde image, nous allons réaliser deux boutons différents aussi bien au repos que sur le hover,
• Le premier bouton sera par exemple bleu et rose sur le hover, le second orange et vert sur le hover.
• Chaque bouton a la même dimension : 149 x 188 px.
• L’image a une largeur totale de 752 px.

La différence : la feuille de style

ul#menu2 {margin:0;padding:0;list-style-type:none;

position: relative;

}

• Notez ici la position relative du conteneur principal. C’est grâce à celà que l’on va pouvoir positionner horizontalement nos boutons.

ul#menu2 li {

margin:0 0 5px 0;

padding:0;

position: absolute;

top:0;

}

• Toujours pour notre positionnement horizontal, les éléments de liste auront un positionnement absolut.

#itemA {

left:0;

width:188px;

}

#itemB {

left:208px;

width:188px;

}

• Chaque item est positionné via l’attribut left, le top étant implicitement à 0.

ul#menu2 li a {

display:block;

width:188px;

height:149px;

}

• Le display:block permet comme dans l’exemple n°1 de dimensionner l’élément.

#itemA a {

background:url('logo-innovablog-crea-css-rollover.png') no-repeat 0 0;

}

#itemA a:hover {

background:url(’logo-innovablog-crea-css-rollover.png’) no-repeat -376px 0;

}

• Pour l’item A, qui sera bleu, la position top:0px left:0px est indiquée, le picto bleu étant le premier de l’image.
• Pour récupérer le hover qui sera rose et donc en troisième position, il faudra se décaler de 188 x 2 = 376 px.

#itemB a {

background:url('logo-innovablog-crea-css-rollover.png') no-repeat -188px 0;

}

#itemB a:hover {

background:url('logo-innovablog-crea-css-rollover.png') no-repeat -564px 0;

}

Le résultat est à voir ici.

Les avantages

• Accessibilité : on réussi donc via cette technique à se passer de Javascript. C’est le principal avantage. On y gagne donc directement en accessibilité.
• Simplicité : pourquoi faire en deux images ce que l’on peut faire en une ?
• Préchargement inutile : on évite ainsi tout mécanisme de mise en cache de l’image et de préchargement. C’est un appel Http d’économisé. Quand on sait comment ils sont gérés sous Internet Explorer, c’est un avantage indéniable.
• Economie en taille : une grande image sera générallement plus petite (en Ko) que deux petites (voire n petites).
• Moins de code : une seule image sans Javascript c’est aussi moins de code. Et donc moins de ressources utilisées.
• Mise à jour / maintenance simplifiées : un menu complexe ne nécessitera la modification que d’une image (idéalement le fichier PSD de base). Imaginez un menu complexe réalisé dans une technique standard qui pourrait embarquer une vingtaine d’images…

Pourquoi donc s’en passer ? Votre avis m’intéresse !

Ressources :

• Fast Rollovers Without Preload
• CSS Sprites: Image Slicing’s Kiss of Death