27 Septembre 2002—Issue No. 151

Un article de A List Apart par Mark NewHouse.
Traduction en cours par Christophe Ducamp. Merci Mark. Seul le lien original fait référence.
Cette traduction à relire pourrait compléter la base d'articles du groupe pompage ?

DES JUILLET 1999 je pontifiais sur les listes de discussions à propos des vertus des feuilles de style. Quelques points ne changent jamais.

Ce qui a changé est ce que je pense des CSS et de la structure sous-tendue du (X)HTML auquelle elle est appliquée. Par exemple, je trouve que la plupart des pages sur le web contiennent un menu de liens dans une aire de navigation. Elles sont souvent codées comme une chaîne de liens, souvent séparées par des DIVs ou des paragraphes. Structurellement, aussi, ce sont des des listes de liens et elles devraient être codées comme telles.

Bien sûr la raison pour laquelle nous ne les codons pas en ce sens est que dans notre aire de navigation nous ne voulons pas de puces en face de chaque lien. Dans un article précédent je soulignais plusieurs techniques pour utiliser les CSS pour la mise en page d'une page Web. Une de ces techniques comprenait la manipulation d'une liste pour afficher horizontalement plutôt que verticalement.

Dans cet article, je démontrerai comment utiliser les CSS pour mieux prendre la main sur des listes peu maniables. Il est temps pour vous de réaliser comment les listes se comportent, au lieu de les laisser se promener sauvagement sur votre page Web.

Planter le décor

Pour les besoins de cet article, j'utilise des listes désordonnées. La même CSS peut être appliquée, avec des résultats similaires, aussi bien pour des listes ordonnées. A moins qu'autre chose ne soit défini, tous les exemples de cet article utilisent le code suivant pour les listes.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5 nous ferons un petit peu plus long afin qu'il puisse vivre (wrap)</li>
</ul>

Chaque liste est simplement placée à l'intérieur d'une DIV différente et la CSS est écrite de telle manière que le comportement de la liste soit déterminé par la DIV qui la contienne. Chaque DIV a une règle de base :

#base {
  border: 1px solid #000;
  margin: 2em;
  width: 10em;
  padding: 5px;
  }

Sans styles additionnels appliqués, la liste est présentée de cette façon dans la base DIV :

Positionnement

Quelquefois l'indentation par défaut d'une liste est trop importante pour la conception que vous travaillez. Mais modifier simplement la marge ou le remplissage de l'UL ne fonctionne pas sur tous les navigateurs. Pour rendre la liste fluide à gauche, c'est à dire si vous avez besoin de modifier à la fois la marge et le remplissage. C'est parce qu'Internet Explorer et Opéra ont opté de créer l'indentation avec la marge gauche, alors que Mozilla/Netscape utilisent le remplissage. Pour en savoir plus regardez l'article de DevEdge Consistent List Indentation.

Dans l'exemple suivant tant margin-left que le padding-left de l'UL dans la DIV sont réglés à zéro :

Notez que les marqueurs se placent à l'extérieur de la DIV. Si la boîte container était la BODY du document HTML, les marqueurs pourraient être présentés à l'extérieur de la fenêtre du navigateur, dans un effet éclipsé. Si vous voulez que les marqueurs s'alignent à l'intérieur de la DIV, mais le long de son côté gauche, réglez soit le padding gauche ou la marge à un em :

Marqueurs

Peut-être avez-vous eu un projet qui nécessitait une puce particulière. Si c'est le cas vous pourriez l'avoir balisé dans un tableau avec une colonne contenant les images GIF des puces alignées en haut et à droite, et l'autre colonne contenant le contenu de ce qui devrait être les LIs. Avec les CSS il est possible d'utiliser une image comme une puce. Si le navigateur ne supporte pas cette partie de CSS (ou ne fait pas d'images), la puce par défaut sera utilisée (ou vous pouvez spécifier une puce HTML différente si vous le désirez).

La règle ressemble à quelquechose comme cela :

ul {
  list-style-image: url(bullet.gif);
  }

Et le navigateur présente cela :

Pour spécifier une puce HTML à utiliser si le navigateur ne supporte pas cette partie de CSS, ajoutez :

  list-style-type: disc;

à votre règle. Selon l'image que vous choisissez vous pouvez trouver qu'elle ne s'aligne pas elle-même avec la liste des items de la manière dont vous l'attendiez. Dans ce cas vous pouvez choisir d'avoir l'image placée à l'intérieur du bloc de la liste d'items (plutôt qu'à l'extérieur du bloc). En ajoutant la commande suivante :

  list-style-position: inside;

to your rule will make that change. These three declarations can be combined into a single, shorthand declaration as illustrated in the following rule:

ul {
  list-style: disc url(bullet.gif) inside;
  }

qui est l'équivalent de :

ul {
  list-style-type: disc;
  list-style-image: url(bullet.gif);
  list-style-position: inside;
  }

Voilà ce à quoi ressemblera la page web :

Il peut arriver que vous ayez une liste, mais que vous ne vouliez pas de puces, ou que vous vouliez utiliser d'autre symboles à la place de la puce. A nouveau, la CSS fournit une solution idéale. Ajoutez simplement list-style: none; à votre règle et forcez les LIs à s'afficher avec des indentations suspendues. La règle ressemblera à quelque chose comme cela :

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 1em;
  text-indent: -1em;
  }

Soit le remplissage (padding) ou la marge a besoin d'être réglée à zéro, avec l'autre réglée à 1 em. Selon la “puce” que vous choisissez, vous pouvez avoir besoin de modifier cette valeur. Le text-indent négatif fait se déplacer la première ligne vers la gauche pour ce montant en créant une indentation suspendue.

Le HTML contiendra notre UL standard, mais avec n'importe quel caractère ou entité HTML que vous voulez utiliser à la place de la puce précédant le contenu de la liste d'items. Dans notre cas nous utiliserons », le double guillement angulaire : ».

Je devrais signaler que Netscape6/7/Mozilla (et d'autre navigateurs basés sur Gecko) et Opera peuvent créer du contenu généré via le pseudo-élément CSS2 :before. Nous pouvons tirer profit de cela pour générer automatiquement le caractère » (ou n'importe quel caractère) pour les puces. Cela nous permet d'isoler le contenu de l'UL. Si vous utilisez Opera ou un navigateur basé sur Gecko, la CSS suivante créera la même liste qu'au-dessus,mais en utilisant l'UL standard dans le contenu ajouté :

#custom-gen ul li:before {
  content: "\00BB \0020";
  }

La propriété content peut contenir des chaînes de caractères, des URIs et plus, y compris des caractères spéciaux. En utilisant ces caractères comme », il est nécessaire de les encoder comme leurs équivalents HEX. Pour le bon double-guillemet angulaire, nous utilisons \00BB (l'autre caractère, \0020, est un espace). Le résultat final (souvenez-vous, le caractère ne sera seulement visible que dans Opéra ou Mozilla/Netscape) :

Véritablement des listes imbriquées

Qui dit qu'une liste a besoin d'être alignée verticalement avec les puces accrochées à la partie gauche de chaque item ? Peut-être voulez-vous que la structure d'une liste ordonnée de liens, mais visuellement vous voulez qu'elle s'affiche dans la barre de navigation verticale de la page web. Ou peut-être voulez-vous que votre liste de liens s'aligne elle-même horizontalement le long du haut de votre page.

Cela s'applique à plus qu'une simple liste de liens. Il y a des fois où vous voudriez avoir besoin de lister plusieurs items dans le milieu d'un paragraphe, peut-être une liste des livres que vous voulez lire.Structurellement il y a du sens à coder cela en haut comme une liste, mais sur le plan de la présentation vous voudriez ne pas briser le flux du paragraphe. CSS à l'aide à nouveau !

Parce que que cette liste ne se séparera pas et (ndt : Since this list will not be separate and unto itself), je ne la mettrai pas à l'intérieur de la base DIV que les listes précédentes ont occupées. Dans ce cas le balisage sera un paragraphe, suivi par la même liste, suivi par un autre paragraphe.

Je vous entends pleurer,“INFECT ! Je pensais que vous alliez placer une liste à l'intérieur d'un paragraphe, pas entre deux paragraphes.”

Ce à quoi je réponds,“Bien, oui. Mais le (X)HTML ne permet pas à une liste d'apparaître à l'intérieur d'un paragraphe. De toutes les façons, avec l'aide de notre feuille de style, c'est comme cela que ça rendra dans la page web.”

Voilà à quoi ressemble les styles :

#inline-list {
  border: 1px solid #000;
  margin: 2em;
  width: 80%;
  padding: 5px;
  font-family: Verdana, sans-serif;
  }

