• Boost rendering performance
• Ab Chrome 85 verfügbar
• Support nur Chrome 85 aufwärts
• Firefox will es noch einführen
• https://caniuse.com/?search=content-visibility
• Ermöglicht dem user agent, die Rendering-Arbeit eines Elements, einschließlich Layout und Painting, zu überspringen, bis sie benötigt wird
• Da das Rendern übersprungen wird und ein großer Teil Ihres Inhalts außerhalb des Bildschirms angezeigt wird, wird der initial load schneller

Im folgenden beispiel haben wir lila markierten container die Eigentschaft

content-visibility: auto

Die Performance ist in diesem Beispiel bis zu 7x gestiegen

content-visibility hat 3 Werte:

• visible

  → Keine Änderung

• hidden

  → Ein mix zwischen display: none und visibility: hidden. Startet mit display: hidden und wird hinterher visibility hidden

• auto

  → rendert das Element sobald es vom Browser benötigt wird.

  .element {
      content-visibility:auto;
  }
  

Ohne content-visibility