CSS - Britoweb - CSS 2.1

Créer des colonnes de même hauteur en CSS

Victor Brito — Thu, 22 Jan 2009 17:26:00 +0100

Pour créer deux ou plusieurs colonnes de même hauteur, quelle que soit la longueur de leur contenu, en CSS, il existe plusieurs méthodes, dont celle des colonnes factices. Ici, nous présentons la méthode consistant à simuler le comportement d'une cellule de tableau.

Dans cet article, nous partons du bout de code HTML suivant :

<div id="conteneur">
<div id="bloc-1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam est at lorem. Ut eget orci. Sed tortor. Sed sapien metus, vulputate a, ornare quis, faucibus id, libero. Quisque elementum lobortis orci. Aliquam vehicula. Suspendisse vestibulum tempor enim. Sed eu tortor eget mauris gravida volutpat. Morbi ornare, mauris nec aliquet commodo, eros magna interdum odio, sed dictum eros est id nisl. Proin varius leo sit amet neque. Aliquam elementum est et urna. Sed a ante id nunc consequat vehicula.</p>
<p>Sed ligula augue, volutpat eget, vehicula sit amet, auctor non, velit. Nunc sodales blandit elit. Vestibulum et urna. Vivamus suscipit, ligula et fringilla tincidunt, turpis leo pellentesque erat, quis elementum est est id mauris. Pellentesque sem turpis, mattis sed, rhoncus quis, blandit vel, sem. Nulla sed nisi non lorem lobortis egestas. Suspendisse elit diam, iaculis a, dapibus in, vehicula a, dui. Nulla facilisi. Vivamus rutrum euismod nunc. Praesent non arcu in enim sagittis rhoncus.</p>
<p>Fusce lorem nisi, feugiat ut, rutrum sit amet, porttitor vel, est. Proin a nunc vel augue blandit consectetur. Donec non urna. Fusce vel dui. Duis quis ante. Duis non orci. Nullam vestibulum dolor. Quisque vulputate porta lorem. Vivamus hendrerit. Vivamus quam. Mauris lacinia. Proin hendrerit. In hac habitasse platea dictumst. Morbi leo odio, porta in, tincidunt eget, sagittis nec, est. Ut imperdiet, lacus a luctus laoreet, arcu erat viverra quam, eget elementum dolor ipsum vel lectus. Ut ac urna et urna feugiat dictum. Phasellus bibendum eros scelerisque nunc. Donec at sem id ante sagittis ultricies. Morbi ut velit.</p>
<p>Curabitur auctor commodo lectus. Phasellus augue justo, interdum vel, ultricies nec, venenatis sed, dolor. Donec et leo. Fusce leo velit, faucibus ut, aliquam quis, elementum in, nisl. Praesent nec nulla et ligula dapibus bibendum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus mollis. Aenean mauris nisi, imperdiet quis, placerat id, hendrerit in, purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum facilisis. Morbi vulputate odio non mi. Nulla facilisi.</p>
<p>Maecenas quis turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In dignissim mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi pellentesque velit a elit. Quisque volutpat dictum lorem. Morbi quis felis. Etiam odio. Etiam faucibus, diam ac laoreet semper, elit tortor accumsan magna, quis mollis orci tortor malesuada odio. Aliquam pharetra. Nunc laoreet ullamcorper tortor. In libero. Praesent non nunc eget sem lobortis ultricies.</p>
</div>
<div id="bloc-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam est at lorem. Ut eget orci. Sed tortor. Sed sapien metus, vulputate a, ornare quis, faucibus id, libero. Quisque elementum lobortis orci. Aliquam vehicula. Suspendisse vestibulum tempor enim. Sed eu tortor eget mauris gravida volutpat. Morbi ornare, mauris nec aliquet commodo, eros magna interdum odio, sed dictum eros est id nisl. Proin varius leo sit amet neque. Aliquam elementum est et urna. Sed a ante id nunc consequat vehicula.</p>
</div>
<div id="bloc-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam est at lorem. Ut eget orci. Sed tortor. Sed sapien metus, vulputate a, ornare quis, faucibus id, libero. Quisque elementum lobortis orci. Aliquam vehicula. Suspendisse vestibulum tempor enim. Sed eu tortor eget mauris gravida volutpat. Morbi ornare, mauris nec aliquet commodo, eros magna interdum odio, sed dictum eros est id nisl. Proin varius leo sit amet neque. Aliquam elementum est et urna. Sed a ante id nunc consequat vehicula.</p>
<p>Sed ligula augue, volutpat eget, vehicula sit amet, auctor non, velit. Nunc sodales blandit elit. Vestibulum et urna. Vivamus suscipit, ligula et fringilla tincidunt, turpis leo pellentesque erat, quis elementum est est id mauris. Pellentesque sem turpis, mattis sed, rhoncus quis, blandit vel, sem. Nulla sed nisi non lorem lobortis egestas. Suspendisse elit diam, iaculis a, dapibus in, vehicula a, dui. Nulla facilisi. Vivamus rutrum euismod nunc. Praesent non arcu in enim sagittis rhoncus.</p>
<p>Fusce lorem nisi, feugiat ut, rutrum sit amet, porttitor vel, est. Proin a nunc vel augue blandit consectetur. Donec non urna. Fusce vel dui. Duis quis ante. Duis non orci. Nullam vestibulum dolor. Quisque vulputate porta lorem. Vivamus hendrerit. Vivamus quam. Mauris lacinia. Proin hendrerit. In hac habitasse platea dictumst. Morbi leo odio, porta in, tincidunt eget, sagittis nec, est. Ut imperdiet, lacus a luctus laoreet, arcu erat viverra quam, eget elementum dolor ipsum vel lectus. Ut ac urna et urna feugiat dictum. Phasellus bibendum eros scelerisque nunc. Donec at sem id ante sagittis ultricies. Morbi ut velit.</p>
</div>
</div>

Nous lui appliquons d'ores et déjà une feuille de style, afin de fixer la largeur des trois éléments div adjacents et de leur attribuer chacun une couleur d'arrière-plan différente, afin que le résultat recherché soit bien visible.

#conteneur div {
  width: 200px;
}
#bloc-1 {
  background-color: yellow;
}
#bloc-2 {
  background-color: teal;
}
#bloc-3 {
  background-color: silver;
}

Soit dit en passant, rien ne vous empêche d'utiliser des unités relatives pour fixer la largeur des colonnes.

Des colonnes de même hauteur : un équivalent des cellules de tableau

La méthode la plus facile (et pas forcément la mieux respectueuse du balisage sémantique) pour créer des colonnes de même hauteur est de passer par un tableau en HTML. En effet, dans une même rangée, les cellules de tableau ont la même hauteur, quelle que soit la longueur de leur contenu, la hauteur adoptée étant, par défaut, celle nécessaire pour la cellule ayant le plus de contenu.

En CSS, il est tout à fait possible de faire qu'un élément qui ne soit pas un élément de tableau se comporte comme s'il en était un, grâce à la propriété display. Ainsi, pour qu'un élément qui n'est ni un th ni un td se comporte comme une cellule de tableau, il suffit de lui appliquer la propriété display avec la valeur table-cell. Ainsi, pour les trois div, nous appliquons la règle suivante :

#conteneur div {
  display: table-cell;
}

Et c'est tout ! En effet, les trois div adjacents s'affichent non seulement côte à côte, formant trois colonnes, mais ils ont la même hauteur, comme en témoignent leurs couleurs d'arrière-plan respectives, qui se répètent jusqu'à ce que, parmi les trois contenus, le plus long s'arrête. Il n'y a pas même besoin d'expliciter une hauteur, fût-elle fixe ou minimale. En somme, c'est une méthode très pratique, qui ne nécessite que peu de règles CSS et qui est testée avec succès sous Firefox 2 et 3, Opera, Safari, Konqueror et Internet Explorer 8.

Correctifs pour Internet Explorer 6 et 7

L'inconvénient est qu'Internet Explorer, jusqu'à la version 7, ne comprend pas display: table-cell. Pour cela, il faudra recourir à une recette plus classique, pour laquelle l'élément div conteneur (celui dont l'attribut id est "conteneur") est utile.

Nous créons une feuille de style ciblant les versions d'IE antérieures à la 8 (et appelée au moyen du commentaire conditionnel ). Dans cette feuille de style, nous recourons au positionnement flottant pour afficher les trois div adjacents côte à côte.

#conteneur div {
  float: left;
}

Étant donné que les éléments flottants débordent de leur élément conteneur et que tout élément suivant ledit conteneur risque d'épouser l'espace éventuellement laissé libre par les éléments flottants, nous allons créer un contexte de formatage, de façon à ce que les éléments flottants ne débordent pas de leur conteneur.

#conteneur {
  overflow: hidden;
}

Pour que ce contexte de formatage soit bien compris d'IE 6, il faut doter le conteneur d'un haslayout (pour en savoir plus sur ce concept propre à IE, supprimé à partir de la version 8, vous pouvez lire un article de Laurent Denis à ce sujet). À cette fin, une autre feuille de style supplémentaire (appelée au moyen du commentaire conditionnel ) comporte la règle CSS suivante :

#conteneur {
  height: 1%;
}

À présent que les colonnes s'affichent bien côte à côte et n'entraînent pas de bouleversement dans les éléments voisins, reste à faire en sorte qu'elles soient de même hauteur. Pour cela, nous reprenons la feuille de style qui cible les versions d'IE antérieures à la 8, à laquelle nous ajouterons la règle suivante : nous ajoutons une marge interne inférieure (padding-bottom) d'une très grande épaisseur, dont nous annulons l'effet par une marge externe inférieure (margin-bottom) négative de la même épaisseur.

#conteneur div {
  padding-bottom: 2000em;
  margin-bottom: -2000em;
}

J'ai choisi comme valeur 2000 em ; mais, rien ne vous empêche d'utiliser le pixel comme unité. En tout cas, le résultat recherché est au rendez-vous : les trois colonnes ont bel et bien la même hauteur. À noter que la technique de la double marge, interne positive et externe négative, ne marche que s'il y a un élément conteneur auquel on applique un contexte de formatage (en effet, sans l'overflow: hidden, le margin-bottom n'est pas appliqué).

Page de test

Vous pouvez consulter la page de test de création de colonnes de même hauteur en CSS pour avoir un aperçu du résultat sous votre navigateur.

Générer du contenu en CSS

Victor Brito — Sun, 18 Jan 2009 17:54:00 +0100

Il est tout à fait possible de générer du contenu en CSS, grâce aux pseudo-éléments :before et :after et à la propriété content.

Cette fonctionnalité n'est pas implémentée par Internet Explorer jusqu'à la version 7. Par conséquent, ce qui suit ne concerne que la version 8 d'IE, ainsi que Firefox, Opera, Safari, Konqueror et tout autre navigateur implémentant les pseudo-éléments :before et :after, ainsi que la propriété content.

Afficher la valeur d'un attribut HTML en CSS

Un exemple pratique est d'afficher la valeur d'un attribut HTML, comme celle de l'attribut hreflang de l'élément a, qui permet de signaler que le lien mène à une page dans une langue différente de celle utilisée par la page contenant le lien en question. Autrement dit, prenons le bout de code HTML suivant :

<p>Du texte comportant un lien vers une page en langue étrangère,
comme la <a href="http://www.w3.org" hreflang="en">page d'accueil du W3C</a>.</p>

Nous souhaitons afficher, après le texte du lien, que ce dernier mène vers une page en anglais. Pour cela, nous recourons au sélecteur d'attribut (afin de vérifier que l'élément a contient bel et bien un attribut hreflang), au pseudo-élément :after (pour générer du contenu après l'élément sélectionné) et, pour la valeur de la propriété content, à la fonction CSS attr(), qui retourne, sous forme de chaîne de caractères, la valeur de l'attribut mentionné dans son paramètre. Ce qui, en CSS, donne la règle suivante :

a[hreflang]:after {
  content: "\0000a0("attr(hreflang)")";
}

La fonction attr() est entourée, de part et d'autre, par une chaîne de caractères, délimitée par des guillemets (qui peuvent être simples ou doubles). La première chaîne de caractères comporte un code hexadécimal à six chiffres, précédé d'une barre oblique inverse : c'est une façon de coder les caractères spéciaux, comme l'espace insécable dans ce cas, selon la norme ISO 10646.

La règle ci-dessus ajoutera donc au texte du lien une espace insécable, suivie d'une parenthèse ouvrante, de la chaîne en (la valeur de l'attribut hreflang) et d'une parenthèse fermante, soit « (en) ».

Nous pourrions très bien ne pas vérifier que l'élément a possède l'attribut désiré. Mais, avec une règle CSS n'utilisant pas de sélecteur d'attribut, comme suit :

a:after {
  content: "\0000a0("attr(hreflang)")";
}

n'importe quel élément a sera concerné, y compris ceux qui sont dépourvus de l'attribut hreflang, auquel cas la fonction attr() retournera une chaîne vide, ce qui générera le contenu « ()».

