.feed-section { content-visibility: auto; contain-intrinsic-size: auto 500px; }Secțiunea poate evita temporar randarea internă și păstrează o estimare de 500px.
LECȚIA 99 DIN 100
Amână randarea conținutului îndepărtat
Configurează o secțiune lungă pentru a sări peste conținutul nerelevant momentan.
PASUL 1 · ÎNVAȚĂ
Cum funcționează
content-visibility: auto permite browserului să sară peste conținut când nu este relevant pentru utilizator. contain-intrinsic-size oferă o dimensiune de rezervă pentru a reduce schimbările de layout; efectul real trebuie măsurat, nu presupus.
.feed-section { display: none; }display: none elimină conținutul din randare și din layout, nu este aceeași optimizare.
PASUL 2 · APLICĂ
Exercițiul tău
Setează content-visibility: auto și contain-intrinsic-size: auto 500px pentru .feed-section.
index.htmlCSS
Rezultat sigurizolat
Ciorna se păstrează doar în acest browser.HTML și CSS permise · scripturile și rețeaua sunt blocate
PASUL 4 · VERIFICĂ
Ce trebuie să treacă
0%neverificat
- ○Secțiunea folosește content-visibility: auto.
- ○Dimensiunea intrinsecă de rezervă este auto 500px.
- ○Elementul țintă este prezent în pagină.
Explică-mi logica rezolvării
Prima proprietate controlează omiterea randării, iar a doua reduce instabilitatea când conținutul devine relevant.