La propriété visibility
peut être utilisée afin de cacher un élément tout en laissant l'espace qu'il aurait occupé. Il permet aussi de masquer des lignes ou des colonnes dans un tableau.
Valeur initiale | visible |
---|---|
Applicabilité | tous les éléments |
Héritée | oui |
Média | visuel |
Valeur calculée | comme spécifié |
Animable | oui, comme une visibilité |
Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Syntaxe
/* Avec un mot-clé */ visibility: visible; visibility: hidden; visibility: collapse; /* Valeurs globales */ visibility: inherit; visibility: initial; visibility: unset;
Valeurs
visible
- La valeur par défaut, la boîte est visible.
hidden
- La boîte est invisible (totalement transparente, rien n'est dessiné) mais continue d'avoir un impact sur la disposition. Les fils de l'élément seront visibles s'ils ont
visibility:visible
(cela ne fonctionne pas pour Internet Explorer jusqu'à la version 7). collapse
- Pour les lignes, les colonnes, les groupes de lignes et les groupes de colonnes d'un tableau, les éléments sont masqués et l'espace occupé est retiré (comme si on avait appliqué
aux colonnes/lignes du tableau). La taille des autres lignes et colonnes continue d'être calculée comme si les lignes et colonnes masquées étaient présentes. Cela a été conçu afin de pouvoir retirer rapidement des lignes et/ou des colonnes sans avoir à recalculer les dimensions pour l'ensemble du tableau. Pour les éléments XUL, la taille calculée des éléments vaut toujours zéro, quel que soit les autres styles qui pourraient affecter la taille, les marges continuent de s'appliquer. Pour les autres éléments,display
: nonecollapse
est traité commehidden
.
Interpolation
Les valeurs de visibilité peuvent être interpolées entre visible et masqué. L'une des valeurs de début ou de fin doit donc être visible
, sinon il n'y aura pas d'interpolation. L'interpolation est discrète et on pourra utiliser opacity
pour créer un effet doux plutôt que de masquer/rendre visible l'élément brusquement.
Syntaxe formelle
visible | hidden | collapse
Exemples
Exemple simple
HTML
<p> On peut dire tout ce qu'on veut ici, ce ne sera pas lisible de toute façon. </p> <p class="coucou"> Alors que là, on a la bonne classe. Coucou tout le monde :) </p> <p> Et on repasse en mode invisible. </p>
CSS
p { /* les paragraphes ne seront pas visibles */ visibility: hidden; } p.coucou { /* sauf ceux avec la classe coucou */ visibility: visible; }
Résultat
Exemple sur un tableau
HTML
<table> <tr> <td>Jean</td> <td>Biche</td> </tr> <tr class="col"> <td>Hit</td> <td>Girl</td> </tr> <tr> <td>Super</td> <td>Cochon</td> </tr> </table>
CSS
tr.col { /* les lignes de tableau avec la classe */ /* col seront repliées */ visibility: collapse; }
Résultat
Notes
Le support de visibility:collapse
est absent ou incorrect pour certains navigateurs récents. Dans de nombreux cas, il n'est pas correctement traité comme visibility:hidden
sur les éléments qui ne sont pas des lignes et/ou des colonnes de tableau.
visibility:collapse
peut modifier la disposition d'un tableau si le tableau possède des tableaux imbriqués dont les cellules sont repliées, sauf si visibility:visible
est défini explicitement sur 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 | visibility peut désormais être animée. |
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 simple | 1.0[1] | 1.0 (1.7 ou moins)[2] | 4.0[4] | 4.0[3] | 1.0[1] |
Fonctionnalité | Android | Chrome pour Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Support simple | 1.0 | 1.0[1] | 1.0 (1.0)[2] | 6.0 | 6.0[3] | 1.0[1] |
[1] Chrome et Safari traitent visibility: collapse
comme hidden
, ce qui laisse un espace blanc. La valeur est supportée uniquement pour <tr>
, <thead>
, <tbody>
et <tfoot>
mais pas pour <col>
et <colgroup>
.
[2] Firefox ne masque pas les bordures lorsqu'il masque <col>
et <colgroup>
si border-collapse: collapse
est utilisé.
[3] Avec Opera, visibility: collapse
fonctionne sur les éléments des tableaux mais semble ne pas masquer <tfoot>
s'il est adjacent à un <tbody>
visible.
[4] Internet Explorer ne prend pas en charge visibility: initial;
.