Was ist der Unterschied zwischen Sichtbarkeit: versteckt und Anzeige: keine?

Die CSS-Regeln visibility:hiddenund display:nonebeide führen dazu, dass das Element nicht sichtbar ist. Sind das Synonyme?

display:nonebedeutet, dass das betreffende Tag überhaupt nicht auf der Seite angezeigt wird (obwohl Sie weiterhin über den Dom damit interagieren können). Zwischen den anderen Tags wird kein Speicherplatz zugewiesen.

visibility:hiddenbedeutet, dass display:nonedas Tag im Gegensatz dazu nicht sichtbar ist, aber auf der Seite Platz dafür zugewiesen wird. Das Tag wird gerendert und auf der Seite nicht angezeigt.

Zum Beispiel:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

Ersetzen [style-tag-value]durch display:noneErgebnisse in:

test |   | test

Ersetzen [style-tag-value]durch visibility:hiddenErgebnisse in:

test |                        | test

Sie sind keine Synonyme.

display:none Entfernt das Element aus dem normalen Seitenfluss, sodass andere Elemente ausgefüllt werden können.

visibility:hidden Belässt das Element im normalen Fluss der Seite, sodass noch Platz belegt wird.

Stellen Sie sich vor, Sie stehen für eine Fahrt in einem Vergnügungspark in der Schlange und jemand in der Schlange wird so laut, dass die Sicherheit ihn aus der Schlange holt. Jeder in der Reihe bewegt sich dann um eine Position vorwärts, um den jetzt leeren Platz zu füllen. Das ist wie display:none.

Vergleichen Sie dies mit der ähnlichen Situation, aber dass jemand vor Ihnen einen Unsichtbarkeitsumhang anzieht. Beim Betrachten der Linie sieht es so aus, als ob es einen leeren Raum gibt, aber die Leute können diesen leer aussehenden Raum nicht wirklich füllen, weil noch jemand da ist. Das ist wie visibility:hidden.

Eine Sache, die hinzugefügt werden sollte, obwohl sie nicht gefragt wurde, ist, dass es eine dritte Möglichkeit gibt, das Objekt vollständig transparent zu machen. Erwägen:

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.

(Klicken Sie oben auf die Schaltfläche "Code-Snippet ausführen", um das Ergebnis anzuzeigen.)

Auf den Unterschied zwischen 1 und 2 wurde bereits hingewiesen (2 nimmt immer noch Platz ein). Es gibt jedoch einen Unterschied zwischen 2 und 3: In Fall 3 wechselt die Maus immer noch zur Hand, wenn Sie mit der Maus über den Link fahren, und der Benutzer kann weiterhin auf den Link klicken, und Javascript-Ereignisse werden weiterhin auf den Link ausgelöst. Dies ist normalerweise nicht das gewünschte Verhalten (aber vielleicht manchmal?).

Ein weiterer Unterschied besteht darin, dass Sie Folgendes auswählen, wenn Sie den Text auswählen und dann als einfachen Text kopieren / einfügen:

1st link.
2nd  link.
3rd unseen link.

In Fall 3 wird der Text kopiert. Vielleicht wäre dies für eine Art Wasserzeichen nützlich, oder wenn Sie einen Copyright-Hinweis ausblenden möchten, der angezeigt wird, wenn ein unachtsamer Benutzer Ihren Inhalt kopiert / einfügt?

display:none Entfernt das Element aus dem Layoutfluss.

visibility:hidden versteckt es, verlässt aber den Raum.

Es gibt einen großen Unterschied, wenn es um untergeordnete Knoten geht. Zum Beispiel: Wenn Sie ein übergeordnetes Div und ein verschachteltes untergeordnetes Div haben. Wenn Sie also so schreiben:

<div id="parent" style="display:none;">
    <div id="child" style="display:block;"></div>
</div>

In diesem Fall ist keine der Divs sichtbar. Aber wenn Sie so schreiben:

<div id="parent" style="visibility:hidden;">
    <div id="child" style="visibility:visible;"></div>
</div>

Dann ist das untergeordnete Div sichtbar, während das übergeordnete Div nicht angezeigt wird.

Sie sind keine Synonyme - display: noneentfernt das Element aus dem Seitenfluss und der Rest der Seite fließt, als wäre es nicht da.

visibility: hidden Blendet das Element vor der Ansicht aus, nicht jedoch den Seitenfluss, sodass auf der Seite Platz dafür bleibt.

display: none Entfernt das Element vollständig von der Seite, und die Seite wird so erstellt, als ob das Element überhaupt nicht vorhanden wäre.

Visibility: hidden Lässt den Platz im Dokumentfluss, obwohl Sie ihn nicht mehr sehen können.

Dies kann einen großen Unterschied machen oder auch nicht, je nachdem, was Sie tun.

Mit visibility:hiddendem Objekt nimmt noch vertikale Höhe auf der Seite ein. Damit ist display:nonees komplett entfernt. Wenn Sie Text unter einem Bild haben und dies tun display:none, wird dieser Text nach oben verschoben, um den Bereich zu füllen, in dem sich das Bild befand. Wenn Sie Sichtbarkeit tun: Ausgeblendet bleibt der Text an derselben Stelle.

