CSS:visibility

Un article de MDC.

« Référence CSS

[modifier] Résumé

La propriété 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.

• Valeur initiale : visible
• S'applique à : tous les éléments
• Héritée: oui
• Pourcentages : N/A
• Média : Visuel
• Valeur calculée : comme spécifiée

[modifier] Syntaxe

visibility: visible | hidden | collapse | inherit

[modifier] Valeurs

visible

L'élément s'affiche normalement.

hidden

L'élément est caché, mais 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.

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és é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.

[modifier] Exemples

Voir des exemples en ligne (en)

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

[modifier] 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.

[modifier] Spécifications

• CSS 2 (fr)
• CSS 2.1 (en)

[modifier] Voir également

display