Catégories
Astuces et Design

Comparaison de différentes façons de masquer des éléments dans CSS

On pourrait penser que cacher du contenu avec CSS est un problème simple et résolu, mais il existe plusieurs solutions, chacune étant unique.

Les développeurs utilisent le plus souvent display: none pour masquer le contenu de la page. Malheureusement, cette façon de masquer le contenu n’est pas à toute épreuve, car ce contenu est désormais «inaccessible» aux lecteurs d’écran. Il est tentant de l’utiliser, mais surtout dans les cas où quelque chose est uniquement destiné à être caché visuellement, ne le saisissez pas.

Le fait est qu'il existe de nombreuses façons de «cacher» des éléments dans CSS, chacun avec ses avantages et ses inconvénients qui dépendent grandement de la façon dont il est utilisé. Nous allons passer en revue chaque technique ici et terminer avec un résumé qui nous aidera à décider laquelle utiliser et quand.

Comment repérer les différences entre les techniques

Pour voir une différence entre les différentes manières de masquer le contenu, nous devons introduire quelques métriques. Statistiques que nous utiliserons pour comparer les méthodes. J'ai décidé de décomposer cela en posant des questions axées sur quatre domaines particuliers qui affectent la mise en page, les performances et l'accessibilité:

  1. Accessibilité: Le contenu masqué est-il lu par un lecteur d'écran?
  2. Document couler: L'élément masqué affectera-t-il la mise en page du document?
  3. Le rendu: Le modèle de boîte de l'élément masqué sera-t-il rendu?
  4. Déclencheurs d'événements: L'élément détecte-t-il les clics ou fait-il la mise au point?

Maintenant que nous n'avons plus nos critères, comparons les méthodes. Encore une fois, nous allons tout rassembler à la fin de manière à pouvoir l'utiliser comme référence pour prendre des décisions lorsque vous cachez des éléments dans CSS.

Méthode 1: Le display propriété

Nous avons lancé cet article en mettant en garde contre l'utilisation display pour masquer le contenu. Et comme nous l'avons établi, l'utiliser pour masquer un élément signifie que l'élément n'est pas du tout généré. Il est dans le DOM, mais jamais rendu.

L'élément apparaîtra toujours dans le balisage, si vous inspectez la page, vous pourrez voir l'élément. Le modèle de boîte ne générera ni n'apparaîtra sur la page, ce qui s'applique également à tous ses enfants.

De plus, si l'élément a des écouteurs d'événement – disons un clic ou un survol – ils ne s'enregistreront pas du tout. Et comme nous l'avons déjà mentionné, tout le contenu sera ignoré par les lecteurs d'écran. Ici, nous avons deux boutons visibles et un caché avec display: none. Les trois boutons ont des événements de clic, mais seuls les deux boutons visibles rendront et enregistreront les clics.

L'affichage est la seule propriété qui affectera le déclenchement de la demande d'image. Si une balise d'image (ou un élément parent) a un display propriété définie sur none soit via CSS en ligne ou par sélecteur, le l'image sera téléchargée. En revanche, si l'image est appliquée avec un background propriété, il ne sera pas téléchargé.

C'est le cas parce que l'analyseur n'a pas appliqué le CSS lorsqu'un document HTML est analysé et qu'il rencontre un marque. Par contre, lorsque nous appliquons l'image à un élément avec un background propriété, l'image ne sera pas téléchargée car l'analyseur n'a pas appliqué le CSS où l'image est appelée. Ce comportement correspond à tous les derniers navigateurs. La seule exception est IE 11, qui téléchargera des images dans les deux cas.

Métrique Résultat
Le contenu caché est-il lu par un lecteur d'écran?
L'élément masqué affectera-t-il la mise en page du document?
Le modèle de boîte de l'élément masqué sera-t-il rendu?
L'élément détecte-t-il les clics ou fait-il la mise au point?

Méthode 2: Le visibility propriété

