La Visibilité en CSS
Introduction à la propriété de visibilité
La propriété visibility
en CSS permet de contrôler l'affichage des éléments d'une page web. Contrairement à d'autres propriétés, un élément masqué avec visibility: hidden;
continuera de prendre de la place dans le flux du document.
Syntaxe
La syntaxe de la propriété visibility
est la suivante :
visibility: ;
Valeurs possibles
La propriété visibility
accepte trois valeurs principales : - visible : Montre l'élément. - hidden : Masque l'élément sans retirer l'espace qu'il occupe. - collapse : Masque l'élément ainsi que l'espace qu'il aurait occupé.
Il est important de noter que la valeur collapse
ne doit être utilisée qu'avec les lignes (<tr>
) et groupes de lignes dans une table (<table>
). L'utilisation de collapse
sur d'autres éléments se comportera comme hidden
. Cela est particulièrement utile pour gérer l'affichage des lignes ou colonnes dans une table sans perturber la structure de celle-ci.
Exemples d'utilisation
Voici quelques exemples d'utilisation de la propriété visibility
:
Exemple 1 : Masquer un élément avec une classe spécifique.
.hide {
visibility: hidden;
}
Exemple 2 : Masquer une ligne dans une table.
tr {
visibility: collapse;
}