visibility

Résumé

La propriété CSS visibility est utilisée pour deux effets :

  1. La valeur hidden cache un élément mais laisse un espace là où il devrait être.
  2. La valeur collapse cache des rangs ou des colonnes d'un tableau.

Syntaxe

Syntaxe formelle : visible | hidden | collapse
visibility: visible
visibility: hidden
visibility: collapse

visibility: inherit

Valeurs

visible
Valeur par défaut, l'élément s'affiche normalement.
hidden
L'élément est caché, mais l'espace occupé n'est pas libéré. Les autres éléments sont positionnés comme s'il était affiché normalement. Cela agit comme si l'élément était totalement transparent. Les descendants avec la propriété visibility: visible seront à nouveau visibles (ne fonctionne pas dans IE jusqu'à la version 7).
collapse
Pour les rangs de tableau, les colonnes de tableau, les groupes de colonnes et les groupes de rangs de tableau, les rangs ou les colonnes sont cachés et l'espace qu'ils devraient occuper se comporte comme si la propriété display: none était appliquée aux rangs/colonnes du tableau. Cependant, la taille des autres rangs et colonnes est toujours calculée comme si les cellules des rangs et des colonnes fusionnées étaient toujours présentes. Cette propriété a été ainsi définie afin de supprimer rapidement un rang/une colonne d'un tableau sans avoir à recalculer les largeurs et les hauteurs de chaque portion du tableau. Pour les autres éléments, collapse est traité comme s'il s'agissait de hidden.

Interpolation

Les valeurs de visibilité sont interpolable entre visible et non-visible. Une des valeurs de début ou de fin doit alors être visible ou aucune interpolation ne peut avoir lieu. Si une des valeurs est visible, interpolé comme une étape discrète où les valeurs de la fonction de temporisation entre 0 et 1 sont associées à visible et les autres valeurs de la fonction de temporisation (qui ont lieu seulement entre le début/fin de la transition ou un résultat des fonctions cubic-bezier()).

Exemples

Voir l'exemple sur une page

p        { visibility: hidden; }   /* Les paragraphes ne seront pas visibles             */
p.showme { visibility: visible; }  /* exceptés ceux appartenant à la classeshowme       */
tr.col   { visibility: collapse; } /* Les rangées de tableau de classecol fusionneront  */

Notes

Le support de visibility: collapse est manquant ou partiellement incorrect dans quelques navigateurs modernes. Dans beaucoup de cas, il peut ne pas être correctement traité, comme si visibility: hidden, sur des éléments autres que des colonnes ou des rangs de tableau.

visibility:collapse peut changer la disposition d'un tableau si celui-ci a imbriqué des tableaux dans les cellules fusionnées. Sauf si visibility: visible a été explicitement spécifié dans les tableaux imbriqués.

Spécifications

Spécification Statut Commentaires
CSS Basic Box Model
La définition de 'visibility' dans cette spécification.
Version de travail Aucun changement.
CSS Transitions
La définition de 'visibility' dans cette spécification.
Version de travail Défini visibility comme animable.
CSS Level 2 (Revision 1)
La définition de 'visibility' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support basique 1.0 1.0 (1.7 ou moins) 4.0 4.0 1.0
Fonctionnalité Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support basique 1.0 1.0 1.0 (1.0) 6.0 6.0 1.0

Voir également

display

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : Hell_Carlito, vava, teoli, tregagnon, FredB, Kyodev, Fredchat
Dernière mise à jour par : Hell_Carlito,