10 façons de masquer des éléments en CSS –

Il existe plusieurs façons de masquer un élément dans CSS, mais elles diffèrent dans la façon dont elles affectent l'accessibilité, la présentation, l'animation, les performances et la gestion 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 des animations CSS interpolées deviennent possibles.

Accessibilité

Chaque méthode décrite ci-dessous masquera visuellement un élément, mais elle peut ou non masquer le contenu des technologies d'assistance. Par exemple, un lecteur d'écran pourrait encore annoncer de minuscules textes transparents. 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.

Attention, les animations peuvent également provoquer une désorientation, des migraines, convulsions ou autre inconfort physique pour certaines personnes. Envisagez d'utiliser une requête de média à mouvement réduit préféré 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 le déclenchement d'événements sur cet élément ou n'aura aucun effet – cela est, l'élément n'est pas visible mais peut toujours être cliqué ou recevoir d'autres interactions utilisateur.

Performances

Après qu'un navigateur charge et analyse le modèle d'objet HTML DOM et CSS, la page est rendue en trois étapes:

1. Disposition: génère la géométrie et la position de chaque élément
2. Peinture: dessine les pixels de chaque élément
3. Composition : positionne les couches d'éléments dans l'ordre approprié

Un effet qui ne fait que provoque des changements de composition est nettement plus lisse que ceux qui affectent la mise en page. Dans certains cas, le navigateur peut également utiliser l'accélération matérielle.

1. opacité et filtre: opacité ()

L'opacité : N et filtre: opacité (N) les propriétés peuvent être transmises a nombre compris entre 0 et 1, ou un pourcentage entre 0% et 100% indiquant une transparence totale et une opacité totale en conséquence.

Voir le stylo
masquer avec opacité: 0 par SitePoint ( @SitePoint )
sur CodePen .

Il y a peu de différence pratique entre les deux dans les navigateurs modernes, bien que le filtre devrait ê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 d'excellentes performances, mais méfiez-vous qu'un élément entièrement transparent reste sur la page et peut déclencher des événements.

2. couleur Alpha Transparency

l'opacité affecte tout l'élément, mais il est également possible de définir la couleur la couleur de fond et border-color propriétés séparément. L'application d'un canal alpha zéro à l'aide de rgba (0,0,0,0) ou similaire rend un élément entièrement transparent:

Voir le stylo
masquer avec la couleur alpha de 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 arrière-plans d'image à moins qu'ils ne soient générés à l'aide de gradient linéaire ou similaire.

Le canal alpha peut être défini avec:

• transparent : entièrement transparent (les animations intermédiaires ne sont pas possibles)
• rgba (r, g, b, a) : rouge, vert, bleu et alpha
• hsla (h, s, l, a) : teinte, saturation, légèreté et alpha
• #RRGGBBAA et #RGBA

3. transform

La propriété transform peut être utilisée pour traduire (déplacer), mettre à l'échelle, faire pivoter ou incliner un élément. Une échelle (0) ou traduire (-999px, 0px) hors écran masquera l'élément:

Voir le stylet
masquer avec transformation: échelle (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 distincte et peut être animé en 2D ou 3D. L'espace de mise en page d'origine reste tel quel, mais aucun événement ne sera déclenché par un élément entièrement masqué.

4. clip-path

La propriété clip-path crée une région de découpage 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
masquer avec clip-path par SitePoint ( @ SitePoint )
sur CodePen .

clip-path offre des possibilités d'animations intéressantes, bien qu'il ne doive être utilisé que dans les navigateurs modernes.

5. visibilité

La propriété visibilité peut être définie sur visible ou masquée pour afficher et masquer un élément:

Voir le Stylo
masquer avec visibilité: masqué par SitePoint ( @SitePoint )
sur CodePen .

L'espace utilisé par l'élément reste en place sauf si une valeur d'effondrement est utilisée.

6. affichage

affichage est probablement la méthode de masquage d'élément la plus utilisée. Une valeur de aucun supprime efficacement l'élément comme s'il n'avait jamais existé dans le DOM.

Voir le stylo
masquer avec affichage: aucun par SitePoint ( @SitePoint )
sur CodePen .

Cependant, c'est probablement la pire propriété CSS à utiliser dans la majorité des cas. Il ne peut pas être animé et déclenchera une mise en page à moins que l'élément ne soit déplacé du flux de documents en utilisant la position : la propriété absolue ou la nouvelle propriété contient est adoptée.

[L'affichage est également surchargé, avec des options telles que le bloc en ligne la table la flexbox la grille et plus. Réinitialisation à la valeur correcte après l'affichage de : aucune; peut être problématique (bien que non défini peut aider).

7. Attribut HTML caché

L'attribut HTML caché peut être ajouté à n'importe quel élément:

pour appliquer le style par défaut du navigateur:

[hidden]  {
  affichage: aucun;
}

Cela présente les mêmes avantages et défauts que l'affichage de : aucun bien qu'il puisse être utile lors de l'utilisation d'un système de gestion de contenu qui ne permet pas de changer de style.

8. Position absolue

La propriété position permet de déplacer un élément de sa position par défaut statique dans la mise en page à l'aide de top en bas à gauche et à droite . Un élément absolu peut donc être déplacé hors écran avec à gauche: -999 px ou similaire:

Voir le stylo
masquer avec la position: absolu par SitePoint ( @SitePoint )
sur CodePen .

9. Superposer un autre élément

Un élément peut être masqué visuellement en positionnant un autre sur le dessus qui a la même couleur que l'arrière-plan. Dans cet exemple, un :: après pseudo-élément est superposé, bien que tout élément enfant puisse être utilisé:

Voir le stylo
masquer avec une superposition par SitePoint ( @SitePoint )
sur CodePen .

Bien que techniquement possible, cette option nécessitait plus de code que les autres options.

10. Réduire les dimensions

Un élément peut être masqué en minimisant ses dimensions à l'aide de largeur hauteur rembourrage border-width et / / ou taille de police . Il peut également être nécessaire d'appliquer overflow: hidden; pour garantir que le contenu ne déborde pas.

Voir le stylo
masquer avec largeur ou hauteur par SitePoint ( @ SitePoint )
sur CodePen .

Des effets animés intéressants sont possibles, mais les performances sont sensiblement meilleures avec la transformation .

Choix cachés

affichage: aucun a été la solution préférée pour masquer des éléments pendant de nombreuses années, mais il a été remplacé par des options plus flexibles et animables. Il est toujours valide, mais peut-être uniquement lorsque vous souhaitez masquer définitivement le contenu de tous les utilisateurs. transformer ou opacité sont de meilleurs choix lorsque l'on considère les performances.

Faites passer 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, comment utiliser CSS avec SVG, et plus encore.

Craig est un consultant Web britannique indépendant qui a construit sa première page pour IE2.0 en 1995. Depuis ce temps il préconise les normes, l'accessibilité et les meilleures pratiques HTML5. Il a créé des spécifications d'entreprise, des sites Web et des applications en ligne pour des entreprises et des organisations, notamment le Parlement britannique, le Parlement européen, le Département de l'énergie et du changement climatique, Microsoft, etc. Il a écrit plus de 1 000 articles pour SitePoint et vous pouvez le trouver @craigbuckler .