Ottimizzare la content-visibility in CSS specificando lo spazio da occupato dall'area non renderizzata

di Morgan Pizzini, in HTML5, CSS,

Nello script #449 abbiamo trattato la content-visibility e il suo ruolo nel non dipingere ciò che non è visibile nella viewport.

Se abbiamo però provato questa tecnica noteremo che il layout non è lineare: ci sono dei salti nel momento in cui il browser disegna l'elemento da inserire: la viewport non sa quanto spazio andranno ad occupare gli elementi, per questo motivo è altresì importante comunicare al browser quanto spazio il contenuto andrà ad occupare per riservare uno spazio vuoto, che verrà poi riempito, tramite contain-intrinsic-size

.lazy-load-section {
  content-visibility: auto;
  contain-intrinsic-size: 200px 500px;
}

Se le dimensioni esatte non sono note, si può fare una stima o utilizzare JavaScript per calcolare una dimensione media e applicarla dinamicamente.

Commenti

Visualizza/aggiungi commenti

| Condividi su: LinkedIn, Facebook

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi