5 façons de masquer des éléments de page avec CSS

Il existe de nombreuses façons de masquer des éléments de page à l'aide de CSS. Vous pouvez définir l'opacité sur 0, la visibilité sur cachée, l'affichage sur aucun ou la position sur absolue, puis définir la position sur la zone invisible.

Vous êtes-vous déjà demandé pourquoi nous avons tant de techniques pour masquer des éléments, mais elles semblent toutes produire le même effet ? Chaque méthode présente en fait des différences subtiles par rapport aux autres, et ces différences déterminent quelle méthode est utilisée dans une situation spécifique. Ce didacticiel couvrira les petites différences que vous devez garder à l'esprit afin que vous puissiez choisir laquelle des méthodes ci-dessus masquer les éléments en fonction de votre situation.

Opacité

L'attribut opacité signifie définir la transparence d'un élément. Il n’est pas conçu pour modifier le cadre de délimitation d’un élément. Cela signifie que définir l'opacité sur 0 masque uniquement visuellement l'élément. L'élément lui-même occupe toujours sa propre position et contribue à la mise en page de la page Web. Il répondra également à l’interaction de l’utilisateur.

.hide {
opacité : 0;
}

Si vous envisagez d'utiliser l'attribut opacité pour masquer des éléments dans un logiciel de lecture d'écran, malheureusement, vous ne pouvez pas. Impossible de le faire. L'élément et tout son contenu seront lus par les lecteurs d'écran, tout comme les autres éléments de la page Web. En d’autres termes, les éléments se comportent comme s’ils étaient opaques.

Je voudrais également vous rappeler que la propriété opacité peut être utilisée pour réaliser de superbes animations. Tout élément avec une valeur d'attribut d'opacité inférieure à 1 crée également un nouveau contexte d'empilement.

Lorsque votre souris se déplace sur le deuxième bloc caché, l'état de l'élément passe en douceur de entièrement transparent à entièrement opaque. Le bloc a également sa propriété de curseur définie sur pointeur, ce qui indique que l'utilisateur peut interagir avec lui.

Visibilité

Le deuxième attribut dont il faut parler est la visibilité. Définir sa valeur sur Hidden masquera notre élément. Comme l'attribut opacité, les éléments masqués auront toujours un effet sur la mise en page de notre page Web. La seule différence avec l'opacité est qu'elle ne répond à aucune interaction de l'utilisateur. De plus, des éléments seront masqués dans le logiciel de lecture d’écran.

Cet attribut peut également réaliser des effets d'animation, à condition que ses états initial et final soient différents. Cela garantit que l'animation de transition entre les commutateurs d'état de visibilité peut être fluide dans le temps (en fait, cela peut être utilisé pour utiliser masqué pour implémenter l'affichage retardé et le masquage des éléments - Note du traducteur).

.hide {
visibilité : caché;
}

