visibility - Propriété CSS
Résumé des caractéristiques de la propriété visibility
visible
| hidden
| collapse
visible
visibility
passe d'une valeur à l'autre sans transition.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:
;
- visibility: visible;
L'élément est visible.
- 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 :
- tr (ligne de tableau) : la ligne est masquée et les lignes suivantes sont remontées à sa place.
- tbody (corps de tableau) : le corps du tableau disparait, ainsi que son emplacement.
- 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).
- colgroup (groupe de colonnes de tableau) : même comportement que pour les colonnes.
- 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.
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
sur un élément du type bloc.
visibility
sur un élément du type inline.
Hiver/printemps | Janvier | Février | Mars | Avril |
Printemps/été | Mai | Juin | Juillet | Août |
Automne/hiver | Septembre | Octobre | Novembre | Décembre |
Hiver/printemps | Janvier | Février | Mars | Avril |
Printemps/été | Mai | Juin | Juillet | Août |
Automne/hiver | Septembre | Octobre | Novembre | Dé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.
visibility