TL;DR
La nuova proprietà Contenimento CSS consente agli sviluppatori di limitare l'ambito degli stili, del layout e della colorazione 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à contiene
Quando si realizza un'app web o anche un sito complesso, una sfida chiave in termini di rendimento è limitare gli effetti di stili, layout e colorazione. 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 tuo DOM abbia il seguente aspetto:
<section class="view">
Home
</section>
<section class="view">
About
</section>
<section class="view">
Contact
</section>
Inoltre, aggiungi un nuovo elemento a una vista per attivare 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, tuttavia, l'intero DOM rientra nel campo di applicazione, il che significa che i calcoli di stile, layout e colorazione dovranno considerare tutti gli elementi indipendentemente dal fatto che siano stati modificati o meno. Più grande è il DOM, maggiore sarà il lavoro di calcolo, il che significa che potresti impedire alla tua app di rispondere all'input dell'utente.
La buona notizia è che i browser moderni stanno diventando davvero intelligenti nel limitare automaticamente l'ambito di stili, layout e colorazione, il che significa che le cose diventano 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 "contenere", che supporta quattro valori:
layoutpaintsizestyle
Ciascuno di questi valori consente di limitare il lavoro di rendering che il browser deve svolgere. Vediamole più da vicino.
Layout (contiene: layout)
Il contenimento del layout è probabilmente il più grande vantaggio del contenimento, insieme a contain: paint.
Di solito, il layout è basato sui documenti e viene ridimensionato in modo proporzionale alle dimensioni del DOM. Di conseguenza, se modifichi la proprietà left di un elemento, potrebbe essere necessario controllare ogni singolo elemento nel DOM.
L'attivazione del contenimento in questa posizione può potenzialmente ridurre il numero di elementi a pochi elementi, anziché all'intero documento, risparmiando al browser una grande quantità di lavoro non necessario e migliorando notevolmente le prestazioni.
Verniciatura (contiene: paint)
La pittura dell'ambito è un altro vantaggio estremamente utile del contenimento. Il contenimento della pittura essenzialmente ritaglia l'elemento in questione, ma presenta anche alcuni altri effetti collaterali:
- Funge da blocco contenitore per elementi in posizione assoluto e in posizione fissa. 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 sovrapposizione. Ciò significa che elementi come
z-indexavranno un effetto sull'elemento e gli elementi secondari verranno sovrapposti 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 che lo contiene.
Dimensioni (contiene: size)
contain: size significa che gli elementi secondari dell'elemento non influiscono sulle dimensioni dell'elemento principale e che le dimensioni dedotte o dichiarate saranno quelle utilizzate. Di conseguenza, se imposti contain: size ma non specifichi le dimensioni dell'elemento (direttamente o tramite proprietà flessibili), l'elemento viene visualizzato a 0 x 0 px.
Il contenimento delle taglie è una misura semplice per garantire di non fare affidamento su elementi secondari per la taglia, ma da solo non offre molti vantaggi in termini di prestazioni.
Stile (contiene: style)
Può essere difficile prevedere quali saranno gli effetti dell'alterazione degli stili di un elemento sull'albero DOM. 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 il criterio contain: style è impostato, le modifiche di stile non verranno propagate di nuovo dopo l'elemento contenitore.
Per essere chiari, ciò che contain: style non fornisce è lo stile con ambito che ottieni da Shadow DOM. il contenimento qui riguarda esclusivamente la limitazione delle parti dell'albero che vengono prese in considerazione quando gli stili vengono mutati, non quando vengono dichiarati.
Rigorosa e contenimento dei contenuti
Puoi anche combinare parole chiave, ad esempio contain: layout paint, che applichino solo quei comportamenti a un elemento. ma contiene anche supporta due valori aggiuntivi:
contain: strictsignifica uguale acontain: size layout paintcontain: contentsignifica uguale acontain: layout paint
L'utilizzo rigoroso del contenimento è ottimo se si conosce in anticipo le dimensioni dell'elemento (o si vuole riservarne le dimensioni), ma ricorda che se dichiari il contenimento rigoroso senza dimensioni, a causa del contenimento delle dimensioni implicite, l'elemento potrebbe essere visualizzato come una casella di 0 px per 0 px.
Il contenimento dei contenuti, invece, offre miglioramenti significativi all'ambito, ma non richiede di conoscere o specificare in anticipo le dimensioni dell'elemento.
Dei due, contain: content è quello che dovresti usare per impostazione predefinita. Dovresti considerare il rigoroso contenimento come una sorta di via di uscita quando contain: content non è abbastanza forte per le tue esigenze.
Facci sapere cosa ne pensi
Il contenimento è un ottimo modo per iniziare a indicare al browser cosa intendi mantenere isolato all'interno della pagina. Provate Chrome 52 e versioni successive e facci sapere come procede.