:empty, une pseudo-classe pas si vide

La pseudo-classe :empty est relativement peu connue. Dudley Storey montre ici comment l'utiliser, depuis l'application d'un style CSS aux tableaux et aux navigations dynamiques jusqu'au nettoyage de votre balisage HTML.

Par

Lorsque nous écrivons notre CSS, nous sommes des Zatoïchi du développement web. Nous écrivons de belles déclarations et nous les envoyons vers des documents HTML dans l’espoir qu’ils se rencontrent, mais nous connaissons rarement le contenu spécifique d’un élément sélectionné : la question de savoir combien de mots figurent dans un paragraphe, ou si le paragraphe est vide, relève traditionnellement de la responsabilité de JavaScript ou PHP ou d’autres langages.

Souvent on emploie des langages côté-serveur pour créer du contenu dynamique à l’intérieur d'un conteneur HTML. Lorsque l’opération échoue, c’est aux développeurs front-end qu’il revient de traiter le problème. Plutôt que d’ajouter du code avec JavaScript ou PHP, nous pouvons utiliser CSS pour nos conteneurs vides.

Le mystère de la cellule vide résolu

Les tableaux sont souvent remplis avec des données dynamiques, mais certaines cellules peuvent ne pas contenir d’information. Habituellement, on laisse ces cellules telles quelles, mais on pourrait tout aussi bien mettre en valeur le fait qu’elles ne contiennent rien.

Voici un bon exemple d’un tel cas, un tableau montrant les distances entre villes. Il n’y a évidemment pas de distance entre une ville et elle-même, ce qui produit un certain nombre de cellules vides.


image
Tableau des distances entre villes.

Le balisage de la table serait à peu près celui-ci (j’utilise des raccourcis HTML pour aller plus vite) :

<table>
<caption>Distances Between Cities On The Pacific Rim (miles)</caption>
<col><col><col><col>
<tr><th><th scope=col>Auckland<th scope=col>Papeete<th scope=col>Los Angeles
<tr><th scope=row>Auckland<td><td>2542<td>6518
<tr><th scope=row>Papeete<td>2542<td><td>4114
<tr><th scope=row>Los Angeles<td>6518<td>4114<td></table>

C’est un excellent cas d’utilisation de :empty puisque les cellules vides doivent être incluses dans le tableau si l’on veut conserver son sens. Avec :empty il est très facile de cibler les cellules qui n’ont pas de contenu :

td:empty { background: #777; }

Vous avez remarqué la structure du code à la toute fin du tableau, avec la balise fermante </table> juste après le dernier élément <td> vide. Si ce n’était pas le cas, la balise <td> isolée serait considérée comme étant “ouverte” et non pas vide. Une approche alternative serait d’utiliser <td></td> sans espace entre les deux.

Même si c’est un peu étrange, on peut combiner les sélecteurs :empty et :not() pour donner un style aux cellules non-vides.

td:not(:empty) { /* styles pour les cellules non vides */ }

Ce serait une approche inhabituelle, puisque notre présupposé est que la majorité des cellules ont du contenu et peuvent être ciblées à l’aide d’un simple sélecteur <td>, mais c’est une approche valide en CSS.

Réhabiliter le lien manquant

Sur un site, la navigation est souvent générée de façon dynamique, mais parfois incomplète. Il est possible qu’un espace soit réservé pour un lien qui n’apparaît jamais, ou seulement de manière sporadique. Même si cela implique généralement un travail supplémentaire côté serveur, dans l’intervalle il y a une solution CSS simple pour éviter que votre navigation ne ressemble à un sourire aux dents écartées :

nav[role="navigation"] a:empty { display: none; pointer-events: none; }

Un lien comportant un attribut href mais sans contenu ne sera pas rendu par le navigateur. Donc si nous prenons ce HTML :

<nav role="navigation">
    <a href="index.html">Home</a>
    <a href="contact.html">Contact</a>
    <a href="tools.html">Tools</a>
    <a href="classes.html"></a>
</nav>

...et que nous ajoutons le CSS qui précède, le résultat sera que le dernier lien, qui est vide, n’apparaîtra pas (dans ce cas d'ailleurs, le pointer-events est redondant puisque le lien n'apparaîtra pas, et ne peut donc pas être cliqué).

Exceptions

Attention : l’espace entre les balises ouvrante et fermante est considéré comme une information, de même que des balises (même sans contenu) à l’intérieur de l’élément ciblé, par conséquent les deux éléments suivants ne sont pas considérés comme vides :

<a href="classes.html">  </a>

<a href="classes.html"><span></span></a>

Comme déjà évoqué, les balises qui ne sont pas refermées (même si leur fermeture est optionnelle en HTML) ne sont pas considérées comme vides, même si elles n’ont pas de contenu. Une balise paragraphe isolée est “ouverte” et donc n’est pas vide :

<p>

alors même qu’on aurait certainement (s’il n’y a pas de retour à la ligne) :

<p><p>

Dans ce dernier cas, le premier paragraphe est vide, mais le second (en supposant que rien ne s’ajoute immédiatement après) ne l’est pas.

Les éléments “auto-fermants” sont considérés comme vides : <br>, <hr>, <img>, etc. répondent à :empty.

Les éléments sont considérés comme vides si leur seul contenu est un commentaire :

<p><!-- ce paragraphe est vide --></p>

Utiliser :empty comme testeur de qualité du code

Inévitablement, les développeurs se laissent aller à la paresse. “Hé, j’ai besoin d’un peu d’espace en-dessous de cet élément. OK, je sais, je vais ajouter un paragraphe vide”.

<p>un contenu réel…</p>
<p></p>

Ou pire encore, une balise <br>. Ce balisage vide, de remplissage, va à l’encontre des bonnes règles d’écriture de CSS et il est difficile à retrouver. Nous pouvons utiliser :empty pour obtenir une visualisation rapide du balisage faible :

*:empty, br { border: 2px solid red; }

Compatibilité navigateurs et conclusion

La compatibilité de :empty est excellente, tous les navigateurs modernes, IE9+ y compris, le reconnaissent.

Il existe bien d'autres usages de :empty, vous en verrez un le mois prochain, dans le redesign de ce blog.


Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur CSS parus dans la Cascade.


Du même auteur dans La Cascade :

Image révélée au grattage avec SVG et CSS Blend Modes
Créer de superbes diagrammes avec SVG et CSS Blend Modes
Backgrounds Pop-Art avec SVG et CSS Blend Modes
Motifs SVG japonais
Contraste de texte automatique avec CSS Blend Modes
Backgrounds SVG, les rayures
Diagonales et motifs SVG en background
Les bases de SVG : Lignes simples et multiples
Les bases de SVG : Polygones
Les bases de SVG : Cercles et Ellipses
Les bases de SVG : Rectangles et Carrés
Brood X : Le principe des cigales en CSS
5 règles pour rendre SVG accessible
3 raisons d’utiliser HSL pour vos couleurs
Utiliser HSL pour vos couleurs
Effets vidéo HTML5 avec CSS Blend-Modes
Un carrousel responsif en pur CSS
Combiner CSS clip-path et Shapes
Appropriation culturelle : utiliser les collections des musées
Créer un player audio en HTML5 (3 articles)
Qu’est-ce qu’un élément remplacé ?
Utiliser CSS object-fit
Stores vénitiens 3D en CSS
CSS : Aider la veuve et l’orphelin
Toi seul : utiliser only-child de CSS
Créer un background vidéo fullscreen avec HTML5
Rendre un SVG responsif
La première variable CSS : currentColor
Empty, une pseudo-classe pas si vide
Les raccourcis HTML5


Ressources complémentaires en anglais

Un exemple d'utilisation, CodePen de Katy de Corah


original paru le dans le blog de Dudley Storey, the new code.

Sur l’auteur : est enseignant, auteur, artisan et cycliste, il vit à Calgary, dans l’État de l’Alberta au Canada. Passionné par le web et le développement (mobile) qu'il enseigne depuis 15 ans, il est l’auteur de Pro CSS3 Animation, et publie régulièrement dans son blog demosthenes.info des articles sur HTML, CSS et SVG. On peut le suivre sur Twitter ou Google+.

Traduit avec l’aimable autorisation de l’auteur.
Copyright Dudley Storey © 2014.