5 Möglichkeiten, Seitenelemente mit CSS auszublenden

Es gibt viele Möglichkeiten, Seitenelemente mithilfe von CSS auszublenden. Sie können die Deckkraft auf 0, die Sichtbarkeit auf „Ausgeblendet“, die Anzeige auf „Keine“ oder die Position auf „Absolut“ setzen und die Position auf den unsichtbaren Bereich festlegen.

Haben Sie sich jemals gefragt, warum wir so viele Techniken haben, um Elemente zu verbergen, aber alle den gleichen Effekt zu erzielen scheinen? Tatsächlich weist jede Methode einige subtile Unterschiede zu den anderen auf, und diese Unterschiede bestimmen, welche Methode in einer bestimmten Situation verwendet wird. In diesem Tutorial werden die kleinen Unterschiede behandelt, die Sie beachten müssen, damit Sie je nach Situation auswählen können, welche der oben genannten Methoden zum Ausblenden von Elementen ausgewählt werden soll.

Deckkraft

Das Attribut „Deckkraft“ bedeutet, die Transparenz eines Elements festzulegen. Es ist nicht dazu gedacht, den Begrenzungsrahmen eines Elements zu ändern. Das bedeutet, dass das Element nur optisch ausgeblendet wird, wenn die Deckkraft auf 0 gesetzt wird. Das Element selbst nimmt weiterhin seine eigene Position ein und trägt zum Layout der Webseite bei. Es reagiert auch auf Benutzerinteraktionen.

.hide {
opacity: 0;
}

Wenn Sie vorhaben, das Opazitätsattribut zum Ausblenden von Elementen in Bildschirmlesesoftware zu verwenden, ist dies leider nicht der Fall. Sie können dies nicht tun. Das Element und sein gesamter Inhalt werden von Screenreadern gelesen, genau wie andere Elemente auf der Webseite. Mit anderen Worten: Elemente verhalten sich, als wären sie undurchsichtig.

Ich möchte Sie auch daran erinnern, dass mit der Eigenschaft „Opazität“ einige tolle Animationen erzielt werden können. Jedes Element mit einem Opazitätsattributwert kleiner als 1 erstellt auch einen neuen Stapelkontext.

Wenn Sie mit der Maus über den ausgeblendeten zweiten Block fahren, wechselt der Elementstatus sanft von vollständig transparent zu vollständig undurchsichtig. Die Cursoreigenschaft des Blocks ist außerdem auf „Pointer“ gesetzt, was anzeigt, dass der Benutzer mit ihm interagieren kann.

Sichtbarkeit

Das zweite Attribut, über das es zu sprechen gilt, ist die Sichtbarkeit. Wenn Sie den Wert auf „hidden“ setzen, wird unser Element ausgeblendet. Ebenso wie das Opazitätsattribut haben ausgeblendete Elemente weiterhin Auswirkungen auf das Layout unserer Webseite. Der einzige Unterschied zur Opazität besteht darin, dass sie nicht auf Benutzerinteraktionen reagiert. Darüber hinaus werden Elemente in der Bildschirmlesesoftware ausgeblendet.

Dieses Attribut kann auch Animationseffekte erzielen, sofern sein Anfangs- und Endzustand unterschiedlich sind. Dadurch wird sichergestellt, dass die Übergangsanimation zwischen Sichtbarkeitsstatuswechseln zeitlich reibungslos erfolgen kann (tatsächlich kann dies verwendet werden, um mit „hidden“ eine verzögerte Anzeige und Ausblendung von Elementen zu implementieren – Anmerkung des Übersetzers).

.hide {
Sichtbarkeit: versteckt;
}

Beachten Sie, dass, wenn die Sichtbarkeit eines Elements auf ausgeblendet eingestellt ist und Sie eines seiner Nachkommenelemente anzeigen möchten, nur Setzen Sie einfach explizit die Sichtbarkeit dieses Elements auf sichtbar (wie .o-hide p im Beispiel – Anmerkung des Übersetzers). Bewegen Sie den Mauszeiger nur über das ausgeblendete Element und nicht über die Zahl im p-Tag. Sie werden feststellen, dass sich Ihr Mauszeiger nicht in einen Finger verwandelt. Wenn Sie zu diesem Zeitpunkt mit der Maus klicken, wird Ihr Klickereignis nicht ausgelöst.

Das

-Tag innerhalb des

-Tags kann weiterhin alle Mausereignisse erfassen. Sobald Sie mit der Maus über den Text fahren, wird

sichtbar und die Veranstaltungsanmeldung wird wirksam.

Anzeige

Das Anzeigeattribut verbirgt das Element wirklich entsprechend der Bedeutung des Wortes. Wenn Sie die Anzeigeeigenschaft auf „Keine“ setzen, wird sichergestellt, dass das Element nicht sichtbar ist und nicht einmal das Boxmodell generiert wird. Mit diesem Attribut belegen ausgeblendete Elemente keinen Platz. Darüber hinaus ist jede direkte Benutzerinteraktion am Element wirkungslos, sobald die Anzeige auf „Keine“ gesetzt ist. Darüber hinaus liest die Bildschirmlesesoftware den Inhalt des Elements nicht. Auf diese Weise entsteht der Effekt, als ob das Element überhaupt nicht existierte.

Alle Nachkommen dieses Elements werden ebenfalls ausgeblendet. Das Hinzufügen einer Übergangsanimation zu dieser Eigenschaft hat keine Auswirkung; jeder Wechsel zwischen den verschiedenen Statuswerten wird immer sofort wirksam.

Bitte beachten Sie jedoch, dass auf dieses Element weiterhin über das DOM zugegriffen werden kann. Sie können es also wie jedes andere Element über das DOM manipulieren.

.hide {
display: none;
}

Sie werden sehen, dass sich im zweiten Blockelement ein

befindet. Die eigene Anzeigeeigenschaft ist auf „Blockieren“ eingestellt, sie ist jedoch weiterhin unsichtbar. Dies ist ein weiterer Unterschied zwischen Visibility:hidden und Display:none. Im vorherigen Beispiel kann die explizite Einstellung der Sichtbarkeit eines Nachkommenelements auf „Sichtbar“ dazu führen, dass es sichtbar ist. Dies ist jedoch bei display nicht der Fall. Unabhängig vom eigenen Anzeigewert sind alle Elemente sichtbar, solange die Anzeige des Vorgängerelements „none“ ist sichtbar. Unsichtbar.

Bewegen Sie nun Ihre Maus einige Male über das erste Blockelement und klicken Sie darauf. Durch diesen Vorgang wird ein zweites Blockelement angezeigt, dessen Nummer eine Zahl größer als 0 ist. Denn selbst wenn ein Element so eingestellt ist, dass es für den Benutzer nicht sichtbar ist, kann es dennoch über JavaScript manipuliert werden.

Position

Angenommen, es gibt ein Element, mit dem Sie interagieren möchten, aber Sie möchten nicht, dass es das Layout Ihrer Webseite beeinflusst. Es gibt keine geeigneten Attribute, um mit dieser Situation umzugehen (Deckkraft und Sichtbarkeit wirken sich auf das Layout aus, die Anzeige jedoch schon). hat keinen Einfluss auf das Layout, kann aber nicht direkt interagieren (Anmerkung des Übersetzers). In diesem Fall kommt lediglich eine Verschiebung des Elements aus dem sichtbaren Bereich in Betracht. Diese Methode hat keinen Einfluss auf das Layout und sorgt dafür, dass die Elemente funktionsfähig bleiben. Hier ist das CSS, das diesen Ansatz verwendet:

.hide {
position: absolute;
top: -9999px;
left: -9999px;
}

Das Hauptprinzip dieser Methode besteht darin, den oberen und linken Rand des Elements auf einen ausreichend großen negativen Wert zu setzen, um es auf dem Bildschirm unsichtbar zu machen. Ein Vorteil (oder potenzieller Nachteil) der Verwendung dieser Technik besteht darin, dass der Inhalt der darin verborgenen Elemente von einer Bildschirmlesesoftware gelesen werden kann. Dies ist völlig verständlich, da Sie das Element einfach aus dem sichtbaren Bereich verschieben, sodass der Benutzer es nicht sehen kann.

Sie sollten diese Methode vermeiden, um fokussierbare Elemente auszublenden, da dies zu einem unvorhersehbaren Fokuswechsel führt, wenn der Benutzer diesem Element den Fokus gibt. Diese Methode wird häufig beim Erstellen benutzerdefinierter Kontrollkästchen und Optionsfelder verwendet. (Verwenden Sie DOM, um Kontrollkästchen und Optionsfelder zu simulieren, aber verwenden Sie diese Methode, um die echten Kontrollkästchen und Optionsfelder auszublenden, um den Fokuswechsel zu „empfangen“ – Anmerkung des Übersetzers)

Clip-Pfad

Eine andere Möglichkeit, Elemente auszublenden, besteht darin, sie auszuschneiden. Bisher konnte dies über die Eigenschaft „clip“ erreicht werden, diese Eigenschaft wurde jedoch zugunsten einer besseren Eigenschaft namens „clip-path“ veraltet. Lesen Sie Nitish Kumars aktuellen SitePoint-Artikel „Einführung in das Attribut „clip-path““, um mehr über die fortgeschrittenere Verwendung dieses Attributs zu erfahren.

Denken Sie daran, dass die Clip-Pfad-Eigenschaft in IE oder Edge noch nicht vollständig unterstützt wird. Wenn Sie externe SVG-Dateien in Ihrem Clip-Pfad verwenden möchten, ist die Browserunterstützung noch geringer. Der Code zum Ausblenden eines Elements mithilfe des Clip-Path-Attributs sieht wie folgt aus:

.hide {
clip-path: polygon(0px 0px,0px ​​​​0px,0px ​​​​0px, 0px ​​0px);
}

Wenn Sie mit der Maus über das erste Element fahren, kann es sich immer noch auf das zweite Element auswirken, auch wenn das zweite Element per Clip-Pfad ausgeblendet ist. Wenn Sie darauf klicken, wird die ausgeblendete Klasse entfernt und unser Element von dieser Position aus sichtbar gemacht. Text in versteckten Elementen kann weiterhin von Bildschirmlesesoftware gelesen werden. Viele WordPress-Sites verwenden Clip-Path oder den vorherigen Clip, um Text zu implementieren, der speziell für Bildschirmlesesoftware bereitgestellt wird.

Obwohl unser Element selbst nicht mehr sichtbar ist, nimmt es immer noch die Größe des Rechtecks ​​ein, das es einnehmen sollte, und die Elemente um es herum verhalten sich so, als ob es sichtbar wäre. Denken Sie daran, dass Benutzerinteraktionen wie Mouseovers oder Klicks außerhalb des Clipping-Bereichs keine Wirkung haben. In unserem Fall beträgt die Größe des Beschneidungsbereichs Null, was bedeutet, dass der Benutzer nicht direkt mit dem ausgeblendeten Element interagieren kann. Darüber hinaus ermöglicht diese Eigenschaft die Verwendung verschiedener Übergangsanimationen, um unterschiedliche Effekte zu erzielen.

Fazit

In diesem Tutorial haben wir uns 5 verschiedene Möglichkeiten angesehen, Elemente über CSS auszublenden. Jede Methode unterscheidet sich ein wenig von den anderen. Wenn Sie wissen, was Sie erreichen möchten, können Sie leichter entscheiden, welches Attribut Sie verwenden möchten, und mit der Zeit können Sie instinktiv den besten Ansatz basierend auf Ihren tatsächlichen Anforderungen auswählen.

Das obige ist der detaillierte Inhalt von5 Möglichkeiten, Seitenelemente mit CSS auszublenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!