Visibility - Propriété CSS

Schéma syntaxique de visibility.

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;

  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.

Valeurs communes à toutes les propriétés :

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 des recalculs et le tressautement de la page.

Manipulation de la propriété visibility par programme.

Avec Javascript, modifier la valeur de visibility.

En Javascript, voici comment modifier la valeur de visibility. On voit que Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots), et une autre syntaxe avec la notation en camel-case (une majuscule pour séparer les mots).

let el = document.getElementById('id'); el.style['visibility'] = 'hidden'; // ou let el = document.getElementById('id'); el.style.visibility = 'hidden';

Avec Javascript, lire la valeur de visibility.

Ce code fonctionne si propriété a été affectée directement à l'élément lui-même par son attribut style, et non pas en passant par un sélecteur CSS.

let el = document.getElementById('id'); let value = el.style['visibility']; // ou let el = document.getElementById('id'); let value = el.style.visibility;

Avec Javascript, lire la valeur calculée de visibility.

La valeur calculée est celle qui résulte de l'évaluation de la cascade d'héritages. Si visibility n'a été définie à aucun endroit, la valeur calculée est la valeur initiale de la propriété (soit visible dans le cas de visibility).

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('visibility');

Avec JQuery, modifier la valeur de visibility.


$('#id').css('visibility', 'hidden');


Avec JQuery, lire la valeur calculée de visibility.

let value = $('#id').css('visibility');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété visibility et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Dans le cas de visibility, ce sera la même chose, puisque la propriété n'accepte que des valeurs prédéfinies.

Exemple interactif avec la propriété visibility.

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 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).

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

Propriété
visibility

Estimation de la prise en charge globale.

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Chrome

Edge

Internet Explorer

Opéra

Firefox

QQ Browser

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété visibility.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Première définition de la propriété visibility dans la spécification du langage CSS version 2.xx.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Affichage - Niveau 3

  Pas de changement concernant la propriété visibility.
  

  20 Février 2014

  Document de travail.

  

  28 Août 2018

  Candidat à la recommandation.

  

  

Voir aussi...

Les spécifications CSS éditées par le W3C sont organisées en modules. Les propriété visibility et display sont toutes les deux décrites dans le module CSS Display Module. Les définitions suivantes sont également présentées dans ce même module.

Propriétés :