Accueil    CSS    Propriété visibility
 



style css visibility  Style CSS visibility

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété visibility permet de définir la visibilité d'un élément dans la page. Il s'agit spécifiquement de la visibilité de l'élément et non pas la présence de l'élément, car même si celui-ci n'est pas visible, la place théorique qu'il prend reste toujours réservée.
Ainsi un paragraphe dont la propriété visibility est valorisée à collapse ne sera pas visible mais un espace vide de la taille de celui-ci prendra sa place.

Pour masquer complètement un élément dans une page (sans espace réservé) il faut utiliser le style display avec la valeur "none".



Propriétés pour le style visibility :




Propriété Définition Valeurs CSS
visibility Détermine si l'élément html est visible ou non dans la page (l'espace qu'il occupe étant conservé même s'il n'est pas affiché) collapse
hidden
visible
inherit
CSS 2


Exemple d'utilisation de la balise visibility :




- Application de la propriété visibility sur un élément div (affichage de type block) :

<br />ligne 1
<div style="visibility:visible; border:solid 1px black; width:450px; padding:5px;">
   élément visible :
   <br />style visibility valorisé à visible
</div>
ligne 2
<br />ligne 3
<div style="visibility:hidden; border:solid 1px black; width:450px; padding:5px;">
   élément non visible :
   <br />style visibility valorisé à hidden
</div>
ligne 4



- Application de la propriété visibility sur un élément label (affichage de type inline) :

Le texte qui suit est <label style="visibility:visible;">visible</label> et s'affiche.

Le texte qui suit est <label style="visibility:hidden;">masqué</label> et ne s'affiche pas.



- Avec le style display valorisé à none l'exemple précédent donne :

Le texte qui suit est <label style="display:none;">masqué</label> et ne s'affiche pas.


- Application de la propriété visibility sur un élément div (affichage de type block) :

ligne 1
élément visible :
style visibility valorisé à visible
ligne 2
ligne 3
élément non visible :
style visibility valorisé à hidden
ligne 4


- Application de la propriété visibility sur un élément label (affichage de type inline) :

Le texte qui suit est et s'affiche.

Le texte qui suit est et ne s'affiche pas.


- Avec le style display valorisé à none l'exemple précédent donne :

Le texte qui suit est et ne s'affiche pas.