isolation
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
La propriété isolation
indique que l'élément crée un nouveau contexte d'empilement (stacking context).
Exemple interactif
Cette propriété s'avère particulièrement utile avec mix-blend-mode
afin de ne mélanger que l'arrière plan d'un contexte d'empilement particulier.
Syntaxe
/* Valeurs avec mots-clés */
isolation: auto;
isolation: isolate;
/* Valeurs globales */
isolation: inherit;
isolation: initial;
isolation: unset;
La propriété isolation
est définie avec l'un des mots-clés suivants.
Valeurs
Définition formelle
Valeur initiale | auto |
---|---|
Applicabilité | Tous les éléments. En SVG, cela s'applique aux éléments de conteneurs, aux éléments graphiques et aux éléments faisant référence à des éléments graphiques. |
Héritée | non |
Valeur calculée | comme spécifié |
Type d'animation | Not animatable |
Syntaxe formelle
isolation =
<isolation-mode>
<isolation-mode> =
auto |
isolate
Exemples
CSS
.a {
background-color: rgb(0, 255, 0);
}
#b {
width: 200px;
height: 210px;
}
.c {
width: 100px;
height: 100px;
border: 1px solid black;
padding: 2px;
mix-blend-mode: difference;
}
#d {
isolation: auto;
}
#e {
isolation: isolate;
}
HTML
<div id="b" class="a">
<div id="d">
<div class="a c">auto</div>
</div>
<div id="e">
<div class="a c">isolate</div>
</div>
</div>
Résultat
Spécifications
Specification |
---|
Compositing and Blending Level 2 # isolation |
Compatibilité des navigateurs
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
isolation |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support