Notez que si la visibilité d'un élément est définie sur masqué et que vous souhaitez afficher l'un de ses éléments descendants, il suffit Définissez simplement explicitement la visibilité de cet élément sur visible (comme .o-hide p dans l'exemple - note du traducteur). Essayez de survoler uniquement l'élément masqué et non le numéro dans la balise p. Vous constaterez que le curseur de votre souris ne se transforme pas en doigt. À ce stade, lorsque vous cliquez sur la souris, votre événement de clic ne sera pas déclenché.

La balise

à l'intérieur de la balise

peut toujours capturer tous les événements de la souris. Une fois que votre souris survole le texte,

devient visible et l'enregistrement de l'événement prend effet.

Affichage

L'attribut display masque véritablement l'élément selon le sens du mot. Définir la propriété display sur none garantit que l'élément n'est pas visible et que même le modèle de boîte n'est pas généré. Grâce à cet attribut, les éléments masqués n'occupent aucun espace. De plus, une fois l'affichage défini sur aucun, toute interaction directe de l'utilisateur sur l'élément ne sera pas efficace. De plus, les logiciels de lecture d’écran ne liront pas le contenu de l’élément. De cette façon, l'effet est comme si l'élément n'existait pas du tout.

Tous les descendants de cet élément seront également masqués. L'ajout d'une animation de transition à cette propriété n'a aucun effet ; tout basculement entre ses différentes valeurs d'état prendra toujours effet immédiatement.

Veuillez toutefois noter que cet élément est toujours accessible via le DOM. Vous pouvez donc le manipuler via le DOM comme n’importe quel autre élément.

.hide {
display: none;
}

Vous verrez qu'il y a un élément

Sa propre propriété display est définie sur block, mais elle est toujours invisible. C'est une autre différence entre visibilité:hidden et display:none. Dans l'exemple précédent, définir explicitement la visibilité de n'importe quel élément descendant sur visible peut le rendre visible, mais display ne le fait pas. Quelle que soit sa propre valeur d'affichage, tant que l'affichage de l'élément ancêtre est nul, ils le seront tous. visibles.

Maintenant, déplacez votre souris plusieurs fois sur le premier élément de bloc et cliquez dessus. Cette opération fera apparaître un deuxième élément de bloc dont le numéro sera un nombre supérieur à 0. En effet, même si un élément est configuré pour être masqué à l'utilisateur, il peut toujours être manipulé via JavaScript.

Position

Supposons qu'il y ait un élément avec lequel vous souhaitez interagir, mais que vous ne voulez pas qu'il affecte la mise en page de votre page Web. Il n'existe aucun attribut approprié pour gérer cette situation (l'opacité et la visibilité affectent la mise en page, l'affichage le fait). n'affecte pas la mise en page mais ne peut pas directement l'interaction - note du traducteur). Dans ce cas, vous ne pouvez envisager que de déplacer l'élément hors de la zone visible. Cette méthode n'affecte pas la disposition et maintient les éléments opérationnels. Voici le CSS utilisant cette approche :

.hide {
position : absolue;
haut : -9999px;
gauche : -9999px;
}

Le principe principal de cette méthode est de définir le haut et la gauche de l'élément sur un nombre négatif suffisamment grand pour le rendre invisible à l'écran. L’un des avantages (ou des inconvénients potentiels) de l’utilisation de cette technique est que le contenu des éléments qu’elle cache peut être lu par un logiciel de lecture d’écran. Ceci est tout à fait compréhensible, puisque vous déplacez simplement l'élément en dehors de la zone visible afin que l'utilisateur ne puisse pas le voir.

Vous devez éviter d'utiliser cette méthode pour masquer un élément pouvant être focalisé, car cela provoquerait un changement de focus imprévisible lorsque l'utilisateur donnera le focus à cet élément. Cette méthode est souvent utilisée lors de la création de cases à cocher et de boutons radio personnalisés. (Utilisez DOM pour simuler les cases à cocher et les boutons radio, mais utilisez cette méthode pour masquer les véritables cases à cocher et les éléments radio afin de "recevoir" le commutateur de focus - Note du traducteur)

Clip-path

Une autre façon de masquer des éléments consiste à les découper. Auparavant, cela pouvait être réalisé via la propriété clip, mais cette propriété a été dépréciée au profit d'une meilleure propriété appelée clip-path. Lisez le récent article SitePoint de Nitish Kumar « Présentation de l'attribut clicp-path » pour en savoir plus sur les utilisations plus avancées de cet attribut.

N'oubliez pas que la propriété clip-path n'est pas encore entièrement prise en charge dans IE ou Edge. Si vous souhaitez utiliser des fichiers SVG externes dans votre chemin de clip, la prise en charge du navigateur est encore plus faible. Le code pour masquer un élément à l'aide de l'attribut clip-path ressemble à ceci :

.hide {
clip-path: polygon(0px 0px,0px ​​​​0px,0px ​​​​0px, 0px ​​​​0px);
}

Si vous survolez le premier élément, cela peut toujours affecter le deuxième élément, même si le deuxième élément est masqué via le chemin du clip. Si vous cliquez dessus, cela supprimera la classe cachée et rendra notre élément visible depuis cette position. Le texte des éléments masqués peut toujours être lu par un logiciel de lecture d'écran. De nombreux sites WordPress utilisent clip-path ou le clip précédent pour implémenter le texte spécifiquement fourni pour le logiciel de lecture d'écran.

Bien que notre élément lui-même ne soit plus visible, il occupe toujours la taille du rectangle qu'il devrait occuper, et les éléments qui l'entourent se comportent comme s'il était visible. N'oubliez pas que les interactions de l'utilisateur telles que les survols ou les clics ne prendront pas effet en dehors de la zone de découpage. Dans notre cas, la taille de la zone de découpage est nulle, ce qui signifie que l'utilisateur ne pourra pas interagir directement avec l'élément masqué. De plus, cette propriété permet d'utiliser diverses animations de transition pour obtenir différents effets.

Conclusion

Dans ce tutoriel, nous avons examiné 5 façons différentes de masquer des éléments via CSS. Chaque méthode est un peu différente des autres. Savoir ce que vous voulez réaliser vous aidera à décider quel attribut utiliser et, au fil du temps, vous serez en mesure de choisir instinctivement la meilleure approche en fonction de vos besoins réels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!