Propriété CSS isolation

La propriété isolation vous permet de créer un nouveau contexte d'empilement. Elle est couramment utilisée conjointement avec la propriété mix-blend-mode.

Lors de l'utilisation de background-blend-mode, la propriété isolation n'est pas nécessaire car les calques d'arrière-plan ne se mélangent qu'entre eux, et non avec le contenu de la page situé en dessous.

INFO

En CSS, la propriété isolation est principalement utilisée pour isoler les effets mix-blend-mode ou filter, les empêchant d'affecter les contextes d'empilement parent ou enfant.

Valeur initiale	auto
S'applique à	Tous les éléments.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	Object.style.isolation = "isolate";

Syntaxe

Syntaxe CSS de isolation

css

isolation: auto | isolate | initial | inherit;

Exemple de la propriété isolation :

Exemple de code CSS isolation

html

<!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>

Try it Yourself »

Résultat

CSS isolation another

Exemple de la propriété isolation avec la propriété mix-blend-mode :

Autre exemple de code CSS isolation

html

<!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="https://fr.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Yellow tree." />
      <div class="element">
        <h1>House</h1>
      </div>
    </div>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description
auto	Aucun nouveau contexte d'empilement n'est créé, sauf si d'autres propriétés (comme mix-blend-mode ou filter) l'exigent. Il s'agit de la valeur par défaut.
isolate	Crée un contexte d'empilement sur un élément et isole le groupe.
initial	Définit la valeur par défaut de la propriété.
inherit	Hérite la propriété de l'élément parent.

Practice

Que fait la propriété 'isolation' en CSS ?

Elle active la reconnaissance vocale.Elle contrôle la création d'un nouveau contexte d'empilement local.Elle change la couleur du texte.Elle permet d'isoler un élément de son arrière-plan et de modifier l'ordre d'empilement d'un groupe d'éléments.

Propriété CSS isolation ​

Syntaxe ​

Exemple de la propriété isolation : ​

Résultat ​

Exemple de la propriété isolation avec la propriété mix-blend-mode : ​

Valeurs ​