Le contenu généré est parfaitement compris par Firefox, Opera, Safari, Konqueror et IE 8.

Générer une image en CSS

Il est également possible du contenu en CSS à partir d'une URL, comme une image, par exemple pour orner un lien externe d'une image évoquant ce type de lien.

<p>Du texte, avec un lien externe orné d'une image&nbsp;:
<a href="http://www.victor-brito.fr" rel="external">Victor Brito, intégrateur et développeur Web</a>.</p>

Nous affichons pour tous les éléments a ayant un attribut rel de valeur external une image suggérant qu'il s'agit d'un lien externe, ce qui, en CSS, donne le code suivant :

a[rel="external"]:after {
  content: url('lien-externe.png');
  margin-left: 1ex;
}

Soit dit en passant, une marge à gauche est ajoutée, afin d'éviter que l'image ne colle au texte du lien.

L'image est bel et bien affichée.

Générer du texte en CSS, sauf dans certains cas

Prenons un autre cas plus complexe. Nous avons une liste de tags et partons du bout de code HTML suivant :

<ul id="tags">
  <li>CSS</li>
  <li>génération de contenu</li>
  <li>pseudo-éléments</li>
</ul>

D'abord, nous alignons la présentation des différents tags. Nous en profitons également pour supprimer les puces et les marges par défaut des éléments li.

#tags {
  list-style: none;
}
#tags li {
  display: inline;
  padding: 0;
  margin: 0;
}

Nous souhaitons que la liste des tags soit identifiée en tant que telle. Pour cela, nous générons le texte « Tags : », en l'appliquant avant l'élément ul, au moyen du pseudo-élément :before.

#tags:before {
  content: "Tags\0000a0: ";
}

En outre, nous voulons bien distinguer les différents tags en intercalant un caractère imprimable (par exemple, un tiret) encadré de deux espaces. Nous générons le tout avant chaque élément li, ce qui donne, en CSS :

#tags li:before {
  content: " - ";
}

Chaque tag est, ainsi, précédé d'un tiret, y compris le premier. Dans ce dernier cas, la génération de contenu donne un résultat plutôt laid (« Tags : - CSS »). Heureusement, il est possible d'annuler l'application du contenu généré ; pour cela, nous sélectionnons le premier élément li au moyen de la pseudo-classe :first-child, qu'on peut cumuler avec d'autres pseudo-classes et des pseudo-éléments. Quant à la propriété content, nous l'utilisons encore, cette fois-ci avec la valeur none.

#tags li:first-child:before {
  content: none;
}

Lorsque la propriété content a pour valeur none, cela signifie que le pseudo-élément n'est pas généré, quoi qu'il contienne. Toutefois, cette valeur n'est pas comprise par Firefox 2, Opera et Safari (ainsi que Google Chrome, qui, rappelons-le, utilise le même moteur de rendu que Safari pour les CSS). Or, comme nous utilisons l'un des deux pseudo-éléments :before et :after, il est possible d'utiliser la valeur par défaut de content, à savoir normal : en effet, la spécification CSS 2.1 du W3C, à la section sur la propriété content, dit ceci à propos de la valeur normal : computes to 'none' for the :before and :after pseudo-elements, ce qui veut dire que la valeur normal se comporte comme la valeur none lorsqu'elle est appliquée aux pseudo-éléments :before et :after. Nous pouvons donc corriger la règle CSS précédente comme suit :

#tags li:first-child:before {
  content: normal;
}

Seulement voilà : Safari ne comprend pas la valeur normal et continue à afficher un tiret avant le premier tag. Pour corriger ce problème, il est possible d'indiquer comme valeur à content une chaîne vide.

#tags li:first-child:before {
  content: "";
}

Génération de contenu en CSS et accessibilité

Même si cette fonctionnalité paraît pratique, voire sympathique, il vaut mieux éviter d'en abuser si l'on souhaite générer du contenu textuel. En effet, une page Web doit rester consultable lorsque les feuilles de style sont désactivées ou ne sont pas prises en charge (même partiellement), que l'on utilise un navigateur graphique ou que l'on recoure à des aides techniques, qui peuvent ne pas prendre en charge les CSS, fût-ce partiellement. Par conséquent, il faut veiller à ce que le contenu généré en CSS ne soit pas du contenu essentiel à la page Web consultée et à sa compréhension.

Page de test

Vous pouvez consulter la page de test de génération de contenu en CSS pour avoir un aperçu du résultat sous votre navigateur.