Propriété de visibilité CSS
Exemple
Rendez les éléments <h2> visibles et masqués :
h2.a {
visibility: visible;
}
h2.b {
visibility: hidden;
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La visibility
propriété spécifie si un élément est visible ou non.
Conseil : les éléments masqués occupent de l'espace sur la page. Utilisez la propriété display pour masquer et supprimer un élément de la mise en page du document !
Valeur par défaut: | visible |
---|---|
Hérité: | Oui |
Animable : | Oui. En savoir plus sur l'animation |
Version: | CSS2 |
Syntaxe JavaScript : | objet .style.visibility="caché" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Property | |||||
---|---|---|---|---|---|
visibility | 1.0 | 4.0 | 1.0 | 1.0 | 4.0 |
Syntaxe CSS
visibility: visible|hidden|collapse|initial|inherit;
Valeurs de propriété
Value | Description | Play it |
---|---|---|
visible | Default value. The element is visible | |
hidden | The element is hidden (but still takes up space) | |
collapse | Only for table rows (<tr>), row groups (<tbody>), columns (<col>),
column groups (<colgroup>). This value removes a row or column,
but it does not affect the table layout. The space taken up by the row or column
will be available for other content. If collapse is used on other elements, it renders as "hidden" |
|
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Plus d'exemples
Exemple
Cet exemple montre comment réduire un élément de table :
tr.collapse {
visibility: collapse;
}
Pages connexes
Tutoriel CSS : Affichage et visibilité CSS
Référence HTML DOM : propriété de visibilité