CSS - Visibilité : Faire Apparaître et Disparaître des Éléments

Salut à toi, futur(e) développeur(-euse) web ! Aujourd'hui, on va plonger dans le monde fascinant de la visibilité CSS. En tant que ton prof de informatique du coin, je suis excité de te guider dans cette aventure. À la fin de ce tutoriel, tu seras capable de faire disparaître et réapparaître des éléments comme un véritable magicien CSS !

Qu'est-ce que la Visibilité CSS ?

Avant de commencer à swinguer nos baguettes CSS, comprenons ce qu'est la visibilité. En termes simples, la visibilité CSS contrôle si un élément est visible ou caché sur une page web. C'est comme jouer à cache-cache avec tes éléments HTML !

Valeurs Possibles

Voyons les différentes valeurs que nous pouvons utiliser avec la propriété visibility :

Valeur	Description
visible	L'élément est visible (c'est la valeur par défaut)
hidden	L'élément est caché, mais occupe toujours de la place
collapse	Utilisé principalement pour les éléments de table, on va couvrir ça !
inherit	Hérite de la visibilité de son élément parent

Applications

La propriété visibility peut être appliquée à tous les éléments HTML. Oui, tu as bien entendu - tous ! Desde divs aux paragraphes, des images aux tables, tu ennommes, et la visibilité fera son travail magique.

Syntaxe DOM

Maintenant, voyons comment nous pouvons utiliser la visibilité dans notre CSS :

élément {
visibility: valeur;
}

Simple, non ? Remplace 'élément' avec l'élément HTML que tu veux cibler, et 'valeur' avec l'une des valeurs de visibilité que nous avons discutées plus tôt.

Valeur de Visibilité - visible

Commençons par la valeur par défaut, 'visible'. Voici un exemple :

<div class="visible-box">Tu peux me voir ?</div>

<style>
.visible-box {
width: 200px;
height: 100px;
background-color: lightblue;
visibility: visible;
}
</style>

Dans cet exemple, nous avons créé une boîte bleu clair avec le texte "Tu peux me voir ?". La visibilité est réglée sur 'visible', ce qui signifie... tu l'as deviné, la boîte est visible ! C'est le comportement par défaut, donc même si nous n'avions pas spécifié la visibilité, le résultat serait le même.

Valeur de Visibilité - hidden

Maintenant, faisons disparaître des choses ! Voici comment utiliser la valeur 'hidden' :

<div class="hidden-box">Maintenant tu me vois...</div>
<div class="visible-box">Maintenant tu ne me vois pas !</div>

<style>
.hidden-box {
width: 200px;
height: 100px;
background-color: lightpink;
visibility: hidden;
}
.visible-box {
width: 200px;
height: 100px;
background-color: lightgreen;
}
</style>

Dans cet exemple, nous avons deux boîtes. La première est réglée sur 'hidden', donc elle ne sera pas visible sur la page. Cependant - et c'est important - elle occupe toujours de la place ! La seconde boîte apparaîtra juste après l'espace invisible de la première boîte.

Cela diffère de display: none, qui enlève l'élément de l'agencement entièrement. Pense à 'hidden' comme un manteau d'invisibilité - l'élément est toujours là, tu ne peux juste pas le voir !

Valeur de Visibilité - collapse

La valeur 'collapse' est un peu spéciale. Elle est principalement utilisée pour les éléments de table. Voyons-la en action :

<table>
<tr>
<td>Je suis visible !</td>
<td class="collapsed">Je suis effacé !</td>
<td>Je suis visible aussi !</td>
</tr>
</table>

<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 5px;
}
.collapsed {
visibility: collapse;
}
</style>

Dans cet exemple, la cellule du milieu de notre ligne de tableau est réglée sur 'collapse'. Cela signifie qu'elle sera cachée, et l'espace qu'elle aurait occupé sera pris par les cellules environnantes. C'est comme si la cellule n'existait jamais !

Visibilité - Collapse sur des Éléments Non-Tabulaires

Tu te demandes peut-être, "Qu'arrive-t-il si j'utilise 'collapse' sur un élément non-tabulaire ?" Bonne question ! Le comportement peut varier entre les navigateurs, mais généralement, il agira comme 'hidden'. essayons :

<div class="normal">Je suis un div normal</div>
<div class="collapsed">Je suis un div effacé</div>
<div class="normal">Je suis un autre div normal</div>

<style>
.normal {
background-color: lightyellow;
margin: 5px;
padding: 5px;
}
.collapsed {
background-color: lightcoral;
margin: 5px;
padding: 5px;
visibility: collapse;
}
</style>

Dans la plupart des navigateurs, le div 'collapsed' se comportera comme s'il avait visibility: hidden. Il ne sera pas visible, mais il occupera toujours de la place.

Effets de Transition de Visibilité

Maintenant, c'est où les choses deviennent vraiment amusantes ! Nous pouvons utiliser des transitions CSS pour créer des effets de visibilité en douceur. Regarde ça :

<div class="magic-box">Passe ta souris sur moi !</div>

<style>
.magic-box {
width: 200px;
height: 100px;
background-color: lavender;
visibility: visible;
opacity: 1;
transition: opacity 0.5s, visibility 0.5s;
}
.magic-box:hover {
visibility: hidden;
opacity: 0;
}
</style>

Dans cet exemple, lorsque tu passes ta souris sur la boîte, elle va doucement s'estomper et devenir invisible. Lorsque tu enlèves ta souris, elle va revenir en douceur. Nous avons combiné la visibilité avec l'opacité pour créer cet effet. Génial, non ?

Et voilà, les amis ! Tu viens d'apprendre les tenants et les aboutissants de la visibilité CSS. Souviens-toi, avec grand pouvoir vient grande responsabilité. Utilise tes nouvelles compétences de visibilité avec sagesse, et tes pages web te remercieront !

Avant de conclure, voici une petite blague pour toi : Pourquoi l'élément CSS est allé en thérapie ? Il avait trop de problèmes cachés ! ?

Bonne programmation, et que tes éléments soient toujours visibles lorsque tu le veux !

Credits: Image by storyset