#inline-list p {
  display: inline;
  }

#inline-list ul, #inline-list li {
  display: inline;
  margin: 0;
  padding: 0;
  color: #339;
  font-weight: bold;
  }

Le code consiste en un <div id="inline-list">. Cette DIV contient un paragraphe suivi par notre UL standard, et un paragraphe de relance. La liste UL a été modifiée de telle manière que chaque liste d'items ait une virgule après lui, avec le dernier item suivi par un point.

Les résultats sont en dessous (la liste apparaît en gras et bleu) :

Comme dans l'exemple au-dessus de liste avec puce personnalisée, nous pourrions utiliser les CSS pour générer automatiquement les virgules et points qui suivent chaque liste d'items. Si votre seul souci est la compatibilité avec les navigateurs Opéra et Gecko, voilà. Cette fois les styles ressemberaient à cela :

#inline-list-gen ul li:after {
  content: ", ";
  }
    
#inline-list-gen ul li.last:after {
  content: ". ";
  }

Ici nous utilisons le pseudo-élément :after pour ajouter une virgule après chaque liste d'item, et un point après une liste d'items avec class="last", résultant dans le suivant (souvenez-vous, ce sera seulement visible dans Opéra ou Mozilla/Netscape) :

Navigation

Comme je le mentionnais précédemment, les menus de liens qui apparaissent sur presque chaque site devraient vraiment être codés comme des listes, parce ce que c'est ce qu'ils sont. Depuis que nous avons pris l'habitude de ne pas vouloir appliquer le style de liste par défaut à ces liens, nous pouvons utiliser les CSS pour modifier la manière dont ils apparaissent sur la page. Comme nous le voyions au-dessus, les listes peuvent être forcées à s'afficher horizontalement (imbriquée)plutôt qu'empilées verticalement (le comportement par défaut). Quand vous faites cela la puce s'en va et vous avez beaucoup de choix sur la manière de séparer les items des listes.

Ces exemples de listes horizontales utiliseront tous la même base DIV avec les styles suivants :

#h-contain {
  padding: 5px;
  border: 1px solid #000;
  margin-bottom: 25px;
  }

Les deux prochains exemples utilisent la même UL comme dans les exemples précédents, mais sans la liste finale d'items avec son texte en bonus. Ils incluent également une classe additionnelle qui règle à part une des LIs dans la liste.

Bordures.

Un caractère "pipe",|, est souvent utilisé pour faire la différence entre les choix. C'est un caractère de séparation évident et il peut être émulé pour ajouter des bordures qui listent les items :

#pipe ul {
  margin-left: 0;
  padding-left: 0;
  display: inline;
  } 

#pipe ul li {
  margin-left: 0;
  padding: 3px 15px;
  border-left: 1px solid #000;
  list-style: none;
  display: inline;
  }
  
    
#pipe ul li.first {
  margin-left: 0;
  border-left: none;
  list-style: none;
  display: inline;
  }

Ici nous ajoutons class="first" à la première LI de telle manière qu'elle ne se finisse pas avec une bordure sur sa partie gauche.

Vous pouvez modifier ces styles pour créer un effet de navigation à tabulations :

#tabs ul {
  margin-left: 0;
  padding-left: 0;
  display: inline;
  } 

#tabs ul li {
  margin-left: 0;
  margin-bottom: 0;
  padding: 2px 15px 5px;
  border: 1px solid #000;
  list-style: none;
  display: inline;
  }
  
    
