visibility

La propriété visibility peut être utilisée afin de cacher un élément tout en conservant occupé l'espace dans lequel il aurait été visible. Elle permet aussi de masquer des lignes ou des colonnes dans un tableau (cf. <table>).

Note : Afin de cacher un élément et de le retirer de la disposition du document, on utilisera plutôt la propriété display avec la valeur none.

Syntaxe

/* Avec un mot-clé */
visibility: visible;
visibility: hidden;
visibility: collapse;

/* Valeurs globales */
visibility: inherit;
visibility: initial;
visibility: unset;

La propriété visibility est définie avec l'un des mots-clés suivants.

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. L'élément ne pourra plus recevoir le focus (cf. la navigation au clavier avec les tabulations).
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é display: none 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.
  • Les éléments flexibles sont masqués et l'espace qu'ils auraient occupé est retiré.
  • 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, collapse est traité comme hidden.

Syntaxe formelle

visible | hidden | collapse

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 (passage direct d'un état à l'autre), les valeurs supérieures à 0 sont considérées équivalentes à visible. On pourra plutôt utiliser opacity pour créer un effet doux plutôt que de masquer/rendre visible l'élément brusquement.

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

Accessibilité

Utiliser la propriété visibility avec la valeur hidden retirera l'objet de l'arbre d'accessibilité. Les éléments ciblés, ainsi que leurs éléments descendants ne seront plus annoncés par les lecteurs d'écran.

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 État Commentaires
CSS Flexible Box Layout Module
La définition de 'visibility' dans cette spécification.
Candidat au statut de recommandation Définition de la valeur collapse pour les éléments flexibles.
CSS Basic Box Model
La définition de 'visibility' dans cette spécification.
Version de travail Aucune modification.
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.
Valeur initialevisible
Applicabilitétous les éléments
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationune visibilité
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
visibilityChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4
Notes
Support complet 4
Notes
Notes Internet Explorer doesn't support visibility: initial.
Notes Up to Internet Explorer 7, descendants of hidden elements will still be invisible even if they have visibility set to visible.
Opera Support complet 4Safari Support complet 1WebView Android Support complet 1Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 1Samsung Internet Android Support complet Oui
collapseChrome Support complet 1
Notes
Support complet 1
Notes
Notes Chrome treats visibility: collapse like hidden, leaving a white gap.
Notes Chrome supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
Edge Support complet 12Firefox Support complet 1
Notes
Support complet 1
Notes
Notes Firefox doesn't hide borders when hiding <col> and <colgroup> elements if border-collapse: collapse is set.
IE Support complet 10Opera Support complet 15
Notes
Support complet 15
Notes
Notes Opera treats visibility: collapse like hidden, leaving a white gap.
Notes Opera supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
Safari Support complet 1.3
Notes
Support complet 1.3
Notes
Notes Safari treats visibility: collapse like hidden, leaving a white gap.
Notes Safari supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
WebView Android Support complet ≤37
Notes
Support complet ≤37
Notes
Notes WebView treats visibility: collapse like hidden, leaving a white gap.
Notes WebView supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
Chrome Android Support complet 18
Notes
Support complet 18
Notes
Notes Chrome treats visibility: collapse like hidden, leaving a white gap.
Notes Chrome supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
Firefox Android Support complet 4
Notes
Support complet 4
Notes
Notes Firefox doesn't hide borders when hiding <col> and <colgroup> elements if border-collapse: collapse is set.
Opera Android Support complet 14
Notes
Support complet 14
Notes
Notes Opera treats visibility: collapse like hidden, leaving a white gap.
Notes Opera supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
Safari iOS Support complet 1
Notes
Support complet 1
Notes
Notes Safari treats visibility: collapse like hidden, leaving a white gap.
Notes Safari supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.
Samsung Internet Android Support complet 1.0
Notes
Support complet 1.0
Notes
Notes Samsung Internet treats visibility: collapse like hidden, leaving a white gap.
Notes Samsung Internet supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.

Légende

Support complet  
Support complet
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi