Propriété CSS isolation
Apprenez comment CSS isolation: isolate crée un nouveau contexte d'empilement pour contenir les effets mix-blend-mode et filter, avec exemples et compatibilité navigateur.
La propriété CSS isolation contrôle si un élément doit créer un nouveau contexte d'empilement. Ses deux valeurs sont auto (la valeur par défaut — laisser le navigateur décider) et isolate (toujours en créer un, inconditionnellement).
Un contexte d'empilement est une couche autonome que le navigateur peint comme une unité. Les éléments qui s'y trouvent sont ordonnés les uns par rapport aux autres via z-index, mais ils n'interfèrent jamais avec les éléments d'un contexte d'empilement différent. Chaque document commence avec un contexte d'empilement racine ; d'autres sont créés dès que certaines propriétés CSS sont appliquées.
isolation est particulièrement utile aux côtés de mix-blend-mode. Par défaut, mix-blend-mode fusionne un élément avec tout ce qui est empilé en dessous — y compris l'arrière-plan de la page et des sections sans rapport situées plus haut dans le DOM. Définir isolation: isolate sur un parent crée une limite : la fusion ne se produit qu'au sein du sous-arbre de ce parent, pas vis-à-vis du reste de la page.
Lors de l'utilisation de background-blend-mode, isolation est inutile — les couches d'arrière-plan ne se fondent qu'avec d'autres couches d'arrière-plan du même élément.
Quand l'utiliser
- Délimiter un groupe de fusion. Vous avez des images ou du texte qui se chevauchent en utilisant
mix-blend-modeet vous souhaitez qu'ils se fondent entre eux, mais pas avec le reste de la page. Enveloppez-les dans un conteneur avecisolation: isolate. - Protéger un composant réutilisable. Une carte ou un widget doit avoir le même aspect quel que soit l'arrière-plan sur lequel il repose. Isoler sa racine empêche les couleurs extérieures de s'infiltrer à travers les modes de fusion internes.
- Créer un contexte d'empilement sans effets secondaires. Plusieurs propriétés créent implicitement des contextes d'empilement —
opacityen dessous de1, transform, filter, will-change, et unz-indexnon automatique sur un élément positionné — mais elles modifient toutes la mise en page ou l'apparence.isolation: isolatecrée le contexte d'empilement et rien d'autre.
isolation ne modifie pas l'apparence de l'élément ni la façon dont l'espace est alloué. Son seul effet est de déterminer si un nouveau contexte d'empilement est créé. C'est donc la manière la plus propre d'établir la limite lorsque vous en avez besoin sans autres conséquences visuelles.
Référence de la propriété
| Valeur initiale | auto |
| S'applique à | Tous les éléments |
| Héritée | Non |
| Animable | Non |
| Version | CSS3 |
| Syntaxe DOM | element.style.isolation = "isolate" |
Syntaxe
isolation: auto | isolate | initial | inherit;Valeurs
| Valeur | Description |
|---|---|
auto | Aucun nouveau contexte d'empilement n'est créé, sauf si une autre propriété (comme mix-blend-mode ou filter) l'exige. C'est la valeur par défaut. |
isolate | Crée toujours un nouveau contexte d'empilement sur l'élément, confinant les opérations de fusion et de composition à ce contexte. |
initial | Réinitialise la propriété à sa valeur par défaut (auto). |
inherit | Hérite de la valeur de l'élément parent. |
Exemples
Contenir mix-blend-mode avec isolation
Les deux boîtes ci-dessous utilisent un balisage intérieur identique — un <div> avec mix-blend-mode: difference. La seule différence est l'enveloppe : la première utilise isolation: auto ; la seconde utilise isolation: isolate.
Avec auto, la fusion difference traverse l'enveloppe et se mélange avec l'arrière-plan gris de la page (#ccc provenant du conteneur extérieur). Avec isolate, un nouveau contexte d'empilement est créé au niveau de l'enveloppe, de sorte que la fusion ne voit que le propre arrière-plan de l'enveloppe — pas la page environnante.
<!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>Résultat
Isoler un titre fusionné sur une image
Ici, un titre utilise mix-blend-mode: overlay pour se fondre avec une photo. Sans isolation: isolate sur le titre, l'overlay se mélange également avec l'arrière-plan #eee du body là où le titre dépasse l'image. L'ajout de isolation: isolate confine la fusion au propre contexte d'empilement du titre, rendant l'effet cohérent sur toute la largeur.
<!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>Comment les contextes d'empilement sont créés
isolation: isolate est l'une des nombreuses façons de déclencher un nouveau contexte d'empilement. Le tableau ci-dessous liste les déclencheurs les plus courants et indique s'ils ont des effets secondaires visuels ou de mise en page :
| Déclencheur | Effet secondaire |
|---|---|
isolation: isolate | Aucun — contexte d'empilement uniquement |
opacity inférieure à 1 | Modifie la transparence de l'élément |
transform (toute valeur sauf none) | Déplace ou redéfinit la forme de l'élément |
filter (toute valeur sauf none) | Applique un effet visuel |
will-change avec transform ou opacity | Peut promouvoir l'élément vers sa propre couche de composition |
z-index non automatique sur un élément positionné | Modifie l'ordre d'empilement |
Lorsque vous avez besoin uniquement de la limite — sans transparence, sans changement visuel, sans réordonnancement — utilisez isolation: isolate.
Points à garder à l'esprit
isolationn'est pas héritée. La définir sur un parent ne provoque pas la création de contextes d'empilement propres pour les enfants.- La propriété ne prend effet que sur les éléments qui participent eux-mêmes à un contexte d'empilement (en pratique, tous les éléments de niveau bloc et inline, les éléments SVG, et les enfants flex/grid).
- Inspectez les limites des contextes d'empilement avec les DevTools du navigateur : Firefox affiche l'icône de contexte d'empilement à côté des éléments dans le panneau Calques ; Chrome affiche les informations sur le contexte d'empilement dans l'onglet Calculé.
- La compatibilité navigateur est excellente — tous les navigateurs evergreen prennent en charge
isolationdepuis 2015. Aucun préfixe n'est nécessaire.
Propriétés associées
- mix-blend-mode — fusionne un élément avec le contenu situé en dessous ;
isolationcontrôle où cette fusion s'arrête. - background-blend-mode — fusionne les propres couches d'arrière-plan d'un élément entre elles.
- filter — applique des effets graphiques tels que le flou et la nuance de gris ; crée également implicitement un contexte d'empilement.
- opacity — un autre déclencheur de contexte d'empilement ; les valeurs inférieures à
1rendent l'élément semi-transparent. - transform — déplace, fait pivoter ou redimensionne un élément ; crée également un contexte d'empilement.
- z-index — contrôle l'ordre d'empilement au sein d'un contexte d'empilement.