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;  
}