La containproprietà in CSS indica al browser che l'elemento e i suoi discendenti sono considerati il più possibile indipendenti dall'albero del documento. Ciò fornisce potenzialmente vantaggi in termini di prestazioni con calcoli di layout, stile, colore, dimensioni o qualsiasi combinazione per un'area limitata del DOM e non l'intera pagina.
La proprietà ha cinque valori standard e due valori abbreviati che combinano variazioni dei valori standard. Ogni valore ha dei vantaggi unici e condivisi a seconda del contesto dell'elemento che li applica.
L'utilizzo tipico di questa proprietà è un elemento che contiene contenuti di qualche tipo. Considera un widget che esegue il rendering dei dati in entrata che cambia il layout e le immagini dei discendenti dell'elemento. Un altro elemento da considerare è quello che contiene i risultati di dati di terze parti, come un banner pubblicitario, in cui i vantaggi del contenimento ci consentono di de-prioritizzare determinati contenuti, come gestire il dimensionamento del contenuto ricevuto o determinare se dovrebbe anche essere visibile. Un sito per lo più statico, d'altra parte, riceverà pochi vantaggi oltre al primo layout e alla pittura sullo schermo al caricamento della pagina.
Sintassi
div ( contain: none | strict | content | ( size || layout || style || paint ); )div ( contain: none; /* no containment on element */ contain: layout; /* influences how element relates to other elements in the document */ contain: paint; /* influences how element is painted to screen */ contain: size; /* influences how element affects size calculations for the page */ contain: style; /* is considered at-risk for removal from spec */
contain: content; /* combines layout and paint */ contain: strict; /* combines layout, paint, and size */ )Valori delle proprietà
disposizione
Il layoutvalore di contenimento informa il browser che nessuno dei discendenti dell'elemento influisce su altri elementi nella pagina, né quegli altri elementi hanno alcun effetto sui discendenti dell'elemento contenuto. Ciò consente al browser di ridurre potenzialmente il numero di calcoli necessari durante la creazione del layout di pagina
Un altro vantaggio è che se l'elemento contenuto è fuori dallo schermo o oscurato in qualche modo, il browser potrebbe ritardare o spostare i calcoli correlati a una priorità inferiore. Un esempio di ciò è un elemento contenuto non in vista alla fine di un elemento di blocco e l'inizio di tale elemento di blocco è visibile.
Un elemento con layoutcontenimento diventa una scatola di contenimento per discendenti posizionati - come elementi con posizionamento assoluto. L'elemento riceve un nuovo contesto di sovrapposizione in relazione alla pagina e z-indepuò essere utilizzata la proprietà x. Tuttavia, le proprietà direzionali, come topo left, non si applicano.
Anche se i discendenti dell'elemento contenuto possono non influenzare altri elementi nella pagina, possono comunque influenzare il loro elemento antenato contenuto. Ad esempio, un discendente può causare il ridimensionamento dell'elemento contenuto in reazione alle modifiche. In tal caso, l'elemento contenuto può ancora potenzialmente influenzare altri elementi nella pagina ma i discendenti non saranno comunque coinvolti in quei calcoli.
La seguente demo fornisce una semplice spiegazione di ciò che accade quando layoutviene applicato il contenimento. Quando si fa clic su ciascuna delle caselle superiori, viene applicato il contenimento e le frecce rosse cambieranno aspetto. L'aspetto delle frecce rosse suggerisce se i discendenti della casella influenzano le altre caselle della pagina durante i calcoli del layout.
Dipingere
Il paintvalore di contenimento informa il browser che nessuno dei discendenti dell'elemento verrà dipinto al di fuori del riquadro di confine dell'elemento. Se un elemento discendente è posizionato in modo che una parte del suo riquadro di delimitazione venga ritagliata dagli elementi contenuti, border-boxquella parte non deve essere dipinta. Se un elemento discendente è posizionato completamente al di fuori dell'elemento contenuto, border-boxnon viene dipinto affatto. È simile all'applicazione overflow: hidden;all'elemento, ma senza i vantaggi di saltare o ridurre i calcoli necessari.
Un altro vantaggio è che se l'elemento contenuto non è visibile in qualche modo all'interno della finestra, potrebbe saltare i discendenti dell'elemento durante l'esecuzione dei calcoli di pittura. Un esempio di ciò è un elemento che viene posizionato al di fuori della pagina a sinistra della visualizzazione. Se l'elemento contenuto non è visibile, allora è una garanzia che il suo contenuto non sarà visibile. Pertanto, non devono essere coinvolti nei calcoli della vernice.
Un elemento con il paintcontenimento diventa anche una scatola di contenimento per discendenti posizionati - come elementi con posizionamento assoluto. L'elemento riceve anche un nuovo contesto di impilamento in relazione alla pagina e la z-indexproprietà può essere utilizzata. Tuttavia, le proprietà direzionali, come topo left, non si applicano.
Un elemento di scorrimento può ottenere ulteriori vantaggi avendo i suoi discendenti collocati in un nuovo strato di pittura che può aiutare con le prestazioni di scorrimento. Normalmente, gli elementi di scorrimento possono causare ridisegni costanti quando i discendenti appaiono e scompaiono durante lo scorrimento. Un elemento a scorrimento con il contenimento della vernice può potenzialmente saltare questa costante riverniciatura dei discendenti in scorrimento.
La seguente demo fornisce una semplice spiegazione di ciò che accade quando paintviene applicato il contenimento. Fare clic in un punto qualsiasi per attivare o disattivare il contenimento sulla scatola viola. Quando viene applicato il contenimento, alcune delle caselle verdi cambiano aspetto. L'aspetto delle scatole verdi mostra come sono dipinte o non dipinte.
Taglia
Il sizevalore di contenimento informa il browser che nessuno dei discendenti deve essere considerato quando si eseguono calcoli di layout per la pagina. L'elemento contenuto deve avere heighte widthproprietà applicate, altrimenti verrà compresso a zero pixel quadrati. Solo l'elemento stesso deve essere considerato per i calcoli del layout di pagina poiché i discendenti non possono influenzare la dimensione dell'elemento. I discendenti dell'elemento contenuto vengono completamente ignorati in tali calcoli; come se non avesse discendenti.
Per tutti i vantaggi dell'ottimizzazione, il sizecontenimento viene solitamente applicato con altri tipi di contenimento.
Un elemento con il sizecontenimento riceve un nuovo contesto di impilamento rispetto alla pagina e la z-indexproprietà può essere utilizzata. Tuttavia, le proprietà direzionali, come topo left, non si applicano.
La seguente demo fornisce una semplice spiegazione di ciò che accade quando sizeviene applicato il contenimento. Fare clic in un punto qualsiasi per attivare o disattivare il contenimento sulla scatola viola. Quando viene applicato il contenimento, la scatola viola cambia di dimensione. Di default l'altezza del box viola è definita dai suoi figli, ma con il contenimento l'altezza deve essere definita. Una volta applicato il contenimento, i discendenti non sono più coinvolti nei calcoli di layout relativi alle dimensioni.
Stile
Il stylevalore di contenimento informa il browser che alcune proprietà CSS, come contatori e virgolette, avranno come ambito l'elemento contenuto.
Le proprietà counter-incremente counter-setdevono avere come ambito il sottoalbero dell'elemento contenuto. Se esteso al di fuori dell'elemento contenuto, viene creato un nuovo contatore.
I valori della proprietà dei contenuti su open-quote, close-quote, no-open-quote, e no-close-quotedevono limitare l'ambito a sub-albero dell'elemento contenute.
Questo valore di contenimento è considerato a rischio di essere rimosso dalla specifica.
Soddisfare
Il contentvalore di contenimento è una combinazione dei valori di contenimento del layout e della vernice. Questo è l'equivalente dell'applicazione del contenimento in questo modo:
div ( contain: layout paint; )Tutti i potenziali vantaggi sopra descritti per ciascun valore sarebbero quindi disponibili per l'elemento contenuto. Questo contenimento sarebbe considerato relativamente sicuro da applicare ampiamente a più elementi nella pagina.
Rigoroso
Il strictvalore di contenimento è una combinazione delle layout, painte sizevalori di contenimento. Questo è l'equivalente dell'applicazione del contenimento in questo modo:
div ( contain: layout paint size; )Tutti i potenziali vantaggi sopra descritti per ciascun valore sarebbero quindi disponibili per l'elemento contenuto.
Essendo il "più rigoroso" dei valori di contenimento, questo valore deve essere utilizzato con attenta considerazione. Ciò è dovuto ai requisiti dimensionali che impone all'elemento contenuto. Con questi requisiti, questo valore di contenimento offre i più potenziali vantaggi in termini di prestazioni del contenimento.
Supporto del browser
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 52 | 69 | No | 79 | No |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | No |