Vergleich verschiedener Möglichkeiten, Dinge in CSS zu verbergen

Sie würden denken, dass das Verstecken von Inhalten mit CSS ein unkompliziertes und gelöstes Problem ist, aber es gibt mehrere Lösungen, von denen jede einzigartig ist.

Entwickler verwenden am häufigsten Display: Keine, um den Inhalt auf der Seite zu verbergen. Leider ist diese Art, Inhalte zu verbergen, nicht kugelsicher, da dieser Inhalt jetzt für die Bildschirmleser „unzugänglich“ ist. Es ist verlockend, es zu verwenden, aber vor allem in Fällen, in denen etwas nur visuell versteckt sein soll, greifen Sie nicht danach.

Tatsache ist, dass es viele Möglichkeiten gibt, Dinge in CSS zu „verbergen“, jeweils ihre Vor- und Nachteile, die stark davon abhängen, wie es verwendet wird. Wir werden jede Technik hier überprüfen und die Dinge mit einer Zusammenfassung abschließen, die uns hilft, zu entscheiden, welche und wann.

Wie man Unterschiede zwischen den Techniken erfasst

Um einen Unterschied zwischen verschiedenen Arten zum Verstecken von Inhalten zu erkennen, müssen wir einige Metriken einführen. Metriken, mit denen wir die Methoden vergleichen werden. Ich habe mich entschlossen, das zu brechen, indem ich Fragen stellte, die sich auf vier bestimmte Bereiche konzentrieren, die Layout, Leistung und Zugänglichkeit beeinflussen:

1. Zugänglichkeit : Wird der versteckte Inhalt von einem Bildschirmleser gelesen?
2. Dokumentfluss : Wird sich das versteckte Element auf das Dokumentlayout auswirken?
3. Rendering : Wird das Box -Modell des versteckten Elements gerendert?
4. Ereignisauslöser: Erkennt das Element Klicks oder Fokus?

Jetzt, da wir unsere Kriterien aus dem Weg haben, vergleichen wir die Methoden. Wir werden wieder alles am Ende auf eine Weise zusammenstellen, die wir als Referenz für Entscheidungen verwenden können, wenn wir Dinge in CSS verstecken.

Methode 1: Die Anzeigeeigenschaft

Wir haben diesen Beitrag mit einer Vorsicht vor der Verwendung von Displays zum Ausblenden von Inhalten gestartet. Und wie wir festgestellt haben, bedeutet es, ein Element zu verwenden, um das Element überhaupt nicht zu erzeugen. Es ist im Dom, aber nie wirklich gerendert.

Das Element wird im Markup weiterhin angezeigt. Wenn Sie die Seite inspizieren, können Sie das Element sehen. Das Boxmodell wird weder auf der Seite generiert noch erscheinen, was auch für alle Kinder gilt.

Und was mehr ist, wenn das Element Ereignishörer hat - sagen Sie einen Klick oder einen Schweber -, werden sie sich überhaupt nicht registrieren. Und wie wir bereits besprochen haben, werden alle Inhalte von Bildschirmlesern ignoriert. Hier haben wir zwei sichtbare Tasten und eine mit Display versteckt: keine. Alle drei Schaltflächen haben Klick -Ereignisse, aber nur die beiden sichtbaren Schaltflächen rendern und registrieren die Klicks.

Anzeige ist die einzige Eigenschaft, die sich auf die Bildanfrage auswirkt. Wenn ein Bild -Tag (oder übergeordnetes Element) über eine Anzeigeeigenschaft auf keinem durch Inline -CSS oder per Selektor eingestellt ist, wird das Bild heruntergeladen . Wenn das Bild mit einer Hintergrundeigenschaft angewendet wird, wird es jedoch nicht heruntergeladen .

Dies ist der Fall, da der Parser das CSS nicht angewendet hat, wenn ein HTML -Dokument analysiert wird und ein -Tags begegnet. Wenn wir hingegen das Bild auf ein Element mit einer Hintergrundeigenschaft anwenden, wird das Bild nicht heruntergeladen, da der Parser das CSS, in dem das Bild aufgerufen wird, nicht angewendet hat. Dieses Verhalten wird über alle neuesten Browser abgestimmt. Die einzige Ausnahme ist IE 11, die Bilder in beiden Fällen herunterladen.

Methode 2: Die Sichtbarkeitseigenschaft

Wenn die Sichtbarkeitseigenschaft eines Elements auf versteckt ist, ist das Element "visuell versteckt". „Visuell versteckt“ zu sein, klingt sehr nach dem, was Display tut: Keine, aber es ist unglaublich anders, als das Element erzeugt und gerendert, aber unsichtbar ist. Dies bedeutet, dass das Boxmodell des Elements vorhanden ist und ihm Dimensionen verleiht, die weiterhin Platz auf dem Bildschirm einnehmen, obwohl es nicht da zu sein scheint.

Stellen Sie sich vor, Sie tragen einen unsichtbaren Umhang, der Sie für andere unsichtbar macht, aber Sie können trotzdem auf Dinge stoßen. Sie sind physisch dort, auch wenn Sie für das menschliche Auge unsichtbar sind.

Aber hier sind die Unterschiede zwischen „visuell verborgen“ und „nicht angezeigt“. Tatsächlich verhalten sich Elemente, die mit Sichtbarkeit und Anzeige versteckt sind, in Bezug auf Zugänglichkeit und Ereignisauslöser gleich. Unsichtbare Elemente sind für die Bildschirmleser nicht zugänglich und registrieren Sie keine Ereignisse, wie wir in der folgenden Demo genau wie das letzte Beispiel sind, aber lediglich Swaps Display: Keine mit Sichtbarkeit: versteckt.

Methode 3: Eigenschaft der Opazität

Die Opazitätseigenschaft beeinflusst nur den visuellen Aspekt des Elements. Wenn wir die Deckkraft eines Elements auf Null setzen, ist das Element vollständig transparent. Auch hier ist es sehr ähnlich wie die Sichtbarkeit: versteckt, wo wir einen unsichtbaren Umhang über das Element drapieren, wo es unsichtbar ist, aber immer noch physisch präsent ist.

Mit anderen Worten, was wir haben, ist ein hohles, transparentes Element, das wie jedes andere Element wirkt, nur es ist unsichtbar. Klingt sehr nach der Sichtbarkeitsmethode, oder? Der Unterschied besteht darin, dass ein vollständig transparentes Element für einen Bildschirmleser weiterhin zugänglich ist und wie im folgenden Beispiel Ereignisse registrieren kann, wie Klicks.

Methode 4: Die Positionseigenschaft

Das Schieben eines Elements mit absoluter Positionierung ist ein anderer Weg, wie Entwickler oft Dinge verbergen. Mit oben und links können wir das Element so weit vom Bildschirm abdrücken, dass es auf keinen Fall zu sehen ist. Es ist, als würde man das Keksglas außerhalb des Hauses verstecken, damit die Kinder (oder vielleicht Sie!) Sie nicht finden können.

"Absolut" ist hier das Schlüsselwort. Wenn wir die Position auf absolut setzen, wird ein Element aus dem Dokumentfluss herausgenommen, was eine Möglichkeit ist, zu sagen, dass es nicht mehr an seiner natürlichen Position in der DOM hält. Mit anderen Worten, die Seite reserviert keinen Platz dafür, was das Element visuell aus der Reihenfolge schlägt und es auf das nächste positionierte Element positioniert, wenn es eines gibt, oder das Dokumentwurzel, wenn nichts anderes.

Wir nutzen die absolute Positionierung, indem wir das „verborgene“ Element aus dem Dokumentfluss herausnehmen und es mit Werten von -9999px in Richtung der oberen Links ausgleichen.

 .versteckt {
  Position: absolut;
  Oben: -9999px;
  links: -9999px;
}

Wenn das versteckte Element fokussierbare Inhalte enthält, scrollt die Seite zum Element, wenn es sich im Fokus befindet, und erzeugt einen plötzlichen Sprung.

Methode 5: Die Klasse „visuell versteckt“

Bisher ist die Positionsmethode die am nächsten gelegene Methode, die wir zugänglich gesehen haben, um Dinge in CSS zu verbergen. Aber das Problem mit fokussierbaren Inhalten, die plötzliche Seitensprung verursachen, ist nicht großartig. Ein weiterer Ansatz zum zugänglichen Versteck kombiniert die absolute Positionierung, die Clip -Eigenschaft und den versteckten Überlauf. Scott O'Hara hat es 2017 wieder gebloggt.

 .visuell versteckt: nicht (: fokus): nicht (: aktiv) {
  Clip: Rect (0 0 0 0); 
  Clip-Pfad: Einschub (50%);
  Höhe: 1PX;
  Überlauf: versteckt;
  Position: absolut;
  weißer Raum: Nowrap; 
  Breite: 1PX;
}

Lassen Sie uns das niederlassen.

Wir müssen das Element aus dem Dokumentfluss entfernen. Der beste Weg, dies zu tun, ist die Verwendung von Position: Absolut. Dies wird das Element entfernen, aber wir werden es nicht vom Bildschirm schieben.

 .visuell versteckt {
  Position: absolut;
}

Wir können das Element ausblenden, indem wir die Eigenschaft Breite und Höhe auf Null setzen. Leider funktioniert das nicht, da einige Bildschirmleser Elemente ohne Breite und Höhe ignorieren. Wir können es auf den zweitniedrigsten Wert 1px einstellen. Das bedeutet, dass der Inhalt den Raum leicht überfließen lässt, sodass wir auch Überlauf benötigen: versteckt, um sicherzustellen, dass er nicht visuell überträgt.

 .visuell versteckt {
  Höhe: 1PX;
  Überlauf: versteckt;
  Position: absolut;
  Breite: 1PX;
}

Um dieses Ein-Pixel-Quadrat zu verbergen, können wir die CSS-Clipping-Eigenschaft verwenden. Es ist perfekt für diese Situation, da es keine Auswirkungen auf die Bildschirmleser hat. Der Inhalt ist da, ist aber wiederum visuell versteckt. Zu beachten ist, dass Clip zugunsten des Clip-Pfads veraltet war, aber noch benötigt wird, wenn wir ältere Versionen von Internet Explorer unterstützen müssen.

 .visuell versteckt {
  Clip: Rect (0 0 0 0);
  Clip-Pfad: Einschub (50%);
  Höhe: 1PX;
  Überlauf: versteckt;
  Position: absolut;
  Breite: 1PX;
}

Ein weiteres Stück des „visuell versteckten“ Klassenrätsel besteht darin, den übergrümischen, außerhalb des Bildschirms zugänglichen Textes anzusprechen, eine Kuriosität, die den weißen Abstand zwischen Wörtern beseitigt, wodurch sie wie eine große Reihe von Wörtern laut gelesen werden. Zum Beispiel wird „Welcome Bop Home“ als "WelcomeBackHome" vorgelesen.

Eine einfache Lösung für dieses Problem besteht darin, den weißen Raum festzulegen: Nowrap:

 .visuell versteckt {
  Clip: Rect (0 0 0 0);
  Clip-Pfad: Einschub (50%);
  Höhe: 1PX;
  Überlauf: versteckt;
  Position: absolut;
  weißer Raum: Nowrap;
  Breite: 1PX;
}

Und endlich! Das Letzte, was zu berücksichtigen ist, ist, ein bestimmtes Element mit nativen Fokus und aktiven Stellen zu ermöglichen, wenn sie im Fokus stehen, und gleichzeitig weiterhin andere Elemente wie Absätze anzeigen. Wir können die: Nicht-Pseudo-Selektor dafür verwenden.

 .visuell versteckt: nicht (: fokus): nicht (: aktiv) {
  Clip: Rect (0 0 0 0);
  Clip-Pfad: Einschub (50%);
  Höhe: 1PX;
  Überlauf: versteckt;
  Position: absolut;
  weißer Raum: Nowrap;
  Breite: 1PX;
}

Ehrenwerte Erwähnungen

Es gibt noch mehr Methoden als die fünf, die wir abgedeckt haben. Beispielsweise kann die textinverträgende Eigenschaft den Text wie die Positionsmethode aus dem Bildschirm drücken:

 .versteckt {
  textindent: -9999em;
}

Leider schleudert dieser Ansatz nicht mit RTL -Schreibmodi. Das macht es weniger anpassungsfähig als andere Lösungen, die wir abgedeckt haben.

Eine andere Methode ist die Verwendung von Transformation, um das Element aus dem Weg zu skalieren oder zu verschieben. Es funktioniert gleich - nur visuell - wie Deckkraft.

 .versteckt {
  Transformation: Skala (0);
}

Lassen Sie uns alles zusammenstellen!

Wir haben eine Lösung erreicht, die Inhalte visuell ausblendet, aber dennoch zugänglich ist. Sollten Sie dann aufhören, Anzeige zu verwenden: Keine? Nein, dies ist immer noch der beste Weg, um ein Element vollständig zu verbergen (visuell und zugänglich).

Das heißt, es ist erwähnenswert, dass das Attribut von Aria-Hidden = "True" den Inhalt vor den Bildschirmlesern, jedoch nicht visuell, versteckt das Attribut von Aria-Hidden = "True" aus dem Bildschirmleser, wenn Sie ein entgegengesetztes Ergebnis erzielen möchten.

Hier ist eine vollständige Tabelle, die alle Ansätze vergleicht. Verwenden Sie es, um Ihre Entscheidungen darüber zu leiten, wie Sie sich das nächste Mal in dieser Situation befinden.

Das obige ist der detaillierte Inhalt vonVergleich verschiedener Möglichkeiten, Dinge in CSS zu verbergen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!