Test CSS vlastnosti Content-visibility

normální prvek s content-visibility: visible

prvek s content-visibility: auto

Content-visibility se zobrazí, pokud je vidět, ale nerenderuje se, pokud vidět není. Blbě se testuje, jestli to tak skutečně funguje.

skrytý obsah s content-visibility: hidden a nastavenou výškou

Protože v moderních prohlížečích není vidět, co je v tom hidden napsáno, tak ještě jednou:

 <div style="content-visibility: hidden; min-height: 5em;">
skrytý obsah s content-visibility: hidden a nastavenou výškou
</div>

Můžete si všimnout, že spíš než display: none; to připomíná visibility: hidden;. Obsah není vidět, protože se nerenderuje, ale vyčlení si místo a zobrazí rámeček. Na rozdíl od visibility: hidden nelze skriptem odkrývat podprvky.

skrytý obsah s content-visibility: hidden a bez nastavené výšky

Ještě jednou zdroj, protože nemusí být vidět:

<div style="content-visibility: hidden;">
skrytý obsah s content-visibility: hidden bez nastavené výšky
</div>

Jak je vidět, pokud není nastavena výška, rozměry pro prvek nejsou rezervovány. To znamená, že text, který prvek obsahuje, není při vykreslování brán v úvahu. To je další významný rozdíl od visibility: hidden.

content-visibility: auto s nastaveným contain-intrinsic-size

Podle všeho, co vidím, je contain-intrinsic-size k ničemu. Chápu, že má sloužit k tomu, aby se prvku předem vyhradilo místo. Jakmile ale uživatel na prvek doroluje, použije se skutečná velikost prvku a zbytek dokumentu se stejně musí překreslit.