Si un élément visibility la propriété est définie sur hidden, alors l'élément est "masqué visuellement". Être «visuellement caché» ressemble beaucoup à ce que display: none fait, mais il est incroyablement différent en ce que l'élément est généré et rendu, mais invisible. Cela signifie que le modèle de boîte de l’élément est présent, ce qui lui donne des dimensions qui continuent d’occuper de l’espace sur l’écran même s’il n’y apparaît pas.

Imaginez que vous portez une cape invisible qui vous rend invisible pour les autres, mais que vous êtes toujours capable de heurter des objets. Vous êtes physiquement là, même si vous êtes invisible à l'œil humain.

Mais c’est là que se terminent les différences entre «masqué visuellement» et «non affiché». En fait, les éléments cachés avec visibility et display se comportent de la même manière en termes d'accessibilité et de déclencheurs d'événements. Les éléments invisibles sont inaccessibles aux lecteurs d'écran et n'enregistrent pas les événements, comme nous le voyons dans la démo suivante qui est exactement la même que le dernier exemple, mais simplement des échanges display: none avec visibility: hidden.

Métrique Résultat
Le contenu caché est-il lu par un lecteur d'écran?
L'élément masqué affectera-t-il la mise en page du document?
Le modèle de boîte de l'élément masqué sera-t-il rendu?
L'élément détecte-t-il les clics ou fait-il la mise au point?

Méthode 3: Le opacity propriété

le opacity propriété affecte uniquement le visuel aspect de l'élément. Si nous définissons un élément opacity à zéro, l'élément sera totalement transparent. Encore une fois, c'est un peu comme visibility: hidden où nous drapons un manteau invisible sur l'élément où il est invisible, mais toujours physiquement présent.

En d’autres termes, nous avons un élément creux et transparent qui agit comme n’importe quel autre élément, mais il est invisible. Cela ressemble beaucoup au visibility méthode, non? La différence est qu'un élément totalement transparent est toujours accessible à un lecteur d'écran et peut enregistrer des événements, comme des clics, comme nous le voyons dans l'exemple suivant.

Métrique Résultat
Le contenu caché est-il lu par un lecteur d'écran?
L'élément masqué affectera-t-il la mise en page du document?
Le modèle de boîte de l'élément masqué sera-t-il rendu?
L'élément détecte-t-il les clics ou fait-il la mise au point?

Méthode 4: Le position propriété

Pousser un élément hors de l'écran avec un positionnement absolu est une autre façon dont les développeurs cachent souvent les choses. En utilisant top et left, nous pouvons pousser l’élément tellement loin de l’écran qu’il ne sera jamais vu. C'est comme cacher le pot à biscuits à l'extérieur de la maison pour que les enfants (ou peut-être vous!) Ne puissent pas les trouver.

«Absolu» est le mot clé ici. Si nous définissons position à absolute, un élément est retiré du flot de documents ce qui est une manière de dire qu'il n'adhère plus à sa position naturelle dans le DOM. En d’autres termes, la page ne lui réserve aucun espace, ce qui désorganise visuellement l’élément, le positionnant sur l’élément positionné le plus proche s’il y en a un, ou à la racine du document si rien d’autre.

Nous tirons parti du positionnement absolu en retirant l'élément «caché» du flux de documents et en le décalant vers le haut à gauche avec des valeurs de -9999px.

