Proprietà CSS isolation
Scopri come CSS isolation: isolate crea un nuovo contesto di sovrapposizione per contenere effetti mix-blend-mode e filter, con esempi e note sul supporto browser.
La proprietà CSS isolation controlla se un elemento deve creare un nuovo contesto di sovrapposizione. I suoi due valori sono auto (il predefinito — lascia decidere al browser) e isolate (crea sempre uno, incondizionatamente).
Un contesto di sovrapposizione è un livello autonomo che il browser dipinge come un'unità. Gli elementi al suo interno sono ordinati l'uno rispetto all'altro usando z-index, ma non si sovrappongono mai con elementi di un contesto di sovrapposizione diverso. Ogni documento inizia con un contesto di sovrapposizione radice; altri vengono creati quando vengono applicate determinate proprietà CSS.
isolation è più utile insieme a mix-blend-mode. Per impostazione predefinita, mix-blend-mode mescola un elemento con tutto ciò che è posizionato sotto di esso — incluso lo sfondo della pagina e sezioni non correlate in alto nel DOM. Impostare isolation: isolate su un genitore crea un confine: la fusione avviene solo all'interno del sottoalbero di quel genitore, non rispetto al resto della pagina.
Quando si usa background-blend-mode, isolation non è necessario — i livelli di sfondo si fondono solo con altri livelli di sfondo dello stesso elemento.
Quando usarlo
- Limitare un gruppo di fusione. Hai immagini o testo sovrapposti che usano
mix-blend-modee vuoi che si fondano tra loro ma non con il resto della pagina. Racchiudili in un contenitore conisolation: isolate. - Proteggere un componente riutilizzabile. Una card o un widget dovrebbe apparire allo stesso modo indipendentemente dallo sfondo su cui è posizionato. Isolare la sua radice impedisce ai colori esterni di infiltrarsi attraverso le modalità di fusione al suo interno.
- Creare un contesto di sovrapposizione senza effetti collaterali. Diverse proprietà creano implicitamente contesti di sovrapposizione —
opacityinferiore a1, transform, filter, will-change, e unz-indexnon-auto su un elemento posizionato — ma tutte modificano il layout o l'aspetto.isolation: isolatecrea il contesto di sovrapposizione e nient'altro.
isolation non cambia l'aspetto dell'elemento né la distribuzione dello spazio. Il suo unico effetto è se viene creato un nuovo contesto di sovrapposizione. Questo lo rende il modo più pulito per stabilire il confine quando ne hai bisogno senza altre conseguenze visive.
Riferimento alla proprietà
| Valore iniziale | auto |
| Si applica a | Tutti gli elementi |
| Ereditata | No |
| Animabile | No |
| Versione | CSS3 |
| Sintassi DOM | element.style.isolation = "isolate" |
Sintassi
isolation: auto | isolate | initial | inherit;Valori
| Valore | Descrizione |
|---|---|
auto | Non viene creato nessun nuovo contesto di sovrapposizione a meno che un'altra proprietà (come mix-blend-mode o filter) non lo richieda. Questo è il valore predefinito. |
isolate | Crea sempre un nuovo contesto di sovrapposizione sull'elemento, confinando le operazioni di fusione e compositing a quel contesto. |
initial | Reimposta la proprietà al suo valore predefinito (auto). |
inherit | Eredita il valore dall'elemento genitore. |
Esempi
Contenere mix-blend-mode con isolation
Le due caselle qui sotto utilizzano markup interno identico — un <div> con mix-blend-mode: difference. L'unica differenza è il wrapper: il primo usa isolation: auto; il secondo usa isolation: isolate.
Con auto, la fusione difference attraversa il wrapper e si mescola con lo sfondo grigio della pagina (#ccc dal contenitore esterno). Con isolate, viene creato un nuovo contesto di sovrapposizione al livello del wrapper, quindi la fusione vede solo lo sfondo del wrapper stesso — non la pagina circostante.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.a {
background-color: #ccc;
}
#isolation-example {
width: 300px;
height: 300px;
}
.c {
width: 100px;
height: 100px;
border: 1px solid #000;
padding: 10px;
mix-blend-mode: difference;
}
#isolation-example1 {
isolation: auto;
}
#isolation-example2 {
isolation: isolate;
}
</style>
</head>
<body>
<h2>Isolation property example</h2>
<div id="isolation-example" class="a">
<div id="isolation-example1">
<div class="a c">isolation: auto;</div>
</div>
<div id="isolation-example2">
<div class="a c">isolation: isolate;</div>
</div>
</div>
</body>
</html>Risultato
Isolare un titolo mescolato su un'immagine
Qui un titolo usa mix-blend-mode: overlay per fondersi con una foto. Senza isolation: isolate sul titolo, l'overlay si fonde anche con lo sfondo #eee del corpo dove il titolo si estende oltre l'immagine. Aggiungere isolation: isolate confina la fusione al proprio contesto di sovrapposizione del titolo, mantenendo l'effetto uniforme sull'intera larghezza.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
* {
box-sizing: border-box;
}
body {
background-color: #eee;
color: #555;
font-size: 1.1em;
font-family: Roboto, Helvetica, Arial, sans-serif;
}
.isolation-example {
margin: 1em auto;
width: 100%;
max-width: 814px;
position: relative;
}
img {
width: 100%;
}
.isolation-example h1 {
position: absolute;
top: 5em;
color: white;
text-align: center;
font-size: 40px;
width: 100%;
text-transform: uppercase;
background-color: #000;
padding: .5em .25em;
mix-blend-mode: overlay;
isolation: isolate;
}
</style>
</head>
<body>
<h2>Isolation property example</h2>
<div class="isolation-example">
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Yellow tree." />
<div class="element">
<h1>House</h1>
</div>
</div>
</body>
</html>Come vengono creati i contesti di sovrapposizione
isolation: isolate è uno dei tanti modi per attivare un nuovo contesto di sovrapposizione. La tabella seguente elenca i trigger più comuni e se hanno effetti collaterali visivi o di layout:
| Trigger | Effetto collaterale |
|---|---|
isolation: isolate | Nessuno — solo contesto di sovrapposizione |
opacity inferiore a 1 | Modifica la trasparenza dell'elemento |
transform (qualsiasi valore tranne none) | Sposta o ridisegna l'elemento |
filter (qualsiasi valore tranne none) | Applica un effetto visivo |
will-change con transform o opacity | Può promuovere l'elemento al proprio livello compositor |
z-index non-auto su un elemento posizionato | Modifica l'ordine di sovrapposizione |
Quando hai bisogno solo del confine — nessuna trasparenza, nessuna modifica visiva, nessun riordinamento — usa isolation: isolate.
Cose da tenere a mente
isolationnon è ereditata. Impostarla su un genitore non fa sì che i figli ottengano i propri contesti di sovrapposizione.- La proprietà ha effetto solo sugli elementi che partecipano essi stessi a un contesto di sovrapposizione (in pratica, tutti gli elementi block e inline, gli elementi SVG e i figli flex/grid).
- Ispeziona i confini del contesto di sovrapposizione con i DevTools del browser: Firefox mostra l'icona del contesto di sovrapposizione accanto agli elementi nel pannello Layers; Chrome mostra le informazioni sul contesto di sovrapposizione nella scheda Computed.
- Il supporto browser è eccellente — tutti i browser evergreen supportano
isolationdal 2015. Non è necessario alcun prefisso.
Proprietà correlate
- mix-blend-mode — mescola un elemento con il contenuto sottostante;
isolationcontrolla dove si ferma quella fusione. - background-blend-mode — mescola i livelli di sfondo propri di un elemento tra loro.
- filter — applica effetti grafici come sfocatura e scala di grigi; crea anche implicitamente un contesto di sovrapposizione.
- opacity — un altro trigger del contesto di sovrapposizione; valori inferiori a
1rendono l'elemento semi-trasparente. - transform — sposta, ruota o scala un elemento; crea anche un contesto di sovrapposizione.
- z-index — controlla l'ordine di sovrapposizione all'interno di un contesto di sovrapposizione.