Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
:empty
Baseline Widely available *
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
Lapseudo-classeCSS:empty correspond à un élément qui n'a aucun enfant. Seules les feuilles de l'arbre et le texte (espaces inclus) sont pris en compte. Les commentaires, les attributs ou le contenu généré en CSS aveccontent n'ont pas d'influence sur le contenu de l'élément (autrement dit, si un élément ne contient que des commentaires, il sera considéré comme vide).
Exemple interactif
div:empty { outline: 2px solid deeppink; height: 1em;}<p>Élément sans contenu :</p><div></div><p>Élément avec commentaire :</p><div><!-- A comment --></div><p>Élément avec élément imbriqué vide :</p><div><p></p></div>Note :Avec lesSélecteurs en CSS Niveau 4(angl.), le sélecteur:empty a été modifié afin de se comporter comme:-moz-only-whitespace mais, à l'heure actuelle, aucun navigateur ne prend en charge cette fonctionnalité.
Syntaxe
:empty { /* ... */}Accessibilité
Les technologies d'assistance telles que les lecteurs d'écran ne peuvent pas analyser un contenu interactif vide. Tout contenu interactif doit avoir un nom accessible, fourni sous la forme d'une valeur textuelle via l'élément parent du contrôle (<a>,<button>, etc.). Les noms accessibles pemettent d'exposer le contrôle interactif au sein del'arbre d'accessibilité, une API communiquant des informations qui peuvent être utilisées par les technologies d'assistance.
Le texte fournissant le nom accessible peut être masqué grâceà des propriétés afin de le retirer visuellement mais de le conserver pour les technologies d'assistance. Cette méthode est généralement utilisée pour les boutons utilisant une simple icône comme indication.
Qu'est-ce qu'un nom accessible ? The Paciello Group (en anglais)
Hidden content for better a11y
Understanding Success Criterion 2.4.4
Exemples
HTML
<div><!-- Je serai verte. --></div><div>Je serai rose.</div><div> <!-- Je serai rose à cause des espaces autour du commentaire --></div><div> <p> <!-- Je serai rose dans tous les navigateurs à cause des espaces non réductibles et des éléments autour de ce commentaire. --> </p></div>CSS
body { display: flex; justify-content: space-around;}.box { background: pink; height: 80px; width: 80px;}.box:empty { background: lime;}Résultat
Spécifications
| Specification |
|---|
| Selectors Level 4 # the-empty-pseudo |
Compatibilité des navigateurs
Voir aussi
:-moz-only-whitespace— L'implémentation despréfixes dans les changements deSelectors Level 4(angl.):blank