10 Möglichkeiten, Elemente in CSS zu verbergen

Detaillierte Erläuterung des CSS -Element -Verstecks ​​und Leistungsvergleichs

CSS bietet eine Vielzahl von Möglichkeiten, Elemente zu verbergen, aber ihre Auswirkungen auf die Zugänglichkeit, das Layout, die Animation, die Leistung und das Ereignisumschlag sind unterschiedlich. In diesem Artikel werden diese Methoden detailliert erörtert und ihre Vor- und Nachteile analysiert.

Schlüsselpunkte

cs
• Die Eigenschaften opacity filter: opacity() und
können das Element vollständig transparent machen, aber das Element bleibt auf der Seite und kann immer noch Ereignisse auslösen.
• transform
Attribute können Elemente ausblenden, indem sie sie aus dem Bildschirm verschieben oder deren Skala reduzieren, wodurch eine überlegene Leistung und Hardwarebeschleunigung erfolgt.
• display
Attribut ist eine häufige Möglichkeit, Elemente zu verbergen, aber es kann nicht animiert werden und kann Seitenlayouts auslösen, sodass es in vielen Fällen nicht ideal ist.
• hidden Andere Methoden zum Verstecken von Elementen umfassen HTML
Eigenschaften, absolute Positionierung, Überschreiben anderer Elemente und Reduktionsgröße, jeweils eigene Vor- und Nachteile.

Animationseffekt

Einige CSS -versteckte Optionen sind alles oder nichts. Elemente sind entweder völlig sichtbar oder völlig unsichtbar, ohne Zwischenzustand. Andere Optionen wie Transparenz können verschiedene Werte haben, sodass interpolierte CSS -Animationen implementiert werden können.

Barrierefreiheit

aria-hidden="true" Jede nachstehend beschriebene Methode verbirgt Elemente visuell, kann jedoch den Elementinhalt der Hilfstechnologie möglicherweise nicht verbergen. Beispielsweise können Bildschirmleser noch winzigen transparenten Text ankündigen. Weitere CSS -Attribute oder ARIA -Attribute (z. B.

) können erforderlich sein, um die entsprechende Operation zu beschreiben.

prefers-reduced-motion Bitte beachten Sie, dass Animationen auch dazu führen können, dass einige Menschen Desorientierung, Migräne, Anfälle oder andere physische Beschwerden erleben. Erwägen Sie,

Medienabfragen zu verwenden, um Animationen auszuschalten, wenn sie in den Benutzereinstellungen angegeben sind.

Ereignisbearbeitung

Ein Element versteckt verhindern, dass das Ereignis in diesem Element ausgelöst wird, oder es hat keine Wirkung. Das heißt, Elemente sind nicht sichtbar, können jedoch von anderen Benutzerinteraktionen geklickt oder empfangen werden.

Leistung

Nachdem der Browser die HTML -DOM- und CSS -Objektmodelle geladen und analysiert, wird die Seite in drei Phasen dargestellt:

Layout: Geometrie und Position jedes Elements
2. erzeugen
Zeichnen: Zeichnen Sie die Pixel jedes Elements
Zusammensetzung: Elementschichten in geeigneter Reihenfolge

anordnen

Der Effekt, der nur Syntheseveränderungen verursacht, ist signifikant reibungsloser als das Layout. In einigen Fällen können Browser auch Hardware -Beschleunigung verwenden.

opacity 1 Die Eigenschaften filter: opacity() und

können Zahlen zwischen 0 und 1 oder Prozent zwischen 0% und 100% übergeben, was die vollständige Transparenz bzw. der Gesamtwirtschaft darstellt.

Beispiel ansehen

In modernen Browsern gibt es fast keinen praktischen Unterschied zwischen den beiden, obwohl filter verwendet werden sollte, wenn gleichzeitig mehrere Effekte angewendet werden (Fuzzy, Kontrast, Graustufen usw.).

opacity kann animiert werden und eine hervorragende Leistung liefern. Beachten Sie jedoch, dass vollständig transparente Elemente auf der Seite bleiben und Ereignisse auslösen können.

指标	效果
浏览器支持	良好，但IE仅支持opacity 0到1
可访问性	如果设置为0或0%，则内容不会被读取
布局影响	否
渲染需求	合成
性能	最佳，可以使用硬件加速
动画帧	是
隐藏时触发事件	是

2

wirkt sich auf das gesamte Element aus, aber die Eigenschaften

, opacity und color können auch separat eingestellt werden. Durch die Verwendung von background-color oder ähnlichen Methoden zum Anwenden eines Null -Alpha -Kanals wird das Projekt vollständig transparent. border-color rgba(0,0,0,0)

Beispiel ansehen

Jedes Attribut kann separat animieren, um interessante Effekte zu erzielen. Beachten Sie, dass Transparenz nicht auf Elemente mit Bildhintergrund angewendet werden kann, wenn sie mit

oder ähnlichen Methoden erzeugt werden.

linear-gradient Der Alpha -Kanal kann mit den folgenden Methoden eingestellt werden:

: vollständig transparent (Zwischenanimation kann nicht durchgeführt werden)
• transparent
: Rot, Grün, Blau und Alpha
• rgba(r, g, b, a)
: Farbton, Sättigung, Helligkeit und Alpha
• hsla(h, s, l, a)
und
• #RRGGBBAA #RGBA

3 transform Eigenschaften können verwendet werden, um Elemente zu pensieren, zu skalieren, zu drehen oder zu kippen.

oder

(aus dem Bildschirm aussteigen) verbergt das Element: transform scale(0) translate(-999px, 0px) Beispiel ansehen

