Was ist der Unterschied zwischen visibility:hidden und display:none?

Question

Die CSS-Regeln visibility:hidden y display:none führen beide dazu, dass das Element nicht sichtbar ist. Sind dies Synonyme?

Answer 1

Es gibt hier viele detaillierte Antworten, aber ich dachte, ich sollte dies hinzufügen, um die Zugänglichkeit anzusprechen, da es Auswirkungen hat.

display: none; y visibility: hidden; wird möglicherweise nicht von allen Bildschirmleseprogrammen gelesen. Bedenken Sie, was sehbehinderte Nutzer erleben werden.

In der Frage wird auch nach Synonymen gefragt. text-indent: -9999px; ist eine andere, die ungefähr gleichwertig ist. Der wichtige Unterschied bei text-indent ist, dass sie oft von Bildschirmlesegeräten gelesen wird. Das kann eine schlechte Erfahrung sein, da die Nutzer immer noch mit der Tabulatortaste auf den Link zugreifen können.

Für die Barrierefreiheit wird heute eine Kombination von Stilen verwendet, um ein Element auszublenden, während es für Bildschirmleser sichtbar ist.

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

Eine gute Praxis ist es, einen "Skip to content"-Link zum Anker des Hauptinhalts zu erstellen. Sehbehinderte Nutzer wollen sich wahrscheinlich nicht auf jeder Seite die gesamte Navigationsstruktur anhören. Machen Sie den Link visuell unsichtbar. Die Benutzer können einfach auf die Tabulatortaste drücken, um den Link aufzurufen.

Weitere Informationen über Barrierefreiheit und verborgene Inhalte finden Sie hier:

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

Answer 2

Alle anderen Antworten zusammenfassen:

Sichtbarkeit

Anzeige

Element mit Sichtbarkeit: versteckt, ist für alle praktischen Zwecke (Mauszeiger, Tastaturfokus, Screenreader) versteckt, nimmt aber dennoch Platz im gerenderten Markup ein

Element mit display:none, wird für alle praktischen Zwecke (Mauszeiger, Tastaturfokus, Screenreader) ausgeblendet und nimmt KEINEN Platz im gerenderten Markup ein

css-Übergänge können für Sichtbarkeitsänderungen angewendet werden

css-Übergänge können bei Anzeigeänderungen nicht angewendet werden

Sie können ein übergeordnetes Element sichtbar:versteckt machen, aber ein untergeordnetes Element mit Sichtbarkeit:sichtbar würde immer noch angezeigt werden.

Wenn das übergeordnete Element display:none ist, können die Kinder dies nicht überschreiben und sich selbst sichtbar machen.

Teil des DOM-Baums (so dass Sie ihn weiterhin mit DOM-Abfragen ansprechen können)

Teil des DOM-Baums (so dass Sie ihn weiterhin mit DOM-Abfragen ansprechen können)

Teil des Renderbaums

NICHT Teil des Renderbaums

Jede Neuordnung / jedes Layout im übergeordneten Element oder in den untergeordneten Elementen würde möglicherweise auch eine Neuordnung in diesen Elementen auslösen, da sie Teil des Renderbaums sind.

Ein Reflow/Layout im übergeordneten Element würde sich nicht auf diese Elemente auswirken, da sie nicht Teil des Renderbaums sind.

das Umschalten zwischen Sichtbarkeit: versteckt und sichtbar, würde möglicherweise keinen Reflow / Layout auslösen. (Laut diesem Kommentar tut es das: Was ist der Unterschied zwischen visibility:hidden und display:none? und möglicherweise auch hiernach https://developers.google.com/speed/docs/insights/browser-reflow )

das Umschalten zwischen display:none und display: (etwas anderes) würde zu einem Layout/Reflow führen, da dieses Element nun Teil des Renderingbaums werden würde

können Sie das Element über DOM-Methoden messen

Sie können das Element oder seine Nachkommen nicht mit DOM-Methoden messen

Wenn Sie eine große Anzahl von Elementen mit Sichtbarkeit: keine auf der Seite haben, könnte der Browser beim Rendern hängen bleiben, da alle diese Elemente Layout benötigen, obwohl sie nicht angezeigt werden

Wenn Sie eine große Anzahl von Elementen haben, die display:none verwenden, haben diese keinen Einfluss auf das Rendering, da sie nicht Teil des Renderingbaums sind.

Ressourcen:

• https://developers.google.com/speed/docs/insights/browser-reflow
• http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
• Leistungsunterschiede zwischen visibility:hidden und display:none

Weitere Informationen:

• Es gibt auch einige Besonderheiten bei der Browserunterstützung, aber sie scheinen sich auf sehr alte Browser zu beziehen und sind in den anderen Antworten enthalten, so dass ich sie hier nicht erörtere.
• Es gibt einige andere Alternativen, um Elemente auszublenden, wie Deckkraft oder absolute Positionierung außerhalb des Bildschirms. Sie alle wurden in der einen oder anderen Antwort bereits angesprochen und haben einige Nachteile.
• Diesem Kommentar zufolge ( Leistungsunterschiede zwischen visibility:hidden und display:none ), wenn Sie viele Elemente haben, die display:none verwenden, und Sie zu display: (etwas anderes) wechseln, wird es einen einzigen Reflow verursachen, während, wenn Sie mehrere visibility: hidden Elemente haben und Sie sie sichtbar machen, wird es für jedes Element einen Reflow verursachen. (Ich verstehe das nicht wirklich)

Answer 3

Ein weiterer Unterschied ist, dass visibility:hidden funktioniert in sehr, sehr alten Browsern, und display:none nicht:

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

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

Answer 4

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

Wirkungen und Nebenwirkungen von display: none :

• das Zielelement wird aus dem Dokumentfluss herausgenommen (hat keine Auswirkungen auf das Layout anderer Elemente);
• alle Nachkommen sind davon betroffen (werden auch nicht angezeigt und können sich nicht aus dieser Vererbung "herauswinden");
• Messungen können weder für das Zielelement noch für seine Nachkommen vorgenommen werden - sie werden überhaupt nicht gerendert, so dass ihre clientWidth , clientHeight , offsetWidth , offsetHeight , scrollWidth , scrollHeight , getBoundingClientRect() , getComputedStyle() alle zurück 0 s.

Wirkungen und Nebeneffekte von visibility: hidden :

• Das Zielelement ist nicht mehr sichtbar, wird aber nicht aus dem Fluss genommen und wirkt sich auf das Layout aus, indem es seinen normalen Platz einnimmt;
• innerText (aber nicht innerHTML ) des Zielelements und der Nachkommen gibt einen leeren String zurück.

Answer 5

Wie an anderer Stelle in diesem Stapel beschrieben, sind diese beiden Begriffe nicht gleichbedeutend. visibility:hidden lässt Platz auf der Seite, während display:none wird das Element vollständig ausgeblendet. Ich denke, es ist wichtig, darüber zu sprechen, wie sich dies auf die Kinder eines bestimmten Elements auswirkt. Wenn Sie Folgendes verwenden würden visibility:hidden dann können Sie die Kinder dieses Elements mit dem richtigen Styling anzeigen. Aber mit display:none Sie verstecken die Kinder unabhängig davon, ob Sie display: block | flex | inline | grid | inline-block oder nicht.