content-visibility

Die content-visibility Eigenschaft in CSS gibt dem Browser an, ob der Inhalt eines Elements zur Ladezeit gerendert werden soll oder nicht. Wenn der Browser also Inhalte lädt und sie auf dem Bildschirm darstellt, können wir mit dieser Eigenschaft eingreifen und dem Browser mitteilen, dass er die Inhalte eines Elements **nicht** laden soll, bis sie benötigt werden. Denken Sie daran ähnlich wie beim Lazy Loading, da die Kindelemente eines Elements, das sich außerhalb des Bildschirms befindet, erst gerendert werden, wenn sie in den Viewport gelangen.

.element {
  content-visibility: hidden;
}

Der Hauptzweck der Verwendung von content-visibility ist die Leistung. Es kann dazu beitragen, die Seitenladezeit zu beschleunigen, da der Browser in der Lage ist, das Rendern von Elementen, die sich nicht im Viewport des Benutzers befinden, aufzuschieben, bis der Benutzer zu ihnen scrollt. Die Ergebnisse können dramatisch sein. Hier sind die Ergebnisse eines Leistungstests, den Una Kravets und Vladimir Levin zusammengestellt haben und der den Unterschied zeigt, den content-visibility auf einer typischen Webseite machen kann.

Syntax

content-visibility: [visible | auto | hidden];

• Anfangswert: visible
• Gilt für: Elemente, für die Layout-Containment gelten kann
• Vererbt: nein
• Berechneter Wert: wie angegeben
• Animationstyp: nicht animierbar

Werte

Die Eigenschaft content-visibility akzeptiert einen von drei Werten

• hidden: Das Element umgeht seine Inhalte (ähnlich wie die Anwendung von display: none; auf die Inhalte).
• visible: Es hat keine Auswirkungen und das Element wird normal gerendert.
• auto: Das Element verfügt über Layout-, Stil- und Paint-Containment. Der Browser entscheidet, ob dieser Inhalt für den Benutzer relevant ist, und überspringt ihn, wenn nicht. Gleichzeitig bleibt das Element fokussierbar, auswählbar und zugänglich für Dinge wie Tabbing und In-Page-Suche.

content-visibility: hidden;

Ich erwähnte oben, dass es eher display: none; ähnelt, da das Element überhaupt nicht auf der Seite dargestellt wird.

Wenn die Regel entfernt wird, muss der Browser das Element und seinen Inhalt rendern. Bei content-visibility: hidden; ist das Element jedoch ausgeblendet, aber sein **gerenderter Zustand ist zwischengespeichert**. Wenn die Regel entfernt wird, muss der Browser das Element also nicht von Grund auf neu rendern. Sie könnten dies also bei etwas verwenden, das standardmäßig ausgeblendet ist, aber eine hohe Wahrscheinlichkeit besteht, dass Sie es zu einem bestimmten Zeitpunkt im Lebenszyklus der Seite anzeigen (z. B. ein häufig verwendetes Modal). Dadurch lädt das Element bei nachfolgenden Besuchen viel schneller, wenn es gerendert wird.

Die Anmerkung in der Spezifikation ist klar in Bezug auf die Zugänglichkeit des hidden-Werts

Die übersprungenen Inhalte dürfen für Benutzeragentur-Funktionen wie Seiteninterne Suche, Tab-Reihenfolge-Navigation usw. nicht zugänglich sein, noch dürfen sie auswählbar oder fokussierbar sein.

content-visibility: auto;

Sie könnten dies als eine Art **Lazy Loading** für ganze DOM-Teile betrachten.

Wenn sich ein Element unter dem "Fold" befindet und die Regel content-visibility: auto; hat, berücksichtigt der Browser keine seiner Inhalte. Daher wird das Rendern für dieses Element übersprungen. Wenn der Benutzer zu dem Element scrollt, rendert der Browser seine Inhalte und das Rendern erfolgt rechtzeitig für den Benutzer. Die Heuristiken, wann der Browser entscheidet, ob er rendert, sind unklar und werden wahrscheinlich dem Browser überlassen.

Zugänglichkeitsbedenken

Seien Sie vorsichtig bei der Verwendung von content-visibility: hidden. Dies weist den Browser nicht nur an, ein Element beim anfänglichen Laden der Seite vom Rendern auszuschließen, sondern entfernt das Element auch aus der Lesbarkeit durch assistive Technologien wie Screenreader.

