Come il tuo sito rimanda il disegno delle parti ancora fuori schermo
content-visibility dice al browser se disegnare subito le sezioni ancora fuori schermo. Nel Working Draft del 17 settembre 2022, con auto quelle sezioni restano cercabili nella pagina.
In questa guida (4)
Una pagina lunga costringe il browser a preparare anche i pezzi che il lettore non ha ancora raggiunto. La proprietà CSS content-visibility dice se quei pezzi vanno disegnati subito. Il 7 novembre 2026 ho letto il Working Draft del W3C, CSS Containment Module Level 2, datato 17 settembre 2022, e la bozza dell'editor sullo stesso testo. Non ho misurato un sito e non ho confrontato i tempi di una pagina vera.
La definizione pubblicata è nel Working Draft del 17 settembre 2022. Lo stesso giorno la bozza dell'editor elencava ancora i tre valori, con la stessa distinzione sulla ricerca dentro la pagina. Se la barra di scorrimento salta mentre la pagina si apre, il caso è già trattato in Perché la pagina del tuo sito si sposta mentre si carica.
Tre valori per la stessa sezione
visible non cambia nulla: i contenuti si impaginano e si disegnano come al solito.
hidden fa saltare i contenuti. Quelli saltati non devono essere raggiungibili dalla ricerca nella pagina, dall'ordine del tasto tab, dalla selezione o dal focus. Il Working Draft avvicina questo effetto a display: none applicato ai contenuti. Su una pagina pubblica, hidden toglie quelle frasi anche a chi le cerca con il comando del browser.
auto accende il contenimento di layout, di stile e di pittura. Se l'elemento non è rilevante per l'utente, fa saltare anche i contenuti. A differenza di hidden, quei contenuti saltati restano disponibili alla ricerca nella pagina, al tab, al focus e alla selezione. Per un articolo o un elenco che il lettore deve poter trovare, il valore descritto dal Working Draft come adatto a restare cercabile è auto.
Che lavoro si può risparmiare
Quando i contenuti sono saltati, il browser deve aggiungere anche il contenimento della dimensione. Non li dipinge, come se avessero visibility: hidden, e non rispondono al puntatore, come se avessero pointer-events: none. Gli stili, in larga parte, non si aggiornano finché uno script non lo chiede. Il Working Draft chiede di evitare quanto più lavoro di impaginazione e di disegno possibile, e di conservare se si può lo stato già calcolato, così la sezione può ricomparire in fretta.
Il contenimento di layout serve a tenere il lavoro saltato dentro il riquadro, senza spostare ciò che sta fuori. Il contenimento di stile evita di ricalcolare i contatori nelle parti saltate. Il contenimento di pittura taglia l'inchiostro che uscirebbe dal riquadro, così il browser può accorgersi di quando la parte visibile si avvicina allo schermo e, con auto, ricominciare a dipingerla.
La misura del riquadro
Il contenimento della dimensione dice che il layout interno saltato non cambia la misura del riquadro. Se la sezione non ha una misura propria, la pagina può accorciarsi finché il lettore non ci arriva, e la barra di scorrimento si sposta. È lo stesso sintomo del pezzo sul caricamento, con un'altra causa. Il Working Draft indica contain-intrinsic-size per fissare una stima della misura, e il valore auto di quella proprietà per memorizzare la misura dell'ultima volta in cui l'elemento è stato davvero disegnato. La stima va presa dalla sezione vera. Un'altezza copiata da un esempio del documento non è la misura del tuo elenco.
auto tiene accesi layout, stile e pittura anche quando la sezione non è saltata. Il Working Draft lo fa per evitare che il riquadro cambi regole di contenimento ogni volta che entra ed esce dallo stato saltato. Il costo di auto non è zero: una parte del contenimento resta anche a schermo.
Un controllo sul foglio di stile
Si apre il CSS della pagina e si cerca content-visibility sulla sezione lunga, per esempio l'elenco sotto la prima schermata. Se il valore è hidden, la ricerca nella pagina non deve trovare il testo di quella sezione: è l'effetto descritto dal Working Draft, e su un contenuto pubblico di solito non è l'esito che si vuole. Se il valore è auto e la pagina salta mentre si scorre, manca una misura del riquadro. Se la proprietà non c'è, il browser impagina anche il fondo.
L'immagine di copertina, sulla scheda Wikimedia, è di Wikideas1, con data 6 gennaio 2023 e licenza CC0. Mostra un portatile con due schermi spenti. Non è una misura di questa proprietà e non è il sito di chi legge.
