Les matrices CSS

Comme promis un petit tutorial sur l'utilisation de "matrices" en CSS.

Je vous en avais déjà parlé dans un précédent billet, mais je n'avais malheureusement pas eu le temps de faire un tutorial... Le titre peut vous laisser dubitatif, il s'agit d'une technique déjà illustrée par Dave Shea dans l'article CSS Sprites: Image Slicing's Kiss of Death sur A List Apart. J'ai choisi de la baptiser "Matrice CSS" après la lecture du billet de Verle, je peux vous l'accorder il n'y a pas vraiment de nouveautés dans ces billets et dans ce tutorial, mais il s'agit d'une technique vraiment très intéressante.

Sommaire

• Prérequis
• Photoshop
• xHTML
• CSS
• Conclusion

Prérequis

Je suis très loin d'être un Webdesigner. Je passerai donc l'étape de la création graphique pure et dure. Pour une plus grande facilité utilisez le PSD du site dans sa version finale. En effet s'il doit y avoir des modifications dans l'interface elles seraient barbantes à effectuer. Il est important d'avoir les couches non fusionnées pour pouvoir en cacher certaines, et plus particulièrement les couches de textes.

Photoshop

Cette phase consiste à découper les éléments à intégrer avec Photoshop. Pour ce faire je vous conseille vivement l'utilisation des guides. Voici la marche à suivre (enfin, ma façon de procéder) :

Premièrement localiser un élément à intégrer, par exemple le menu "about" de Posthuman-Prod :

Voici le résultat que l'on veut obtenir.

Ensuite on découpe les éléments grâce aux guides. Si l'élément que vous découpez contient un ou des boutons, découpez-les également. Affichez la règle si elle n'est pas affichée, pour poser un guide il suffit de faire un glissé-déposé en partant de la règle jusqu'a la position souhaitée.

Voici le menu une fois découpé, c'est très rapide à faire, il suffit de bien zoomer.
(Cliquez sur l'image pour la voir en entier)

Normalement si le PSD est bien fait il y a également une couche pour l'état des liens en "hover". (Exigez-le à l'infographiste sinon, l'intégrateur ne doit pas avoir à créer quoi que ce soit).
(Cliquez sur l'image pour la voir en entier)

L'intérêt des matrices CSS ou sprites est de n'avoir qu'une seule image pour un menu, la taille du fichier est réduite (normalement), il y a moins de fichiers (temps de chargement légèrement plus court, n'ayant plus les entêtes HTTP à transmettre), et une plus grande simplicité d'utilisation et de maintenance (au début on peut penser l'inverse...). Photoshop active l'ancrage par défaut, c'est à dire que lorsque vous ferez une sélection en vous approchant d'un guide elle sera automatiquement attachée (ça peut être énervant parfois). Vérifiez que l'ancrage est activé dans "View -> Snap" puis "View -> Snap To -> Guides" (désolé, j'ai une version anglaise de Photoshop. Ayant commencé avec la version anglaise il m'est trop difficile de passer à une française...).

Maintenant que vous connaissez parfaitement l'utilisation des guides, il ne reste plus qu'a "créer" l'image qui servira comme menu :

