Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

visibility - Propriété CSS

visibility

Résumé des caractéristiques de la propriété visibility

Description rapide
Affichage ou masquage.
Statut
Standard
S'applique à
Tous les éléments.
Valeurs prédéfinies
visible | hidden | collapse
Pourcentages
Ne s'appliquent pas.
Valeur initiale
visible
Héritée par défaut
Oui
Type d'animation
Discrète : lors d'une animation, la propriété visibility passe d'une valeur à l'autre sans transition.
Références (W3C)
 🡇  
 🡅  
Statut du document:: CRD (document proposé pour la recommandation)

Statut du document:: Ancienne norme, obsolète

Statut du document:: Ancienne norme, obsolète

Description.

La propriété visibility définit la visibilité d'un élément. Attention : dans la plupart des cas, même lorsque l'élément n'est pas visible, son emplacement est conservé. Autrement dit la mise en page n'est pas modifiée même si l'élément n'est pas affiché.

Si un élément est déclaré invisible (hidden) mais que un ou plusieurs de ses descendants sont déclarés visibles, ces derniers seront quand même affichés. Ceci peut poser des problèmes difficiles à résoudre pour la navigateur. Comme par exemple dans un tableau, rendre une ligne (balise tr) ou une colonne (balise col) invisible, tout en maintenant visibles les cellules. Nombreux de ces cas particuliers ne sont pas précisément définis dans la norme.

Voir aussi la propriété CSS display qui peut aussi masquer un élément avec la valeur none.

Syntaxes pour visibility.

visibility:
 visible visible hidden hidden collapse collapse
;
  • visibility: visible;

    L'élément est visible.

  • visibility: hidden;

    L'élément n'est pas visible mais sa place est réservée.

    Bien qu'il soit toujours possible de cliquer sur l'emplacement qu'aurait dû occuper l'élément invisible, il ne réagit pas aux événements de souris, ni aux autres événements. De même, lors d'une restitution sonore, l'élément invisible en doit pas être lu. On peut cependant forcer sa lecture, reportez-vous à la propriété speak.

    Néanmoins, si l'élément invisible est un container, il continue de jouer son rôle de container : les balises table continuent de disposer les cellules en tableau, les grilles et les flex-box continuent de positionner leurs enfants, etc.

  • visibility: collapse;

    L'élément n'est pas visible et sa place n'est pas réservée. Cette valeur ne s'applique qu'à certains éléments, en particulier des éléments de tableaux :

    1. tr (ligne de tableau) : la ligne est masquée et les lignes suivantes sont remontées à sa place.
    2. tbody (corps de tableau) : le corps du tableau disparait, ainsi que son emplacement.
    3. col : colonne de tableau : la colonne est masquée et son emplacement est récupéré. Les colonnes suivantes sont décalées vers la gauche mais leur largeur n'est pas modifiée (la largeur du tableau est donc réduite).
    4. colgroup (groupe de colonnes de tableau) : même comportement que pour les colonnes.
    5. td (cellule de tableau) : la cellule est invisible mais le tableau n'est pas restructuré. Il y a donc une case blanche à la place de la cellule. collapse est équivalent à hidden.

    Pour tous les autres types d'éléments, la valeur collapse est équivalente à hidden.

  • visibility: initial; visibility: inherit; visibility: revert; visibility: revert-layer; visibility: unset;

    La valeur initiale est : visible.

Animation de la propriété visibility.

En animant la propriété visibility il est particulièrement facile de faire un clignotant (image ou texte). Le fait que l'emplacement de l'élément soit conservé permet de faire disparaître un élément sans modifier la mise en page, ce qui évite le tressautement de la page.

Élément clignotant

Simulateur.

Le simulateur applique la propriété visibility sur plusieurs éléments de types différents (les éléments concernés sont sur fond coloré) :

  • Un élément du type bloc (div).
  • Un élément du type inline (span).
  • La deuxième ligne du tableau (balise tr).
  • La cellule de Janvier du premier tableau (balise td).
  • La deuxième ligne (balise tr) et la quatrième colonne (balise col) du deuxième tableau.

Vous constaterez que la valeur hidden ne semble avoir aucun effet lorsqu'elle est appliquée sur une colonne de tableau. C'est dû au fait que les cellules ne sont pas des descendants de la colonne dans l'arborescence HTML. Les cellules n'héritent donc pas des colonnes (par contre elles héritent des lignes tr).

visibility :
Application de la propriété visibility sur un élément du type bloc.
Application de la propriété visibility sur un élément du type inline.
Hiver/printempsJanvierFévrierMarsAvril
Printemps/étéMaiJuinJuilletAoût
Automne/hiverSeptembreOctobreNovembreDécembre
Hiver/printempsJanvierFévrierMarsAvril
Printemps/étéMaiJuinJuilletAoût
Automne/hiverSeptembreOctobreNovembreDécembre

Prise en charge par les navigateurs (compatibilité).

Aucun problème de compatibilité n'est à signaler au sujet de la propriété visibility.
Signalons quand même que la valeur collapse n'est applicable que sur certaines balises, ces dernières étant différentes suivant les navigateurs.

1
visibility
Estimation de la prise en charge en pourcentage du parc actuel.
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet