visibility |
Visibilité |
| CSS 2 |
|
Syntaxe
Paramètres
| Paramètre |
Description |
| paramètres |
Ce paramètre de propriété permet d'indiquer le type de visibilité : |
| collapse |
Cette valeur permet d'indiquer, si c'est un élément de table, d'enlever la ligne ou la colonne sans affecté la disposition du tableau. |
| hidden |
Cette valeur permet d'indiquer que la balise est invisible mais occupe le même espace que si elle était visible dans la page. |
| inherit |
Cette valeur permet d'indiquer qu'il faut hériter de la balise parent. |
| visible |
Cette valeur permet d'indiquer que la balise est visible. C'est la valeur par défaut. |
Description
Cette propriété permet d'indiquer si une balise doit être visible ou non.
Remarques
- Différence avec display : La propriété visibility contrôle uniquement la visibilité de l'élément sans modifier son espace occupé dans le flux du
document. Contrairement à display: none; supprimant complètement l'élément du rendu, un élément avec visibility: hidden; reste présent dans le flux de mise en page
et conserve son espace. Cela le rend utile pour cacher temporairement des éléments sans perturber la structure.
- Trois valeurs principales : Les principales valeurs de visibility sont visible (valeur par défaut, l'élément est visible), hidden (l'élément est
caché mais occupe toujours de l'espace) et collapse (utilisé principalement pour cacher les lignes d'un tableau et libérer leur espace, bien que son comportement soit
limité à certains contextes).
- Utilisation pour les animations : La propriété visibility est souvent combinée avec des animations CSS ou
JavaScript pour afficher ou masquer progressivement des éléments. Par exemple, vous pouvez utiliser visibility: hidden;
en conjonction avec opacity pour créer une transition fluide. Cependant, seule la visibilité est contrôlée ; la propriété n'implique pas de transitions visuelles par
elle-même.
- Accessibilité des éléments invisibles : Même lorsque visibility est définie sur hidden, l'élément est toujours accessible via le
DOM. Cela signifie que les lecteurs d'écran ou les interactions programmatiques peuvent encore détecter cet élément, ce qui peut
être un avantage ou un inconvénient selon les besoins d'accessibilité et de sécurité.
- Compatibilité avec les événements utilisateur : Lorsque visibility: hidden; est utilisé, l'élément est rendu non interactif : il ne répond pas aux clics,
aux survols ou aux autres événements utilisateur. Cela peut être utile pour désactiver temporairement une interaction tout en conservant la mise en page intacte.
- Valeur collapse spécifique aux tableaux : Avec visibility: collapse;, les lignes ou colonnes de tableaux sont masquées et l'espace qu'elles occupaient
est libéré, contrairement à hidden. Cependant, cette valeur ne fonctionne pas sur tous les types d'éléments. Son utilité reste limitée à des cas spécifiques liés aux structures
tabulaires.
- Impact sur les performances : La gestion de visibility a généralement un impact moindre sur les performances que display: none;, car le navigateur
n'a pas besoin de recalculer le rendu ou la mise en page complète. Cela en fait un choix efficace pour cacher des éléments lorsque la performance est critique.
- Contrôle conditionnel via les media queries ou le JavaScript : visibility peut être utilisée de manière conditionnelle avec des media queries pour
adapter l'affichage d'éléments selon la taille de l'écran. Par exemple, vous pouvez masquer certains contenus inutiles sur des écrans plus petits tout en préservant leur espace
pour des réajustements éventuels via JavaScript.
Dernière mise à jour : Dimanche, le 20 décembre 2015
