content-visibility și contain-intrinsic-size în CSS

.sectiune {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

content-visibility: hidden;

Ce face content-visibility și contain-intrinsic-size

Cu content-visibility: auto, browserul nu mai calculează layout-ul și nu mai desenează conținutul unei secțiuni cât timp aceasta e departe de zona vizibilă. Când utilizatorul derulează aproape, secțiunea se randează normal. Pe pagini lungi (articole, liste de produse, comentarii) timpul de afișare inițial scade vizibil.

Pentru că secțiunea nerandată nu are înălțime cunoscută, adaugă contain-intrinsic-size: auto 600px: 600 px este o estimare folosită până la prima randare, iar auto face browserul să rețină înălțimea reală după aceea. Fără ea, bara de derulare sare.

Conținutul sărit cu auto rămâne în pagină: se găsește cu căutarea din browser (Ctrl+F), este citit de cititoarele de ecran și poate primi focus. content-visibility: hidden ascunde conținutul ca display: none, dar păstrează starea de randare pentru o afișare rapidă ulterioară.

Valori uzuale

Valoare	Descriere
visible	Comportament normal, conținutul se randează mereu (valoarea implicită).
auto	Conținutul se randează doar când este aproape de zona vizibilă.
hidden	Conținutul nu se afișează și nu se randează, dar starea lui se păstrează.
contain-intrinsic-size: auto 600px	Înălțime estimată până la prima randare; apoi se reține mărimea reală.

Exemple

Exemplul 1: Pagină lungă de recenzii, randată pe bucăți

Fiecare bloc de 20 de recenzii se randează doar când ajunge aproape de ecran.

.bloc-recenzii {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

Efect vizual în browser

Pagina cu 500 de recenzii pentru „Hotel Unirea, Iași” apare pe ecran mai repede. La derulare, recenziile se afișează normal, iar Ctrl+F găsește și recenziile încă nerandate.

Exemplul 2: Tab ascuns care se reafișează instantaneu

hidden păstrează randarea tabului, spre deosebire de display: none.

.tab-panou {
  content-visibility: visible;
}
.tab-panou[aria-hidden="true"] {
  content-visibility: hidden;
}

Efect vizual în browser

Tabul „Specificații” se ascunde când alegi „Descriere”. La revenirea pe „Specificații”, tabelul mare apare imediat, fără întârzierea unei randări de la zero.

Greșeli frecvente

• Omiterea lui contain-intrinsic-size; secțiunile nerandate au înălțime 0, iar bara de derulare și poziția paginii sar în timpul derulării.
• Aplicarea auto pe secțiunea din partea de sus a paginii; aceasta este oricum vizibilă, deci nu câștigi nimic.
• Folosirea hidden pentru conținut care trebuie găsit cu Ctrl+F sau citit de cititoarele de ecran; spre deosebire de auto, hidden îl ascunde complet.

Comenzi înrudite

• contain (izolarea randării: layout, paint, size): Îi spune browserului că un element este independent de restul paginii, ca schimbările din el să nu forțeze recalcularea întregului document.
• visibility: Ascunde un element din vedere, păstrând însă golul fizic pe care acesta îl ocupă în pagină.
• display (block, inline, inline-block, none): Stabilește tipul de cutie al elementului în fluxul paginii sau îl ascunde complet din document.
• will-change: Anunță browserul că o proprietate se va schimba în curând, ca să pregătească din timp randarea (de exemplu un strat separat pe GPU).