Umgekehrt teilt das Schlüsselwort auto dem Browser mit, dass der Inhalt eines Elements beim anfänglichen Laden der Seite nicht benötigt wird, solange es sich außerhalb des Bildschirms befindet. Mit anderen Worten, dieses Element wird übersprungen, genau wie wenn wir das Schlüsselwort hidden verwenden.

auto zeigt jedoch auch an, dass das Element **dem Benutzer weiterhin zur Verfügung stehen sollte**, anstatt das Element im DOM vollständig zu ignorieren. Das bedeutet, dass das Element und sein Inhalt fokussierbar, auswählbar, durch TAB erreichbar und über die Seiteninterne Suchfunktion des Browsers durchsuchbar sein sollten. Auch hier ist die Spezifikation sehr klar.

Im Gegensatz zu hidden müssen die übersprungenen Inhalte weiterhin wie gewohnt für Funktionen des Benutzeragenten wie Seiteninterne Suche, Tab-Reihenfolge-Navigation usw. verfügbar sein und wie gewohnt fokussierbar und auswählbar sein.

Darüber hinaus sollten Elemente außerhalb des Bildschirms, die mit CSS ausgeblendet wurden (z. B. display: none;), mit aria-hidden="true" versehen werden, da der Browser sie nicht gerendert hat. So sind sie weiterhin im Accessibility Tree vorhanden.

UX-Bedenken

Man kann sich vorstellen, dass, wenn große Teile einer Webseite nicht gerendert werden, die Länge einer Scrollleiste darauf hindeuten könnte, dass die Seite viel weniger Inhalt enthält, als sie tatsächlich hat. Alex Russell spricht über (und hat) Lösungen dafür in seinem Beitrag "content-visiblity Without Jittery Scrollbars".

Performance

Auch hier geht es bei dieser Eigenschaft darum, Leistung zu erzielen. Die Ergebnisse können erheblich sein. Sehen Sie sich dieses Video mit Jake Archibald und Surma an, in dem sie es implementieren und große Veränderungen sehen.

Die Eigenschaft contain-intrinsic-size

Wenn ein Browser zunächst alle Inhalte einer Webseite rendert, kennt er natürlich die Höhe, die benötigt wird, um alles anzuzeigen (basierend auf der Summe der individuellen Höhen aller Abschnitte der Seite), und das Scrollen ist nahtlos. content-visibility: auto; behandelt das Element, wenn es auf ein Element angewendet wird, so, als hätte es eine Höhe von 0 (vorausgesetzt, die height Eigenschaft wurde nicht explizit gesetzt). Wenn der Benutzer scrollt und das Element in den Blickfeld gerät (und der Browser es zu rendern beginnt), wird die tatsächliche Höhe berechnet, was zu einem Layout-Shift auf der Seite führt. Scrollen kann die Webseite auch ein wenig ruckelig machen – etwas, das als **Cumulative Layout Shift** (CLS) bekannt ist und als wichtig für die Suchmaschinenoptimierung gilt, da Google es jetzt in seine Core Web Vitals Metriken zur Messung der Leistung einer Website aufnimmt.

Die Lösung für große Layout-Shifts besteht darin, content-visibility: auto; mit contain-intrinsic-size zu kombinieren, um dem Browser eine vorhersagbare Höhe als Platzhalter für das Element beim Rendern zu geben.

.off-screen-parent {
  content-visibility: auto;
  contain-intrinsic-size: 4800px; /* A guess at the height of it */
}

contain-intrinsic-size fungiert als Platzhalter für den noch nicht gerenderten Inhalt und dämmt dadurch Scroll- und Layout-Shift-Probleme ein. Wenn Sie also die genaue Höhe **kennen**, können Sie diese als Wert verwenden. Wenn nicht, machen Sie eine Schätzung. Wenn der Abschnitt gerendert wird und die von Ihnen eingestellte Höhe nicht die tatsächliche Höhe ist, kommt es zu einem kleinen Layout-Shift, der jedoch nicht so stark ausfällt wie ohne die contain-intrinsic-size Eigenschaft.

Demo

Ich habe eine einfache Website mit Dummy-Text und insgesamt 185 Bildern erstellt.

Ich habe GitHub Pages für das Hosting verwendet. Ein Branch hat die Eigenschaften content-visibility und contain-intrinsic-size und der andere nicht. Daher habe ich beide verglichen.

Browser-Unterstützung

Weitere Informationen

Verwandte Eigenschaften

Verwandt