TL;DR
La nuova proprietà Containment CSS consente agli sviluppatori di limitare l'ambito degli stili, del layout e della funzionalità di pittura del browser.
Ha alcuni valori e la sua sintassi è questa:
contain: none | strict | content | [ size || layout || style || paint ]
È installato in Chrome 52+ e Opera 40+ (e ha il supporto pubblico di Firefox), quindi provalo e facci sapere come va!
La proprietà contain
Quando crei un'app web o anche un sito complesso, una sfida fondamentale per le prestazioni è limitare gli effetti di stili, layout e pittura. Spesso l'intero DOM è considerato "in ambito" per il lavoro di calcolo, il che può significare che tentare una "vista" autonoma in un'app web può rivelarsi difficile: le modifiche in una parte del DOM possono influire su altre parti e non è possibile indicare al browser cosa deve rientrare o fuori ambito.
Ad esempio, supponiamo che parte del DOM abbia il seguente aspetto:
<section class="view">
Home
</section>
<section class="view">
About
</section>
<section class="view">
Contact
</section>
E aggiungi un nuovo elemento a una vista, che attiverà stili, layout e colorazione:
<section class="view">
Home
</section>
<section class="view">
About
<div class="newly-added-element">Check me out!</div>
</section>
<section class="view">
Contact
</section>
In questo caso, però, l'intero DOM è effettivamente nell'ambito, il che significa che i calcoli di stile, layout e pittura dovranno prendere in considerazione tutti gli elementi, indipendentemente dal fatto che siano stati modificati o meno. Maggiore è il DOM, maggiore è il lavoro di calcolo necessario, il che significa che potresti rendere la tua app non responsiva all'input utente.
La buona notizia è che i browser moderni stanno diventando molto intelligenti nel limitare automaticamente l'ambito di stili, layout e operazioni di pittura, il che significa che le cose stanno diventando più veloci senza che tu debba fare nulla.
Ma la notizia ancora migliore è che c'è una nuova proprietà CSS che affida i controlli dell'ambito agli sviluppatori: Contenimento.
Il contenimento CSS è una nuova proprietà, con la parola chiave contain, che supporta quattro valori:
layoutpaintsizestyle
Ciascuno di questi valori consente di limitare il lavoro di rendering necessario per il browser. Analizziamoli più nel dettaglio.
Layout (contiene: layout)
Il contenimento del layout è probabilmente il vantaggio più importante del contenimento, insieme a contain: paint.
In genere, il layout è basato sul documento, quindi si adatta proporzionalmente alle dimensioni del DOM. Pertanto, se modifichi la proprietà left di un elemento, potrebbe essere necessario controllare ogni singolo elemento del DOM.
L'attivazione del contenimento qui può potenzialmente ridurre il numero di elementi a pochi, anziché all'intero documento, risparmiando al browser un sacco di lavoro non necessario e migliorando notevolmente le prestazioni.
Pittura (contiene: pittura)
La pittura di delimitazione è un altro vantaggio incredibilmente utile del contenimento. Il contenimento della pittura taglia essenzialmente l'elemento in questione, ma ha anche alcuni altri effetti collaterali:
- Funge da blocco contenitore per gli elementi con posizione fissa e posizionati in modo assoluto. Ciò significa che tutti gli elementi secondari vengono posizionati in base all'elemento con
contain: paint, non ad altri elementi principali come, ad esempio, il documento. - Diventa un contesto di accodamento. Ciò significa che elementi come
z-indexavranno un effetto sull'elemento e gli elementi secondari verranno impilati in base al nuovo contesto. - Diventa un nuovo contesto di formattazione. Ciò significa che se, ad esempio, hai un elemento a livello di blocco con contenimento della vernice, questo verrà considerato come un nuovo ambiente di layout indipendente. Ciò significa che il layout esterno all'elemento in genere non influisce sugli elementi secondari dell'elemento contenitore.
Taglia (contiene: taglia)
contain: size indica che gli elementi secondari non influiscono sulle dimensioni dell'elemento principale e che verranno utilizzate le dimensioni dedotte o dichiarate. Di conseguenza, se imposti contain: size, ma non specifichi le dimensioni dell'elemento (direttamente o tramite le proprietà flex), l'elemento verrà visualizzato con dimensioni pari a 0 x 0 px.
Il contenimento delle dimensioni è una misura di sicurezza per assicurarti di non fare affidamento sugli elementi secondari per le dimensioni, ma da solo non offre molti vantaggi in termini di rendimento.
Stile (contiene: stile)
Può essere difficile prevedere quali saranno gli effetti sulla struttura DOM della modifica degli stili di un elemento. Ne è un esempio l'uso dei contatori CSS, in cui la modifica di un contatore in un file secondario può influire sui valori contatore con lo stesso nome utilizzato in altre sezioni del documento. Se è impostato contain: style, le modifiche allo stile non verranno propagate all'elemento contenitore.
Per essere chiari, ciò che contain: style non fornisce è lo stile con ambito come lo otterresti da Shadow DOM. Il contenimento qui riguarda solo la limitazione delle parti dell'albero che vengono prese in considerazione quando gli stili vengono mutati, non quando vengono dichiarati.
Contenimento rigoroso e dei contenuti
Puoi anche combinare parole chiave, ad esempio contain: layout paint, che applicheranno solo questi comportamenti a un elemento. ma contiene anche supporta due valori aggiuntivi:
contain: strictsignifica lo stesso dicontain: size layout paintcontain: contentsignifica lo stesso dicontain: layout paint
L'utilizzo del contenimento rigoroso è ideale quando conosci in anticipo le dimensioni dell'elemento (o vuoi riservarne le dimensioni), ma tieni presente che se dichiari il contenimento rigoroso senza dimensioni, a causa del contenimento delle dimensioni implicito, l'elemento potrebbe essere visualizzato come una casella di 0 x 0 pixel.
Il contenimento dei contenuti, invece, offre miglioramenti significativi dell'ambito, ma non richiede di conoscere o specificare le dimensioni dell'elemento in anticipo.
Dei due, contain: content è quello che dovresti utilizzare per impostazione predefinita. Dovresti considerare il contenimento rigoroso come una sorta di via di fuga quando contain: content non è abbastanza efficace per le tue esigenze.
Facci sapere come va
Il contenimento è un ottimo modo per iniziare a indicare al browser ciò che intendi mantenere isolato all'interno della tua pagina. Provate Chrome 52 e versioni successive e facci sapere come procede.