#tabs ul li.here {
  border-bottom: 1px solid #ffc;
  list-style: none;
  display: inline;
  }

Dans cet exemple ajouter class="here" à une LI crée une bordure de bas qui correspond à la couleur de fond pour indiquer que la tabulation renvoie à la page en cours.

Note: Cette technique fut offerte en premier par Randal Rust, et ensuite repompée par beaucoup sur la liste de discussion css-discuss.

Traces de Miettes de Pain

Une autre liste de liens qui a une orientation horizontale typique sur une page web est ce qui est devenu connu comme l'émiettage de pain. Les miettes de pains vous montrent où vous en êtes dans la hiérarchie d'un site, commençant avec la page d'accueil et vous emmenant jusqu'à la section en cours ou à la page. Si vous voulez vraiment rendre ce balisage significatif, vous voudriez créer une série de listes imbriquées, parce que chaque nouvelle section est une partie de la section la précédant :

<div id="bread">
<ul>
  <li class="first">Accueil
  <ul>
    <li>&#187; Produits
    <ul>
      <li>&#187; Ordinateurs
      <ul>
        <li>&#187; Logiciels</li>
      </ul></li>
    </ul></li>
  </ul></li>
</ul>
</div>

crée la suite :

• Accueil
  • » Produits
    • » Ordinateurs
      • » Logiciels

En ajoutant les règles suivantes à la feuille de style pour la page :

#bread {
  color: #ccc;
  background-color: #006;
  padding: 3px;
  margin-bottom: 25px;
  }

#bread ul {
  margin-left: 0;
  padding-left: 0;
  display: inline;
  border: none;
  } 

#bread ul li {
  margin-left: 0;
  padding-left: 2px;
  border: none;
  list-style: none;
  display: inline;
  }

crée cela :

A nouveau, nous pouvons générer le caractère » (ou n'importe quel autre caractère que vous pourriez vouloir utiliser comme séparateur) avec le pseudo-élément :before combiné avec une class="first" de telle manière que la première LI ne génère pas un séparateur :

#bread-gen ul li:before {
  content: "\0020 \0020 \0020 \00BB \0020";
  color: #ff9;
  }
  
#bread-gen ul li.first:before {
  content: " ";
  }

Et le résultat final :

Dans le Vrai Monde

J'aimerais terminer avec un vrai monde d'application de quelques-unes des techniques discutées ici. Nous utiliserons une UL standard contenant des liens pour créer un menu avec des effets de survol. Afin d'obtenir les effets de survol nous laisserons l'UL fournir la structure, et les styles d'ancre fourniront la plupart des effets visuels.

Ce menu de liens est véritablement une solution à une question posée par Michael Efford sur la liste de discussion css-discuss. Michael avait créé cet effet véritable en utilisant un tableau, des images et du JavaScript. Il demandait à la liste s'il pouvait être réalisé avec des CSS. Je pris le défi, et avec l'aide de plusieurs autres membres qui traquaient les effets particuliers de différents navigateurs, nous aboutissions à une feuille de style qui fonctionne sur ce code :

<div id="button">
<ul>
  <li><a href="#">Accueil</a></li>
  <li><a href="#">Cameras Cachées</a></li>
  <li><a href="#">Caméras CCTV</a></li>
  <li><a href="#">Vols du Personnel</a></li>
  <li><a href="#">Trucs Utiles</a></li>
  <li><a href="#">F.A.Q</a></li>
  <li><a href="#">A Propos</a></li>
  <li><a href="#">Contactez-nous</a></li>
</ul>
</div>

Regardez la feuille style règle par règle, et j'expliquerai pourquoi chaque règle est construite de cette manière.

#button {
  width: 12em;
  border-right: 1px solid #000;
  padding: 0 0 1em 0;
  margin-bottom: 1em;
  font-family: 'Trebuchet MS', 'Lucida Grande',
    Verdana, Lucida, Geneva, Helvetica, 
    Arial, sans-serif;
  background-color: #90bade;
  color: #333;
  }

La première règle est pour le #button DIV. Elle définit l'espace que le menu occupera, et fournit un contexte pour le menu de telle manière que nous puissions définir la manière dont les listes et liens se comporteront dans la DIV. Je choisis de rendre le menu fluide, basé sur les préférences de taille de caractères du navigateur, aussi (presque tout le temps) toutes les unités sont en em. Cela inclut la largeur du menu. La bordure noire pleine sur la droite était fondée sur la conception originale de Michael. Le remplissage du bas est là pour étendre la DIV en bas au dessus du menu de liens de telle manière à ce que vous puissiez voir le fond de la DIV. A nouveau, cela reste conforme à la conception originale. La marge du bas est là pour séparer la DIV de ce qui suit. Les couleurs viennent de la conception originale.

  #button ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
    }
    
  #button li {
    border-bottom: 1px solid #90bade;
    margin: 0;
    }

Ensuite je définissais à quoi la liste ressemblera. Parce que tous les items devaient être des liens, et la fonctionnalité de "rollover" devait être construite à l'intérieur de la CSS pour les liens, j'ai ôté essentiellement tout stylisme des listes. J'ajoutais une bordure unique d'un pixel en bas de chaque lien assortie au #button DIV, pour servir de séparateur. Dans la conception originale, c'était une image.

  #button li a {
    display: block;
    padding: 5px 5px 5px 0.5em;
    border-left: 10px solid #1958b7;
    border-right: 10px solid #508fc4;
    background-color: #2175bc;
    color: #fff;
    text-decoration: none;
    width: 100%;
    }

  html>body #button li a {
    width: auto;
    }

  #button li a:hover {
    border-left: 10px solid #1c64d1;
    border-right: 10px solid #5ba3e0;
    background-color: #2586d7;
    color: #fff;
    }

Pour finir, je définissais les liens. La conception originale a des bordures de 10 pixels sur la droite et la gauche. Ces bordures, tout le long du fond, changent de couleur sur le "rollover". C'est une chose relativement simple à contrôler avec la pseudo classe :hover dans la CSS, aussi j'ai mis ce style dans les styles ancres.

Il y a un travail autour de cette partie de la feuille de style. Pour rendre les liens actifs pour la totalité de la largeur de la DIV, je les rends en display: block;. Cela fonctionne partout sauf pour IE/Windows. Si vous allouez au bloc une largeur explicite de 100%, alors IE/Windows joue tout le long. Mais faire cela crée des problèmes avec IE5/Mac et Netscape/Mozilla. Aussi j'ai utilisé le sélecteur descendant “>” pour redéfinir la largeur à auto. Parce que IE/Windows ne comprend pas les sélecteurs descendants, il ignore la règle. IE5/Mac, Opera et Netscape/Mozilla suivent la règle, et tout le monde est heureux.

La règle pour la pseudo-classe :hover crée les modifications de couleur sur les fonds et bordures quand les liens sont survolés par la souris.

Le style et le balisage de liste (environ 1K) remplaçait environ 5K de balisage JavaScript et TABLE (tableau), pour ne pas mentionner 8 autres Ko ou presque d'images pour les effets de "rollover". Cela rendait aussi le code plus lisible et plus facile à maintenir, parce que vous n'aviez plus besoin de créer de nouvelles images si un nom de lien changeait. Maintenant vous modifiez simplement un morceau de texte. Vous pouvez voir le résultat final en contexte sur le site web Asset Surveillance.

Truc de l'Iceberg

Croyez-le ou non, nous n'avons fait que gratter la surface de ce qui peut être pratiqué pour modifier des listes avec les feuilles de styles. Je ne me plaindrai pas que toutes les techniques présentées ici soient les plus pratiques des CSS que vous pourrez rencontrer, mais j'espère vraiment qu'elles vous amèneront à réfléchir comment les CSS pourront vous libérer afin de vous inviter à utiliser du code plus structuré.

Mark Newhouse blogue chez gnuhaus.com, travaille pour noao.edu et publie realworldstyle.com.