bietet eine hervorragende Leistung und Hardwarebeschleunigung, da Elemente tatsächlich in eine separate Ebene verschoben werden und in 2D oder 3D animiert werden können. Der ursprüngliche Layoutraum bleibt gleich, aber die völlig versteckten Elemente auslösen keine Ereignisse.

transform

4

指标	效果
浏览器支持	良好
可访问性	内容仍然会被读取
布局影响	否——原始尺寸保持不变
渲染需求	合成
性能	最佳，可以使用硬件加速
动画帧	是
隐藏时触发事件	否

Eigenschaften erstellen einen Clip -Bereich, der bestimmt, welche Teile des Elements sichtbar sind. Wenn Sie Werte wie verwenden, wird das Element vollständig ausgeblendet. clip-path

Beispiel ansehen

clip-path clip-path: circle(0);

bietet eine interessante Reihe von Animationen, obwohl es nur in modernen Browsern verwendet werden kann.
5 Das Attribut

clip-path kann auf

oder

指标	效果
浏览器支持	仅限现代浏览器
可访问性	一些应用程序仍然可以读取内容
布局影响	否——原始尺寸保持不变
渲染需求	绘制
性能	合理
动画帧	是，在现代浏览器中
隐藏时触发事件	否

festgelegt werden, um Elemente anzuzeigen und zu verbergen.

visibility Beispiel ansehen

Sofern der Wert visibility verwendet wird, wird der vom Element verwendete Speicherplatz bestehen. visible hidden

6 display Attribute sind wahrscheinlich die am häufigsten verwendete Methode zum Verstecken von Elementen. Der

-Werte entfernt das Element effektiv, als ob es in der DOM nie existiert.

display none Beispiel ansehen

ist jedoch in den meisten Fällen wahrscheinlich die schlechteste CSS -Eigenschaft. Es kann nicht animiert und das Seitenlayout ausgelöst werden, es sei denn, das Element wird mit aus dem Dokumentstrom verschoben, oder das neue Attribut

wird übernommen.

position: absolute contain ist ebenfalls überladen und verfügt über Optionen wie

,

, display, block, inline, table usw. Das Zurücksetzen auf den richtigen Wert nach flexbox kann problematisch sein (obwohl grid hilfreich sein kann). display: none; unset

指标	效果
浏览器支持	极佳
可访问性	内容不会被读取
布局影响	是
渲染需求	布局
性能	差
动画帧	否
隐藏时触发事件	否

7.

Sie können jedem Element HTML -attribute hinzufügen: hidden

Dies wendet den Standardstil des Browsers an:

hidden

Dies hat die gleichen Vor- und Nachteile wie

<p hidden>隐藏内容</p>

, obwohl es bei Verwendung eines Content -Management -Systems nützlich sein kann, das keine Änderungen an Stilen zulässt.

[hidden] {
  display: none;
}

8 Das Attribut

display: none ermöglicht die Verwendung von

,

, und , um Elemente aus der statischen Standardposition im Seitenlayout zu verschieben. Daher können absolut positionierte Elemente mit

oder ähnlichen Methoden aus dem Bildschirm verschoben werden.

position top Beispiel ansehen bottom left right

9 Das Element kann visuell versteckt werden, indem ein anderes Element mit der gleichen Farbe wie der Hintergrund oben positioniert wird. In diesem Beispiel wird das

pseudoelement überschrieben, obwohl alle Kinderelemente verwendet werden können.

::after

Beispiel ansehen

指标	效果
浏览器支持	极佳
可访问性	内容仍然会被读取
布局影响	否，如果绝对定位
渲染需求	绘制
性能	如果小心谨慎，则性能合理
动画帧	是，当覆盖伪元素或子元素时
隐藏时触发事件	是，当覆盖伪元素或子元素时

10

Elemente können durch Verwendung , ,

,

, width und/oder height versteckt werden, um die Größe des Elements zu minimieren. Möglicherweise müssen Sie auch padding anwenden, um sicherzustellen, dass der Inhalt nicht überfließt. border-width font-size overflow: hidden Beispiel ansehen

kann interessante Animationen erreichen, aber die Leistung ist erheblich besser als .

transform

Auswahl von versteckten Elementen

指标	效果
浏览器支持	极佳
可访问性	内容仍然会被读取
布局影响	是
渲染需求	布局
性能	差
动画帧	是
隐藏时触发事件	否

ist seit Jahren die bevorzugte Lösung für versteckte Elemente, wurde jedoch durch Optionen ersetzt, die flexibler und leichter zu animieren sind. Es funktioniert immer noch, kann aber nur verwendet werden, wenn Sie alle Inhalte aller Benutzer dauerhaft verbergen möchten. Bei der Betrachtung der Leistung sind

oder

bessere Entscheidungen. display: none transform opacity (coole Demo -Links zum Anzeigen und Ausblenden von Bildern mit CSS sollten hier eingefügt werden)

FAQ

(Der FAQ -Abschnitt sollte hier eingefügt und gemäß dem ursprünglichen Inhalt eingestellt und ergänzt werden. Es wird empfohlen, den ursprünglichen FAQ -Abschnitt in eine klarere Struktur umzuwandeln und in einer einfacheren Sprache auszudrücken.)

Kurz gesagt, welche Methode zum Ausblenden von Elementen hängt vom spezifischen Anwendungsszenario und den Anforderungen ab und muss Faktoren wie Leistung, Zugänglichkeit und Animationseffekte abwägen. und sind normalerweise bessere Optionen, während

geeignet ist, um dauerhafte Inhalte zu verstecken, auf die nicht zugegriffen werden muss. Denken Sie daran, die Zugänglichkeit und Benutzererfahrung immer zu priorisieren.

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