display:noneversteckt das Element und reduziert den Platz, den es einnimmt, während visibility:hiddendas Element ausgeblendet wird und der Raum des Elements erhalten bleibt. Anzeige: Keine wirkt sich auch auf einige der Eigenschaften aus, die in älteren Versionen von IE und Safari in Javascript verfügbar sind.

Zusätzlich zu allen anderen Antworten gibt es einen wichtigen Unterschied für IE8: Wenn Sie display:nonedie Breite oder Höhe des Elements verwenden und versuchen, diese abzurufen, gibt IE8 0 zurück (während andere Browser die tatsächlichen Größen zurückgeben). IE8 gibt nur für die korrekte Breite oder Höhe zurück visibility:hidden.

visibility:hiddenbewahrt den Raum; display:nonenicht.

display: none; 

Es ist auf der Seite nicht verfügbar und belegt keinen Platz.

visibility: hidden; 

Es verbirgt ein Element, nimmt aber immer noch den gleichen Platz ein wie zuvor. Das Element wird ausgeblendet, wirkt sich jedoch auf das Layout aus.

visibility: hiddenBewahren Sie den Raum, während display: noneder Raum nicht erhalten bleibt.

Anzeige keine Beispiel: https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none

Beispiel für versteckte Sichtbarkeit: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

Wenn die Sichtbarkeitseigenschaft festgelegt ist, "hidden"nimmt der Browser auf der Seite weiterhin Platz für den Inhalt ein, obwohl dieser unsichtbar ist.
Wenn wir jedoch ein Objekt auf festlegen, "display:none"weist der Browser der Seite keinen Speicherplatz für dessen Inhalt zu.

Beispiel:

<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>

Details anzeigen

visibility:hidden behält das Element auf der Seite bei und belegt diesen Platz, wird dem Benutzer jedoch nicht angezeigt.

display:none wird auf der Seite nicht verfügbar sein und belegt keinen Platz.

Ein weiterer Unterschied besteht darin, dass er visibility:hiddenin sehr, sehr alten Browsern display:nonefunktioniert und nicht:

https://www.w3schools.com/cssref/pr_class_visibility.asp

https://www.w3schools.com/cssref/pr_class_display.asp

Der Unterschied geht über den Stil hinaus und spiegelt sich darin wider, wie sich die Elemente verhalten, wenn sie mit JavaScript bearbeitet werden.

Wirkungen und Nebenwirkungen von display: none:

• Das Zielelement wird aus dem Dokumentfluss entfernt (hat keinen Einfluss auf das Layout anderer Elemente).
• Alle Nachkommen sind betroffen (werden auch nicht angezeigt und können aus dieser Vererbung nicht „herausschnappen“).
• noch für seine Nachkomme Messungen nicht für das Zielelement gemacht werden - sie sind überhaupt nicht wiedergegeben, so dass sie clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(), alle Rückkehr 0s.

Wirkungen und Nebenwirkungen von visibility: hidden:

• Das Zielelement ist nicht sichtbar, wird jedoch nicht aus dem Fluss entfernt und wirkt sich auf das Layout aus, da es seinen normalen Platz einnimmt.
• innerText(aber nicht innerHTML) des Zielelements und der Nachkommen gibt eine leere Zeichenfolge zurück.

display:none;Das Element wird weder angezeigt, noch wird Platz für das Element auf der Seite zugewiesen, während das Element auf der Seite visibility:hidden;nicht angezeigt wird, sondern Platz auf der Seite zugewiesen wird. In beiden Fällen können wir auf das Element in DOM zugreifen. Um es besser zu verstehen, schauen Sie sich bitte den folgenden Code an: Anzeige: keine vs Sichtbarkeit: versteckt

Hier gibt es viele detaillierte Antworten, aber ich dachte, ich sollte diese hinzufügen, um die Barrierefreiheit zu verbessern, da dies Auswirkungen hat.

display: none;und wird visibility: hidden;möglicherweise nicht von allen Bildschirmleseprogrammen gelesen. Denken Sie daran, was Benutzer mit Sehbehinderung erleben werden.

Die Frage fragt auch nach Synonymen. text-indent: -9999px;ist eine andere, die in etwa gleichwertig ist. Der wichtige Unterschied text-indentbesteht darin, dass es häufig von Bildschirmlesern gelesen wird. Es kann eine schlechte Erfahrung sein, da Benutzer weiterhin auf den Link zugreifen können.

Für die Barrierefreiheit wird heute eine Kombination von Stilen verwendet, um ein Element auszublenden und gleichzeitig für Bildschirmleser sichtbar zu sein.

{
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

Eine gute Vorgehensweise besteht darin, einen Link "Zum Inhalt springen" zum Anker des Hauptinhalts zu erstellen. Sehbehinderte Benutzer möchten wahrscheinlich nicht auf jeder einzelnen Seite Ihren vollständigen Navigationsbaum anhören. Machen Sie den Link visuell ausgeblendet. Benutzer können einfach auf die Tabulatortaste klicken, um auf den Link zuzugreifen.

Weitere Informationen zu Barrierefreiheit und versteckten Inhalten finden Sie unter:

• https://webaim.org/techniques/css/invisiblecontent/
• https://webaim.org/techniques/skipnav/