Vous pouvez masquer un élément en CSS à l’aide des propriétés CSS display : none ou visibility : hidden. display : none supprime l’élément entier de la page et n’affecte pas la mise en page. visibility : hidden masque l’élément tout en gardant le même espace.
Vous pouvez rencontrer un scénario où vous voulez masquer un élément sur la page Web. Par exemple, vous pouvez avoir un bloc de texte qui doit rester caché et apparaître lorsqu’un utilisateur clique sur un bouton.
CSS Hide Element
Il existe deux approches principales pour cacher un élément en CSS, en utilisant :
- L’attribut display : none.
- L’attribut visibility : hidden.
La première approche peut affecter la mise en page de votre page Web. Mais, la deuxième méthode est néanmoins populaire.
CSS Hide Element : display
- Carrière Karma vous met en relation avec les meilleurs bootcamps technologiques
- Obtenez des bourses et des cours de préparation exclusifs
La propriété d’affichage contrôle la façon dont un élément est affiché sur une page Web. Chaque élément d’un document HTML possède une valeur par défaut pour la propriété display, bien que cette valeur dépende de l’élément. Pour la plupart des éléments, la valeur d’affichage par défaut est soit block, soit inline.
Si vous ne voulez pas du tout qu’un élément s’affiche sur un élément, vous pouvez définir la valeur de la propriété display à none.
La règle de style suivante masque un élément sur une page Web:
display: none;
Lorsque vous définissez la valeur de display à none, l’élément affecté disparaît. Cela signifie que l’élément n’occupera plus d’espace sur la page Web.
Affichage : none Exemple
Supposons que nous concevions une page Web À propos de nous pour un club de cuisine local. Dans notre conception initiale, nous avons ajouté l’image d’un gâteau à la page. Maintenant, le club veut que nous cachions l’image car ils ne sont pas sûrs du design final.
Nous pourrions cacher l’image sur la page en utilisant le code suivant :
<html><div><h1>About Us</h1><img src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" /><p>The Superstar Bakers Club, founded in 2014, is a community of passionate cookers and bakers from the Charleston, S.C. area. The club has over 100 members and meets each week to share ideas and experiment with new recipes.</p></div><style>img {display: none;}<style>
Cliquez sur le 
bouton dans l’éditeur de code ci-dessus pour voir le résultat de notre code HTML/CSS.
Nous avons défini trois éléments dans une balise HTML <>. L’élément <h1> est utilisé pour créer notre en-tête, et contient le texte À propos de nous. Notre élément HTML <img> crée une image d’un gâteau, qui mesure 200px de haut et 200px de large. L’élément <p> contient une courte description du club.
Dans notre code CSS, nous utilisons le sélecteur « img » pour sélectionner toutes les balises d’image sur notre page. Cette règle définit la propriété d’affichage de toutes les balises <img> à none. Ou, en d’autres termes, la règle de style cache notre image.
Bien que notre image soit cachée, elle existe toujours sur notre page web. Si nous voulons faire revenir notre image, nous pouvons soit supprimer le style display:none ;. Ou bien, nous pouvons spécifier un autre style d’affichage (comme block ou inline).
Vous pourriez définir cette règle comme un attribut HTML en ligne :
<img style= »display : none ; » src= »https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80″ height= »200″ width= »200″ />
Pour en savoir plus sur les propriétés HTML et CSS en ligne, consultez notre guide CSS en ligne.
CSS Hide Element : visibility
La propriété CSS visibility est utilisée pour contrôler si un élément est visible sur la page web.
Par défaut, la valeur de la propriété visibility est visible. Cependant, si vous voulez rendre une image invisible, vous pouvez définir la valeur de la visibilité à hidden.
La règle de style suivante définit la visibilité d’un élément à hidden:
visibility: hidden;
Retournons à l’exemple du club de cuisine de tout à l’heure. Supposons que nous voulions masquer l’image du gâteau sur notre page Web À propos de nous. Nous pourrions le faire en utilisant ce code :
<html><div><h1>About Us</h1><img src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" /><p>The Superstar Bakers Club, founded in 2014, is a community of passionate cookers and bakers from the Charleston, S.C. area. The club has over 100 members and meets each week to share ideas and experiment with new recipes.</p></div><style>img {display: visibility;}<style>
Cliquez sur le
bouton dans l’éditeur de code ci-dessus pour voir la sortie de notre code HTML/CSS.
Notre code HTML est le même dans cet exemple. Dans notre fichier CSS, au lieu d’utiliser la propriété display, nous avons utilisé visibility pour masquer notre élément. Comme vous pouvez le voir ci-dessus, notre image a été cachée de la page Web.
Bien que notre image ait disparu, il y a maintenant un espace entre notre en-tête et notre paragraphe où l’image aurait été placée. Il s’agit d’une caractéristique du style visibility : hidden ;. L’espace de l’élément d’origine est toujours conservé par la page web. Mais, l’élément est caché.
Visibilité CSS vs affichage
Les deux méthodes que nous avons abordées pour cacher un élément semblent être les mêmes, mais il existe une différence entre les deux.
La règle display : none supprime un élément d’un document HTML. Bien que le code de l’élément masqué soit toujours présent, l’élément lui-même ne sera pas affiché.
La règle visibility : hidden, en revanche, masque un élément, mais celui-ci occupera toujours de l’espace sur la page Web. Si vous souhaitez masquer un élément mais conserver l’espace de cet élément sur la page Web, il est préférable d’utiliser la règle visibility : hidden ;.
Conclusion
La règle display : none supprime un élément d’un document et le cache de la vue. La règle visibility : hidden cache un élément sur un document et laisse vide l’espace dans lequel l’élément serait apparu.
.
0 commentaire