Chrome 85'ten itibaren desteklenen `content-visibility` ile sayfa performansını iyileştirmek

Yalnızca content-visibility: auto uygulamak bile, ekranda görünmeyen öğelerin render edilmesini engelleyerek hız iyileştirmesi sağlar.

Bir öğeye auto verildiğinde, CSS Containment spesifikasyonundaki layout, style, paint uygulanır ve ilgili öğe ekranın dışına çıktığında size da uygulanır.

→ Ekranın dışına çıktığında, o öğenin alt öğeleri hiç çizilmez.

→ Yeniden ekranın yakınına geldiğinde size kalkar ve hit-test başlar.

contain-intrinsic-size ile varsayılan olarak çizilmesi gereken boyut belirtilebilir. Belirtilmezse 0 olur.

content-visibility: hidden verildiğinde, ekran dışına çıkmış gibi hiç render edilmez.

→ Öğeyi gizler ve render durumunu korur; ancak bir değişiklik olduysa tekrar görünür hale geldiğinde render uygulanır.

→ display:none - Öğeyi gizler ve render durumunu yok eder. Yani tekrar görünür olduğunda yeniden çizilmesiyle aynıdır.

→ visibility:hidden - Öğeyi gizler ve render durumunu korur. Gerçekte belgeden kaldırılmaz, öğe yer kaplamaya devam eder ve tıklanabilir de olabilir. Gizlidir ama render edilmeye devam eder.