10 façons de masquer des éléments en CSS
Il existe plusieurs façons de masquer un élément en CSS, mais elles diffèrent dans la façon dont elles affectent l’accessibilité, la mise en page, l’animation, les performances et le traitement des événements.
Animation
Certaines options de masquage CSS sont tout ou rien. L’élément est soit entièrement visible, soit entièrement invisible et il n’y a pas d’état intermédiaire. D’autres, comme la transparence, peuvent avoir une plage de valeurs, de sorte que les animations CSS interpolées deviennent possibles.
Accessibilité
Chaque méthode décrite ci-dessous masque visuellement un élément, mais elle peut ou non masquer le contenu aux technologies d’assistance. Par exemple, un lecteur d’écran pourrait encore annoncer un minuscule texte transparent. D’autres propriétés CSS ou attributs ARIA tels que aria-hidden="true" peuvent être nécessaires pour décrire l’action appropriée.
Veillez à ce que les animations puissent également provoquer une désorientation, des migraines, des crises ou d’autres désagréments physiques chez certaines personnes. Envisagez d’utiliser une requête média prefers-reduced-motion pour désactiver les animations lorsque cela est spécifié dans les préférences de l’utilisateur.
Gestion des événements
Le masquage empêchera les événements d’être déclenchés sur cet élément ou n’aura aucun effet – c’est-à-dire que l’élément n’est pas visible mais peut toujours être cliqué ou recevoir d’autres interactions de l’utilisateur.
Performance
Après qu’un navigateur ait chargé et analysé le DOM HTML et le modèle objet CSS, la page est rendue en trois étapes :
- Mise en page : générer la géométrie et la position de chaque élément
- Peinture : dessiner les pixels de chaque élément
- Composition : positionner les couches d’éléments dans l’ordre approprié
Un effet qui ne provoque que des changements de composition est sensiblement plus lisse que ceux qui affectent la mise en page. Dans certains cas, le navigateur peut également utiliser l’accélération matérielle.
opacité et filtre : opacity()
Les propriétés opacity: N et filter: opacity(N) peuvent se voir transmettre un nombre compris entre 0 et 1, ou un pourcentage compris entre 0 % et 100 % désignant en conséquence une transparence totale et une opacité totale.
Voir le stylo
hide with opacity : 0 par SitePoint (@SitePoint)
sur CodePen.
Il y a peu de différence pratique entre les deux dans les navigateurs modernes, bien que filter doive être utilisé si plusieurs effets sont appliqués en même temps (flou, contraste, niveaux de gris, etc.)
L’opacité peut être animée et offre de grandes performances, mais méfiez-vous qu’un élément entièrement transparent reste sur la page et peut déclencher des événements.
| métrique | effet |
|---|---|
| support du navigateur | bien, mais IE ne prend en charge que opacity 0 à 1 |
| accessibilité | Contenu non lu si 0 ou 0% est défini |
| Mise en page affectée ? | non |
| Rendu nécessaire | composition |
| Performances | Mieux, peut utiliser l’accélération matérielle |
| Cadres d’animation possibles ? | oui |
| Des événements déclenchés lorsqu’ils sont cachés ? | oui |
color Alpha Transparency
opacity affecte l’élément entier, mais il est également possible de définir les propriétés colorbackground-color et border-color séparément. L’application d’un canal alpha nul à l’aide de rgba(0,0,0,0) ou similaire rend un élément totalement transparent :
Voir le stylo
hide with color alpha par SitePoint (@SitePoint)
sur CodePen.
Chaque propriété peut être animée séparément pour créer des effets intéressants. Notez que la transparence ne peut pas être appliquée aux éléments avec des fonds d’image, à moins qu’ils ne soient générés à l’aide de linear-gradient ou similaire.
Le canal alpha peut être défini avec :
-
transparent: totalement transparent (les animations entre deux ne sont pas possibles) -
rgba(r, g, b, a): rouge, vert, bleu et alpha -
hsla(h, s, l, a): teinte, saturation, luminosité, et alpha -
#RRGGBBAAet#RGBA
| métrique | effet |
|---|---|
| support du navigateur | Bien, mais IE ne prend en charge que transparent et rgba |
| accessibilité | contenu toujours lu |
| Mise en page affectée ? | non | rendering requis | peinture | performance | bonne, mais pas aussi rapide que opacity |
cadres d’animation possibles ? | oui |
| Des événements déclenchés lorsqu’ils sont cachés ? | oui |
transformation
La propriété transform peut être utilisée pour translater (déplacer), mettre à l’échelle, faire pivoter ou incliner un élément. Un scale(0) ou translate(-999px, 0px) hors écran masquera l’élément :
Voir le stylo
hide with transform : scale(0) ; par SitePoint (@SitePoint)
sur CodePen.
transform offre d’excellentes performances et une accélération matérielle car l’élément est effectivement déplacé dans une couche séparée et peut être animé en 2D ou en 3D. L’espace de mise en page original reste tel quel, mais aucun événement ne sera déclenché par un élément entièrement caché.
| métrique | effet | Prise en charge du navigateur | Bonne |
|---|---|
| Accessibilité | Contenu toujours lu |
| Mise en page affectée ? | non – les dimensions originales restent |
| rendering requis | composition |
| performance | meilleure, peut utiliser l’accélération matérielle |
| frames d’animation possibles ? | oui |
| Des événements déclenchés lorsqu’ils sont cachés ? | non |
clip-path
La propriété clip-path crée une région d’écrêtage qui détermine quelles parties d’un élément sont visibles. L’utilisation d’une valeur telle que clip-path: circle(0); masquera complètement l’élément.
Voir le stylo
hide with clip-path par SitePoint (@SitePoint)
sur CodePen.
clip-path offre des possibilités d’animations intéressantes, même s’il ne faut compter que sur les navigateurs modernes.
| métrique | effet |
|---|---|
| Support des navigateurs | Navigateurs modernes uniquement |
| Accessibilité | Contenu toujours lu par certaines applications |
| Mise en page affectée ? | non – les dimensions d’origine restent |
| rendering requis | paint |
| performance | raisonnable |
| Cadres d’animation possibles ? | oui, dans les navigateurs modernes |
| Des événements déclenchés lorsqu’ils sont cachés ? | non |
visibilité
La visibility propriété peut être définie sur visible ou hidden pour afficher et masquer un élément :
Voir le stylo
cacher avec visibilité : caché par SitePoint (@SitePoint)
sur CodePen.
L’espace utilisé par l’élément reste en place sauf si une valeur collapse est utilisée.
| métrique | effet | prise en charge du navigateur | excellent |
|---|---|
| accessibilité | contenu non lu |
| Mise en page affectée ? | non, sauf si collapse est utilisé |
Rendu requis | composition, à moins que collapse ne soit utilisé |
| performance | bien |
| Cadres d’animation possibles ? | non |
| Des événements déclenchés lorsqu’ils sont cachés ? | non |
affichage
display est probablement la méthode de masquage des éléments la plus utilisée. Une valeur de none supprime effectivement l’élément comme s’il n’avait jamais existé dans le DOM.
Voir le stylo
hide with display : none par SitePoint (@SitePoint)
sur CodePen.
Mais c’est peut-être la pire propriété CSS à utiliser dans la majorité des cas. Elle ne peut pas être animée et déclenchera une mise en page à moins que l’élément ne soit déplacé hors du flux du document à l’aide de position: absolute ou que la nouvelle propriété contain soit adoptée.
display est également surchargé, avec des options telles que blockinlinetableflexboxgrid et plus encore. La réinitialisation à la valeur correcte après display: none; peut être problématique (bien que unset puisse aider).
| métrique | effet | prise en charge du navigateur | excellent |
|---|---|
| accessibilité | contenu non lu |
| mise en page affectée ? | oui |
| rendering requis | layout | performance | mauvaise | Cadres d’animation possibles? | non |
| événements déclenchés lorsqu’ils sont cachés ? | non |
Attribut caché HTML
L’attribut HTML hidden peut être ajouté à tout élément :
<p hidden> Hidden content</p>pour appliquer le style par défaut du navigateur :
{ display: none;}Ceci présente les mêmes avantages et défauts que display: none, bien qu’il puisse être utile lors de l’utilisation d’un système de gestion de contenu qui n’autorise pas les changements de style.
Position absolue
La propriété position permet de déplacer un élément à partir de sa position par défaut static dans la mise en page en utilisant topbottomleft, et right. Un élément absolute-positionné peut donc être déplacé hors de l’écran avec left: -999px ou similaire:
Voir le stylo
hide with position : absolute par SitePoint (@SitePoint)
sur CodePen.
| métrique | effet |
|---|---|
| support du navigateur | excellent, à moins d’utiliser position: sticky |
| accessibilité | contenu toujours lu |
| La mise en page est-elle affectée ? | Oui, si le positionnement est modifié |
| Rendering requis | Dépend |
| Performances | raisonnables si l’on fait attention |
| Cadres d’animation possibles ? | oui, sur topbottomleft, et right |
| Les événements se déclenchent lorsqu’ils sont cachés ? | Oui, mais il peut être impossible d’interagir avec un élément hors écran |
Cacher un autre élément
Un élément peut être visuellement caché en positionnant un autre par-dessus qui a la même couleur que le fond. Dans cet exemple, un pseudo-élément ::after est superposé, bien que n’importe quel élément enfant puisse être utilisé :
Voir le stylo
hide with an overlay by SitePoint (@SitePoint)
on CodePen.
Bien que techniquement possible, cette option nécessitait plus de code que les autres options.
| métrique | effet | prise en charge du navigateur | excellent |
|---|---|
| accessibilité | contenu toujours lu |
| Mise en page affectée ? | non, si positionnement absolu |
| Rendu nécessaire | peinture |
| Performances | raisonnables si on fait attention |
| Cadres d’animation possibles ? | oui |
| Des événements déclenchés lorsqu’ils sont cachés ? | oui, lorsqu’un pseudo-élément ou un élément enfant est superposé |
Réduire les dimensions
Un élément peut être caché en minimisant ses dimensions à l’aide de widthheightpaddingborder-width et/ou font-size. Il peut également être nécessaire d’appliquer overflow: hidden; pour que le contenu ne déborde pas.
Voir le stylo
hide with width or height par SitePoint (@SitePoint)
sur CodePen.
Des effets animés intéressants sont possibles, mais les performances sont sensiblement meilleures avec transform.
| métrique | effet | prise en charge du navigateur | excellent |
|---|---|
| accessibilité | contenu toujours lu |
| mise en page affectée ? | oui |
| rendering requis | layout | performance | mauvaise | Cadres d’animation possibles? | oui |
| événements déclenchés lorsqu’ils sont cachés ? | non |
Choisis cachés
display: none a été la solution favorite pour cacher des éléments pendant de nombreuses années, mais elle a été supplantée par des options plus flexibles et animables. Elle est toujours valable, mais peut-être seulement lorsque vous souhaitez masquer le contenu de façon permanente à tous les utilisateurs. transform ou opacity sont de meilleurs choix si l’on considère les performances.
Prenez vos compétences CSS au niveau supérieur avec CSS Master. Apprenez l’architecture CSS, le débogage, les propriétés personnalisées, les techniques avancées de mise en page et d’animation, l’utilisation de CSS avec SVG, et bien plus encore.