Réponses:
display:nonesignifie que la balise en question n'apparaîtra pas du tout sur la page (bien que vous puissiez toujours interagir avec elle via le dom). Aucun espace ne lui sera alloué entre les autres balises.
visibility:hiddensignifie que contrairement à display:none, la balise n'est pas visible, mais un espace lui est alloué sur la page. La balise est rendue, elle n'est tout simplement pas visible sur la page.
Par exemple:
test | <span style="[style-tag-value]">Appropriate style in this tag</span> | testRemplacer [style-tag-value]par des display:nonerésultats dans:
test | | testRemplacer [style-tag-value]par des visibility:hiddenrésultats dans:
test | | testvisibility: hiddenet display: nonesera tout aussi performant car ils redéclenchent la disposition, la peinture et le composite. Cependant, opacity: 0est fonctionnellement équivalent à visibility: hiddenet ne redéclenche pas l'étape de mise en page, donc je conseillerais de l'utiliser si cela ne vous dérange pas que l'espace vide soit encore alloué (sinon utilisez display: none).
opacity: 0doit être utilisé avec prudence lorsqu'il s'agit d'entrées ou de boutons, car ils existeraient encore et pourraient provoquer des interactions utilisateur étranges.
Ce ne sont pas des synonymes.
display:none supprime l'élément du flux normal de la page, permettant aux autres éléments de se remplir.
visibility:hidden laisse l'élément dans le flux normal de la page tel qu'il occupe toujours de l'espace.
Imaginez que vous êtes en ligne pour faire un tour dans un parc d'attractions et que quelqu'un dans la file devient si tapageur que la sécurité les arrache de la ligne. Tout le monde en ligne avancera alors d'une position pour remplir l'emplacement désormais vide. C'est comme ça display:none.
Comparez cela à la situation similaire, mais que quelqu'un devant vous met une cape d'invisibilité. En regardant la ligne, il semblerait qu'il y ait un espace vide, mais les gens ne peuvent pas vraiment remplir cet espace vide parce que quelqu'un est toujours là. C'est comme ça visibility:hidden.
Une chose qui mérite d'être ajoutée, bien que cela n'ait pas été demandé, est qu'il existe une troisième option pour rendre l'objet complètement transparent. Considérer:
1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.(Assurez-vous de cliquer sur le bouton "Exécuter l'extrait de code" ci-dessus pour voir le résultat.)
La différence entre 1 et 2 a déjà été soulignée (à savoir, 2 prend toujours de la place). Cependant, il y a une différence entre 2 et 3: dans le cas 3, la souris passera toujours à la main lors du survol du lien, et l'utilisateur pourra toujours cliquer sur le lien, et les événements Javascript continueront de se déclencher sur le lien. Ce n'est généralement pas le comportement que vous souhaitez (mais peut-être que c'est parfois le cas?).
Une autre différence est que si vous sélectionnez le texte, puis copiez / collez en texte brut, vous obtenez ce qui suit:
1st link.
2nd link.
3rd unseen link.Dans le cas 3, le texte est copié. Peut-être que cela serait utile pour certains types de filigranes, ou si vous vouliez masquer un avis de droit d'auteur qui s'afficherait si un utilisateur imprudent copiait / collait votre contenu?
Il y a une grande différence en ce qui concerne les nœuds enfants. Par exemple: si vous avez un div parent et un div enfant imbriqué. Donc, si vous écrivez comme ceci:
<div id="parent" style="display:none;">
<div id="child" style="display:block;"></div>
</div>Dans ce cas, aucun des divs ne sera visible. Mais si vous écrivez comme ceci:
<div id="parent" style="visibility:hidden;">
<div id="child" style="visibility:visible;"></div>
</div>Ensuite, le div enfant sera visible tandis que le div parent ne sera pas affiché.
display: none supprime complètement l'élément de la page et la page est construite comme si l'élément n'était pas là du tout.
Visibility: hidden laisse de l'espace dans le flux de documents même si vous ne pouvez plus le voir.
Cela peut ou non faire une grande différence selon ce que vous faites.
Avec visibility:hiddenl'objet prend toujours la hauteur verticale sur la page. Avec display:noneelle est complètement supprimée. Si vous avez du texte sous une image et que vous le faites display:none, ce texte se déplacera vers le haut pour remplir l'espace où se trouvait l'image. Si vous faites de la visibilité: caché le texte restera au même endroit.
display:nonemasquera l'élément et réduira l'espace occupé, tandis que visibility:hiddenmasquera l'élément et préservera l'espace des éléments. affichage: aucun n'affecte également certaines des propriétés disponibles à partir de javascript dans les anciennes versions d'IE et de Safari.
En plus de toutes les autres réponses, il existe une différence importante pour IE8: si vous utilisez display:noneet essayez d'obtenir la largeur ou la hauteur de l'élément, IE8 renvoie 0 (tandis que les autres navigateurs renvoient les tailles réelles). IE8 renvoie la largeur ou la hauteur correcte uniquement pour visibility:hidden.
display: none; Il ne sera pas disponible sur la page et n'occupe aucun espace.
visibility: hidden; il cache un élément, mais il occupera toujours le même espace qu'auparavant. L'élément sera masqué, mais affectera quand même la disposition.
visibility: hiddenpréserver l'espace, alors que display: nonene préserve pas l'espace.
Afficher aucun exemple: https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none
Exemple de visibilité cachée: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility
Si la propriété de visibilité est définie sur "hidden", le navigateur prendra toujours de l'espace sur la page pour le contenu même s'il est invisible.
Mais lorsque nous définissons un objet sur "display:none", le navigateur n'alloue pas d'espace sur la page pour son contenu.
Exemple:
<div style="display:none">
Content not display on screen and even space not taken.
</div>
<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>Une autre différence est que cela visibility:hiddenfonctionne dans des navigateurs vraiment très anciens et display:nonene:
La différence va au-delà du style et se reflète dans la façon dont les éléments se comportent lorsqu'ils sont manipulés avec JavaScript.
Effets et effets secondaires de display: none:
clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(), tout retour 0s.Effets et effets secondaires de visibility: hidden:
innerText(mais pas innerHTML) de l'élément cible et des descendants renvoie une chaîne vide.display:none;n'affichera pas l'élément et n'allouera pas d'espace pour l'élément sur la page alors visibility:hidden;qu'il n'affichera pas l'élément sur la page mais attribuera de l'espace sur la page. Nous pouvons accéder à l'élément dans DOM dans les deux cas. Pour mieux le comprendre, veuillez regarder le code suivant:
affichage: aucun vs visibilité: caché
Il y a beaucoup de réponses détaillées ici, mais j'ai pensé que je devrais ajouter ceci pour aborder l'accessibilité car il y a des implications.
display: none;et visibility: hidden;peuvent ne pas être lus par tous les logiciels de lecture d'écran. Gardez à l'esprit ce que ressentiront les utilisateurs malvoyants.
La question porte également sur les synonymes. text-indent: -9999px;est un autre qui est à peu près équivalent. La différence importante avec text-indentest qu'il sera souvent lu par les lecteurs d'écran. Cela peut être un peu une mauvaise expérience car les utilisateurs peuvent toujours accéder au lien.
Pour l'accessibilité, ce que je vois utilisé aujourd'hui est une combinaison de styles pour masquer un élément tout en étant visible pour les lecteurs d'écran.
{
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}Une bonne pratique consiste à créer un lien "Passer au contenu" vers l'ancre du corps principal du contenu. Les utilisateurs malvoyants ne veulent probablement pas écouter votre arborescence de navigation complète sur chaque page. Rendez le lien visuellement caché. Les utilisateurs peuvent simplement cliquer sur l'onglet pour accéder au lien.
Pour plus d'informations sur l'accessibilité et le contenu masqué, voir: