TL;DR
La nuova proprietà di contenimento CSS consente agli sviluppatori di limitare l'ambito degli stili, del layout e della colorazione del browser.
Ha alcuni valori, che rendono la sua sintassi questa:
contain: none | strict | content | [ size || layout || style || paint ]
È disponibile in Chrome 52 e versioni successive e Opera 40 e versioni successive (oltre al supporto pubblico da Firefox), quindi provaci e facci sapere come te la cavi.
La proprietà contengono
Quando crei un'app web, o anche un sito complesso, una delle principali sfide in termini di prestazioni è la limitazione degli effetti di stili, layout e colorazione. Spesso l'intero DOM è considerato "nell'ambito" del lavoro di calcolo, il che può significare che tentare una "visualizzazione" autonoma in un'app web può risultare difficile: le modifiche in una parte del DOM possono influire su altre parti e non c'è modo di dire al browser cosa dovrebbe essere incluso o fuori dall'ambito.
Ad esempio, supponiamo che una parte del DOM abbia il seguente aspetto:
<section class="view">
Home
</section>
<section class="view">
About
</section>
<section class="view">
Contact
</section>
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 effettivamente nell'ambito, il che significa che i calcoli relativi a stile, layout e disegno dovranno prendere in considerazione tutti gli elementi indipendentemente dal fatto che siano stati modificati o meno. Maggiore è il DOM, maggiore sarà il lavoro di calcolo richiesto, il che significa che la tua app potrebbe non rispondere all'input dell'utente.
La buona notizia è che i browser moderni stanno diventando davvero intelligenti nel limitare automaticamente la gamma di stili, layout e colorazione, il che significa che le cose stanno diventando più veloci senza che tu debba fare nulla.
La notizia ancora migliore è che è disponibile una nuova proprietà CSS che consegna agli sviluppatori i controlli dell'ambito: Containment.
Il contenitore CSS è una nuova proprietà con la parola chiave "contiene" che supporta quattro valori:
layoutpaintsizestyle
Ognuno di questi valori consente di limitare il lavoro di rendering necessario per il browser. Diamo un'occhiata a ciascun valore in modo più dettagliato.
Layout (contiene: layout)
Il contenimento del layout è probabilmente il maggiore vantaggio del contenimento, insieme a contain: paint.
Il layout è normalmente basato sui documenti e viene ridimensionato in base alle dimensioni del DOM. Pertanto, se modifichi la proprietà left di un elemento, potrebbe essere necessario controllare ogni singolo elemento nel DOM.
L'attivazione del contenimento qui può potenzialmente ridurre il numero di elementi a pochi elementi, anziché all'intero documento, consentendo al browser di risparmiare una gran quantità di lavoro superfluo e di migliorare notevolmente le prestazioni.
Verniciatura (contiene: vernice)
La vernice graduata è un altro vantaggio incredibilmente utile del contenimento. Il contenimento della vernice consente essenzialmente di tagliare l'elemento in questione, ma presenta anche alcuni altri effetti collaterali:
- Funge da blocco di contenimento per elementi posizionati in modo assoluto e con posizione fissa. Ciò significa che tutti gli elementi secondari vengono posizionati in base all'elemento con
contain: paint, non in altri elementi principali come ad esempio il documento. - Diventa un contesto di stack. Ciò significa che elementi come
z-indexavranno effetto sull'elemento e gli elementi secondari verranno raggruppati in base al nuovo contesto. - Diventa un nuovo contesto di formattazione. Ciò significa che se hai, ad esempio, un elemento a livello di blocco con contenimento della colorazione, questo verrà considerato come un nuovo ambiente di layout indipendente. Ciò significa che il layout all'esterno dell'elemento in genere non influisce sugli elementi secondari dell'elemento contenitore.
Dimensioni (contiene: dimensioni)
Ciò significa che 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), questo verrà visualizzato a 0 x 0 px.
Il contenimento delle taglie è in realtà una misura da cintura e bretelle per garantire di non fare affidamento sugli elementi secondari per il dimensionamento, ma da solo non offre grandi vantaggi in termini di prestazioni.
Stile (contiene: stile)
Può essere difficile prevedere quali saranno gli effetti della modifica degli stili di un elemento sull'albero DOM. Ne è un esempio la modifica dei contatori CSS, in cui la modifica di un contatore in un elemento secondario può influire sui valori del contatore con lo stesso nome utilizzato altrove nel documento. Se imposti contain: style, le modifiche di stile non verranno propagate di nuovo oltre l'elemento contenitore.
Per essere chiari, ciò che contain: style non offre è lo stile con ambito che si ottiene da Shadow DOM; il contenimento qui riguarda puramente la limitazione delle parti dell'albero che vengono prese in considerazione quando gli stili vengono mutati, non quando vengono dichiarati.
Rigoroso contenimento dei contenuti
Puoi anche combinare parole chiave, come contain: layout paint, che applicano solo quei comportamenti a un elemento. Tuttavia, "Content" contiene anche due valori aggiuntivi:
contain: strictsignifica uguale acontain: size layout paintcontain: contentsignifica uguale acontain: layout paint
L'utilizzo del contenimento fisso è ideale quando conosci le dimensioni dell'elemento in anticipo (o vuoi prenotarne le dimensioni), ma tieni presente che se dichiari il contenimento rigido senza dimensioni, a causa del contenimento implicito delle dimensioni, l'elemento potrebbe essere visualizzato come una casella di 0 x 0 px.
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 cercare di utilizzare per impostazione predefinita. Dovresti trattare il rigoroso contenimento come una via di fuga quando contain: content non è abbastanza forte per le tue esigenze.
Facci sapere come te la cavi
Il contenimento è un ottimo modo per iniziare a indicare al browser cosa vuoi mantenere isolato all'interno della pagina. Provalo in Chrome 52 e versioni successive e facci sapere come te la cavi.