.hidden {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

Métrique Effet
Le contenu caché est-il lu par un lecteur d'écran?
L'élément masqué affectera-t-il la mise en page du document?
Le modèle de boîte de l'élément masqué sera-t-il rendu?
L'élément détecte-t-il les clics ou fait-il la mise au point?

Si l'élément masqué contient du contenu focalisable, la page défilera jusqu'à l'élément lorsqu'il est en focus, créant un saut soudain.

Méthode 5: La classe «visuellement cachée»

Jusqu'à présent, le position est la méthode la plus proche que nous ayons vue d'une manière conviviale de masquer des éléments dans CSS. Mais le problème du contenu focalisable provoquant des sauts de page soudains n'est pas grave. Une autre approche de la dissimulation accessible combine un positionnement absolu, le clip propriété et débordement caché. Scott O'Hara l'a blogué en 2017.

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

Décomposons cela.

Nous devons supprimer l'élément du flux de documents. La meilleure façon de procéder est d'utiliser position: absolute. Cela supprimera l'élément, mais nous ne le repousserons pas de l'écran.

.visually-hidden {
  position: absolute;
}

Nous pouvons masquer l'élément en définissant la propriété width et height sur zéro. Malheureusement, cela ne fonctionnera pas car certains lecteurs d'écran ignoreront les éléments dont la largeur et la hauteur sont nulles. Ce que nous pouvons faire est de le définir sur la deuxième valeur la plus basse, 1px. Cela signifie que le contenu débordera facilement de l'espace, nous avons donc également besoin overflow: hidden pour s'assurer qu'il ne déborde pas visuellement.

.visually-hidden {
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

Pour masquer ce carré d'un pixel, nous pouvons utiliser la propriété de découpage CSS. Il est parfait pour cette situation, car il n'affecte pas les lecteurs d'écran. Le contenu est là mais, encore une fois, est visuellement caché. La chose à noter est que clip a été déconseillée au profit de clip-path mais est toujours nécessaire si nous devons prendre en charge les anciennes versions d'Internet Explorer.

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

Une autre pièce du puzzle de classe «visuellement caché» consiste à aborder le texte accessible hors écran, une bizarrerie qui supprime l'espacement blanc entre les mots, les obligeant à être lus à haute voix comme une grande chaîne de mots. Par exemple, "Bienvenue à la maison" sera lu comme "Bienvenue à la maison".

Une solution simple à ce problème consiste à définir le white-space: nowrap:

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

Et enfin! La dernière chose à considérer est de permettre à certains éléments avec un focus natif et des sites actifs de s'afficher lorsqu'ils sont au point, tout en continuant à empêcher l'affichage d'autres éléments, comme les paragraphes. Nous pouvons utiliser le :not pseudo-sélecteur pour cela.

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

Métrique Résultat
Le contenu caché est-il lu par un lecteur d'écran?
L'élément masqué affectera-t-il la mise en page du document?
Le modèle de boîte de l'élément masqué sera-t-il rendu?
L'élément détecte-t-il les clics ou fait-il la mise au point?

Mentions honorables

Il existe encore plus de méthodes que les cinq que nous avons couvertes. Par exemple, le text-indent propriété peut pousser le texte hors de l'écran comme le position méthode:

.hidden {
  text-indent: -9999em;
}

Malheureusement, cette approche ne concorde pas avec RTL modes d'écriture. Cela le rend moins adaptable que les autres solutions que nous avons couvertes.

Une autre méthode utilise transform pour mettre à l'échelle ou déplacer l'élément hors du chemin. Cela fonctionne de la même manière – visuellement seulement – comme opacity.

.hidden {
  transform: scale(0);
}

Mettons tout ensemble!

Nous sommes arrivés à une solution qui masquera visuellement le contenu tout en restant accessible. Alors, devriez-vous arrêter d'utiliser display: none? Non, c'est toujours le meilleur moyen de masquer complètement un élément (visuellement et de manière accessible).

Cela dit, il convient de mentionner que si vous souhaitez obtenir un résultat opposé – cachez quelque chose au lecteur d'écran, le aria-hidden="true" L'attribut masquera le contenu des lecteurs d'écran, mais pas visuellement.

Sur ce, voici un tableau complet qui compare toutes les approches. Utilisez-le pour guider vos décisions sur la façon de masquer le contenu la prochaine fois que vous vous retrouverez dans cette situation.

Métrique Afficher Visibilité Opacité Position Voie accessible
Le contenu caché est-il lu par un lecteur d'écran?
L'élément masqué affectera-t-il la mise en page du document?
Le modèle de boîte de l'élément masqué sera-t-il rendu?
L'élément détecte-t-il les clics ou fait-il la mise au point?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *