jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose CSS-Content-Visibility-Generator

Generiere CSS für content-visibility und contain-intrinsic-size, um lange Seiten zu beschleunigen.

Tool wird geladen...

Was ist CSS-Content-Visibility-Generator?

content-visibility: auto teilt dem Browser mit, die Renderarbeit für bildschirmferne Elemente zu überspringen, bis sie sich dem Viewport nähern. Gepaart mit contain-intrinsic-size gibt es dem Browser eine geschätzte Größe, damit die Bildlaufleiste sich korrekt verhält. Dies kann die Rendering-Leistung auf langen Seiten mit vielen wiederholten Abschnitten wie Blog-Archiven, Produktgittern und Dokumentationen erheblich verbessern.

Kurze Antwort

Verwenden Sie content-visibility: auto, um das Rendern von bildschirmfernen Elementen zu überspringen, bis sie sich dem Viewport nähern. Dies kann die anfängliche Seitenladeleistung auf langen Seiten mit vielen wiederholten Abschnitten verbessern.

Last updated: 2026-06-11

Einschränkungen

  • Die Browserunterstützung variiert. Chrome 85+, Edge 85+, Firefox 125+ und Safari 18.2+ unterstützen content-visibility. Ältere Browser ignorieren die Eigenschaft und rendern alle Inhalte normal.
  • Ankerlinks scrollen möglicherweise nicht korrekt zu Elementen mit content-visibility: auto, da der Browser den Zielbereich vor dem Scrollversuch nicht gerendert hat.
  • Inhalte innerhalb eines content-visibility: auto Abschnitts sind nicht sofort für Screenreader oder die Suche-auf-Seite-Funktion verfügbar, da der Browser den bildschirmfernen Teilbaum nicht gerendert hat.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Wählen Sie den Inhaltstyp, der am besten zu Ihren wiederholten Abschnitten passt.
  2. Legen Sie die geschätzte durchschnittliche Höhe eines Abschnitts in Pixeln fest.
  3. Kopieren Sie das CSS und wenden Sie es auf den Container-Selektor für Ihre wiederholten Abschnitte an.
  4. Testen Sie die Seitenleistung und das Bildlaufleistenverhalten vor der Veröffentlichung.

Wofür du es nutzen kannst

  • Das Rendern von langen Blog-Artikellisten mit vielen wiederholten Karten beschleunigen.
  • Verbesserung der Leistung auf Dokumentationsseiten mit vielen einklappbaren Abschnitten.
  • Layout-Arbeit auf Produktlistenseiten mit Hunderten von Elementen reduzieren.

Anwendungsfalle

Praxisbeispiele

Beispiel

Blog-Feed Leistung

Eine Blog-Startseite zeigt 50 Beitragskarten. Das Hinzufügen von content-visibility: auto mit einer contain-intrinsic-size von 300px ermöglicht es dem Browser, das Rendern von bildschirmfernen Karten zu überspringen, bis sie benötigt werden.

Beispiel

Dokumentationsseitenabschnitte

Eine lange Dokumentationsseite hat viele unabhängige Abschnitte. Jeder Abschnitt erhält content-visibility: auto, sodass bildschirmferne Abschnitte das anfängliche Seiten-Rendering nicht blockieren.

Haufige Fehler

  • Zu kleine oder zu große contain-intrinsic-size, was zu Sprüngen der Bildlaufleiste führt, wenn Abschnitte nach und nach gerendert werden.
  • Anwenden von content-visibility auf Elemente, die JavaScript-Messung benötigen oder über Ankerlinks angesteuert werden.
  • Vergessen, dass Elemente mit content-visibility: auto nicht gemalt werden, was getBoundingClientRect-Messungen beeinflussen kann.

Überprüfung

  1. Scrollen Sie die Seite und bestätigen Sie, dass bildschirmferne Abschnitte ohne Sprünge der Bildlaufleiste oder visuelle Lücken sanft eingeblendet werden.
  2. Testen Sie Ankerlinks oder URL-Hash-Navigation zu Abschnitten, die content-visibility verwenden, um sicherzustellen, dass sie an die richtige Position scrollen.

FAQ

Fragen zu CSS-Content-Visibility-Generator

Welche Browser unterstützen content-visibility?

Chrome 85+, Edge 85+, Firefox 125+ und Safari 18.2+. Es kann sicher als progressive Verbesserung verwendet werden, da Browser, die es nicht unterstützen, alle Inhalte normal rendern.

Wie funktioniert contain-intrinsic-size?

Es legt eine Platzhaltergröße für das Element fest, bevor es gerendert wird. Verwenden Sie einen Schätzwert nahe der tatsächlichen durchschnittlichen Höhe, damit die Bildlaufleiste nicht springt, wenn Abschnitte gerendert werden.

Beeinflusst content-visibility die Suchmaschinenoptimierung?

content-visibility beeinflusst die Suchmaschinenindexierung nicht direkt. Google rendert JavaScript und erkennt sichtbare Inhalte normal. Statische HTML-Inhalte sind unabhängig von content-visibility sicher.

Was passiert mit Ankerlinks und content-visibility?

Wenn eine Seite Ankerlinks verwendet, um zu einem Abschnitt mit content-visibility: auto zu springen, scrollt der Browser möglicherweise nicht an die korrekte Position, da das Ziel-Element noch nicht vollständig gerendert wurde. Testen Sie das Ankerlink-Verhalten, wenn Sie content-visibility auf intern verlinkte Abschnitte anwenden.

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren