Propriétés CSS: affichage et visibilité

Quelle est la différence entre les propriétés d'affichage et de visibilité?

La visibilitypropriété indique uniquement au navigateur s'il doit afficher un élément ou non. Il est soit visible ( visible- vous pouvez le voir), soit invisible ( hidden- vous ne pouvez pas le voir).

La displaypropriété indique au navigateur comment dessiner et afficher un élément, le cas échéant - s'il doit être affiché comme un inlineélément (c'est-à-dire qu'il coule avec du texte et d'autres éléments en ligne) ou un blockélément -level (c'est-à-dire qu'il a des propriétés de hauteur et de largeur qui vous pouvez définir, il est flottables, etc.), ou inline-block(il agit comme une boîte de bloc , mais est mis en ligne à la place) et quelques autres ( list-item, table, table-row, table-cell, flex, etc.).

Lorsque vous définissez un élément sur display: blockmais également défini visibility: hidden, le navigateur le traite toujours comme un élément de bloc, sauf que vous ne le voyez tout simplement pas. Un peu comme la façon dont vous empilez une boîte rouge au-dessus d'une boîte invisible: la boîte rouge a l'air de flotter dans les airs alors qu'en réalité elle est posée sur une boîte physique que vous ne pouvez pas voir.

En d'autres termes, cela signifie que les éléments avec displayqui n'est pas noneaffecteront toujours le flux d'éléments dans une page, qu'ils soient visibles ou non. Les boîtes entourant un élément avec display: nonese comporteront comme si cet élément n'était jamais là (bien qu'il reste dans le DOM).

visibilité: cachée;

• l'élément ne sera pas peint ET ne recevra pas d'événements de clic / tactile, mais l'espace qu'il prend est toujours occupé
• car il est toujours là à des fins de mise en page, vous pouvez le mesurer sans qu'il soit visible
• la modification du contenu coûtera toujours du temps à la redistribution / mise en page de la page
• la visibilité est héritée, ce qui signifie que vous pouvez rendre les sous-enfants visibles en leur donnant une visibilité: visible;

affichage: aucun;

• fera en sorte que l'élément ne participe pas au flux / mise en page
• peut (selon le navigateur utilisé) tuer les films Flash et les iframes (qui redémarreront / se rechargeront lors de leur affichage à nouveau), bien que vous puissiez empêcher que cela se produise avec les iframes
• l'élément ne prendra pas de place. à des fins de mise en page, c'est comme s'il n'existait pas
• fera en sorte que certains navigateurs / appareils (comme l'iPad) reprennent directement la mémoire utilisée par cet élément, provoquant de petits hickups si vous basculez entre aucune et une autre valeur pendant les animations

notes supplémentaires:

• images dans le contenu caché: dans tous les navigateurs courants, les images sont toujours chargées, même si elles se trouvent dans un élément avec visibilité: caché; ou affichage: aucun;
• polices dans le contenu masqué: les navigateurs Webkit (Chrome / Safari) peuvent retarder le chargement des polices personnalisées qui ne sont utilisées que dans les éléments masqués, y compris via la visibilité ou l'affichage. Cela peut vous amener à mesurer des éléments qui utilisent encore une police de secours jusqu'à ce que la police personnalisée soit chargée.

display: none supprime l'élément du flux du html alors que visible: hidden ne le fait pas.

affichage: aucun; supprimera le style visuel / espace physique des éléments DOM du DOM, alors que visible: hidden; ne supprimera pas l'élément, mais le masquera simplement. Ainsi, un div occupant 300px d'espace vertical dans votre DOM occupera TOUJOURS 300px de largeur verticale lorsqu'il est réglé sur visibilité: hidden; mais lorsqu'il est réglé pour afficher: aucun; ses styles visuels et l'espace qu'il occupe sont cachés et l'espace est alors "libéré" faute d'un meilleur mot.

[EDIT] - Il y a quelque temps que j'ai écrit ce qui précède, et que je ne sois pas suffisamment informé ou que je passe une mauvaise journée, je ne sais pas, mais la réalité est que l'élément n'est JAMAIS retiré de la hiérarchie DOM. Tous les «styles» d'affichage au niveau du bloc sont complètement «masqués» lors de l'utilisation de display: none, alors qu'avec visibilité: hidden; l'élément lui-même est caché mais il occupe toujours un espace visuel dans le DOM. J'espère que cela clarifie les choses