Sélectionnez ce qui composera le menu, faite CTRL + SHIFT + C pour faire une copie de ce que vous voyez ("merged copy", une copie comme si on avait aplati toute les couches). Faites bien attention à avoir sélectionné le bon set dans l'arborescence des couches, ou une couche qui englobe toute les couches utilisés pour le menu.
(Cliquez sur l'image pour la voir en entier)

CTRL + N pour créer une nouvelle image. La taille de l'image correspond à ce que vous venez de sélectionner normalement, doublez la hauteur. Ici 20px au lieu de 10.

On colle (CTRL + V), puis on place la couche en haut de la nouvelle image (V puis les flèches haut et bas).
(Cliquez sur l'image pour la voir en entier)

Retournez sur le PSD, ne désélectionnez pas ! Changez juste de couche (ou cacher l'autre) pour afficher l'état "over", CTRL + SHIFT + C, retournez sur l'autre image (CTRL + TAB) puis collez. Positionnez la couche en bas de la nouvelle image (V puis les flèches haut et bas).
(Cliquez sur l'image pour la voir en entier)

Vous avez la nouvelle image qui correspond à votre menu, il ne reste plus qu'a sauvegarder. J'utilise la fonction "save for the web" (CTRL + SHIFT + ALT + S... Pas très pratique comme raccourcis), qui lance ImageReady. Je préfère l'utiliser car elle permet de visualiser plus clairement l'image finale qu'une simple sauvegarde qui demande juste le format et les options relatives ensuite. Le menu est composé de textes, il est donc déconseillé de l'enregistrer en JPEG, essayez en GIF ou en PNG (meilleure qualité, mais fichier souvent plus lourd. Le PNG 24 permet plusieurs canaux de transparence mais comme vous devez le savoir... IE ne le gère pas, donc à éviter). Une fois le format choisi réglez les paramètres, il n'y en a pas énormément et au fur et à mesure vous apprendrez à vous en servir. Personnellement je compresse assez souvent en GIF selective (parfois en perceptual), no dither, pas de transparence, entrelacé et avec un nombre de couleur assez faible (pour choisir le nombre de couleur je switch entre les modes et je juge à l'oeil celui qui permet un meilleur compromis qualité/poids).

Voici les paramètres utilisés pour sauvegarder l'image du menu (Cliquez sur l'image pour la voir en plus grand).

On obtient un fichier de moins de 2ko qui va nous servir à faire 3 liens. La phase PhotoShop est presque terminée, laissez le programme de côté (laissez les guides, vous en aurez besoin pour la phase CSS).

xHTML

Un bon xHTML c'est d'abord une bonne sémantique, l'idéal est de faire le xHTML avant quoi que ce soit, pour obtenir un site parfaitement navigable sans style. Pour ce type de menu un <ul> n'est pas mal du tout :

<ul>
	<li>WEBDESIGN::<a href="#" title="More infos about KEVIN KERGOAT">KEVIN KERGOAT</a></li>
	<li>WEBMASTER::<a href="#" title="More infos about NICOLAS LE GALL">NICOLAS LE GALL</a></li>
	<li>HOSTING::<a href="#" title="Media Temple - Web Hosting Services">MEDIA TEMPLE</a></li>
</ul>

On obtient un menu simple à comprendre, et qui respecte l'esprit de l'image.

Les attributs "title" sont ici présents pour donner plus d'informations sur le lien. On renseigne l'utilisateur qu'en cliquant sur un lien il obtiendra des informations sur la personne (au lieu de lui laisser croire qu'on arrivera sur son site). Pour préparer la phase CSS il suffit de rajouter des id :

<ul id="about">
	<li id="about_webdesigner">WEBDESIGN::<a href="#" title="More infos about KEVIN KERGOAT">KEVIN KERGOAT</a></li>
	<li id="about_webmaster">WEBMASTER::<a href="#" title="More infos about NICOLAS LE GALL">NICOLAS LE GALL</a></li>
	<li id="about_hosting">HOSTING::<a href="#" title="Media Temple - Web Hosting Services">MEDIA TEMPLE</a></li>
</ul>

Cette phase est terminée, elle n'est pas vraiment longue mais lors de la conception d'une page complète il est important de le faire en une seule fois plutôt que par étape. Je vous recommande également de créer d'abord le xHTML simple sans id ou class, et ensuite de les appliquer d'un seul coup. Choisissez des noms simples et facilement mémorisable, pour ne pas avoir à faire des copier-coller entre le xHTML et le CSS.

CSS

Il ne reste plus qu'a faire le CSS, vous allez voir que c'est très simple. Je ne vais pas expliquer comment faire les 3 liens, un seul suffira. Commençons par le menu dans sa globalité :

#about {
	background: url("images/about_links.gif") no-repeat;	/* L'image du menu que l'on vient de créer avec PhotoShop */
	width: 465px;						/* La largeur de l'image */
	height: 10px;						/* La hauteur du menu (la hauteur de l'image divisée par 2) */
	position: absolute;					/* On définit le positionnement en absolue (par rapport à l'élément qui le contient) */
	top: 480px;						/* Le positionnement vertical, le haut de mon menu sera à 480px du haut de la boite qui le contient */
	left: 17px;						/* Le positionnement horizontal, la gauche de mon menu sera à 17px de la gauche de la boite qui le contient */
	font-size: 0;						/* On fixe la taille de la police à 0, corrige un bug sous IE */
	text-indent: -2000em;					/* On décale le texte pour qu'il n'apparaisse plus */
}

#about a {
	background: url("images/about_links.gif") no-repeat;	/* On réapplique l'image à chaque lien des <li> */
	height: 10px;						/* Tous les liens font la même taille que l'image */
	display: block;						/* L'affichage est en 'block', permet de définir une zone cliquable */
	position: absolute;					/* On définit le positionnement en absolue (par rapport à l'élément qui le contient) */
	top: 0;							/* Tous les liens sont collés au haut de l'image du menu */
	text-decoration: none;					/* On supprime le soulignage des liens */
}

#about li { display: inline; }					/* On place les <li> sur la même ligne, cela désactive également les puces */

Note : J'ai pris l'habitude de supprimer les marges intérieures et extérieures de tous les éléments, cela permet d'avoir moins de surprises...
Pour ce faire il suffit de rajouter : * { margin: 0; padding: 0;}

Normalement le menu doit s'afficher correctement et les polices doivent avoir disparu, mais vous remarquerez que l'on ne peut cliquer nulle part. C'est normal il faut définir les zones cliquables. Et c'est maintenant que vous aurez encore besoin de PhotoShop; il suffit d'effectuer des mesures et de les reporter dans le CSS Pour ce faire vous pouvez utilisez l'outil de mesure (I, SHIFT + I deux fois si c'est la pipette qui est sélectionnée) ou bien faire des sélections (j'ai pris l'habitude avec cette méthode, raccourcis : M). Pour obtenir la mesure utilisez le panneau d'informations (F8) et aidez vous des guides. Par exemple pour la distance entre le menu et la gauche du site :

En utilisant l'outil de mesure.

En utilisant l'outil de sélection.

La dernière étape consiste donc à spécifier la taille et la position des liens. En définissant une largeur et hauteur le lien devient automatiquement une zone cliquable (étant en display:block).

#about_webdesigner a {
	background-position: -69px 0;
	width: 84px;
	left: 69px;
}

#about_webdesigner a:hover { background-position: -69px -10px; }

Explications : Après mesure du texte "KEVIN KERGOAT" sous PhotoShop on obtient 84 x 10 pixels, il n'est pas utile de préciser un height: 10px ici car on l'a déjà fait dans la règle qui s'applique à tous les liens. La position du lien par rapport à l'image du menu est de 69 pixels sur la gauche. Le background-position permet de décaler le fond du lien. Sinon les background appliqués aux liens seraient tous calés en haut à gauche de l'image (pour plus d'informations sur background-position consultez la documentation media-box). Au survol le lien doit changer, il suffit donc de décaler le background au hover.

Un petit bonus :

#about_webmaster a {
	background-position: -233px 0;
	width: 92px;
	left: 233px;
}
#about_webmaster a:hover { background-position: -233px -10px; }

Conclusion

Voilà c'est terminé ! Au final cela fait un CSS peut-être un peu conséquent, mais relativement simple et rapide à créer. Il faut par contre une bonne organisation, sinon vous serez vite perdu. Je vous conseille de créer d'abord les règles pour les éléments les plus globaux (comme le <ul> ici, et ensuite les liens du <ul>).