Isolation - Propriété CSS

isolation

Résumé des caractéristiques de la propriété isolation

Description rapide
Autorise ou non les interactions entre les couches.
Statut
Standard
Utilisable sur
HTML
Valeurs prédéfinies
auto | isolate
Pourcentages
Ne s'appliquent pas.
Valeur initiale
auto
Héritée par défaut
Non.
Type d'animation
Not animable : la propriété isolation ne peut pas être animée.
Ordre canonique
Single : valeur unique (l'ordre n'intervient pas).
Module W3C
Compositions et mélanges
Références (W3C)
Statut du document: CR (document candidat à la recommandation)

Schéma syntaxique de isolation.

Isolation property - Syntax diagramSyntax diagram of the isolation CSS property. See stylescss.free.fr for details. auto auto isolate isolateisolation:;isolation:;
Schéma syntaxique de la propriété isolation.
Les liens du schéma donnent accès au détail des valeurs

Description de la propriété isolation.

Définit comment un élément doit interagir avec son parent, du point de vue des couleurs. Autrement dit isolation crée une couche d'isolation.

isolation est utile lorsque des modes de mélange ont été définis par les propriétés mix-blend-mode et background-blend-mode.

Valeurs pour isolation.

  • isolation: auto;

    Le navigateur décide s'il est nécessaire de créer un niveau d'isolation ou pas. Généralement aucun niveau d'isolation n'est créé.

    Les couleurs d'arrière-plan des ces deux éléments se mélangent.
    isolation:auto;
  • isolation: isolate;

    Un niveau d'isolation est créé. Ce qui veut dire que mix-blend-mode n'agit plus.

    Les couleurs d'arrière-plan des ces deux éléments ne se mélangent pas.
    isolation:isolate;
  • isolation: initial; (auto) isolation: inherit; isolation: revert; isolation: revertLayer; isolation: unset;

    Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Animation.

Il n'est pas possible d'animer la propriété isolation.

Simulateur avec la propriété isolation.

Voici comment est construite cette démonstration pour la propriété isolation : une image (le ballon) est dans un div transparent, qui est lui même dans un autre div avec un fond graphique (la texture aux oiseaux).

L'image est "mélangée" avec l'arrière-plan par sa propriété mix-blend-mode. On voit bien en effet que le motif aux oiseaux interagit avec le ballon. Précisons que le ballon lui-même est blanc et noir, qu'il n'a pas de parties transparentes.

Le simulateur applique la propriété isolation au div transparent. Observez que cet élément peut isoler l'image de l'arrière-plan et empêcher ainsi leur interaction.

Fonctionnement de la propriété isolation en CSS

 

isolation :
Exemple pour la propriété CSS isolation

Prise en charge de isolation par les navigateurs.

La propriété Isolation est correctement reconnue par les navigateurs actuels.
L'ancien navigateur Internet Explorer ne la prend pas en charge.

Colonne 1
État de la prise en charge par les navigateurs de la propriété isolation.
1
Propriété
isolation
Estimation de la prise en charge globale.
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse

Historique de la propriété isolation.

Voir aussi, au sujet des mélanges.

Les mélanges sont décrits dans le module Compositing and Blending. Toutes les propriétés qui s'y rapportent se trouvent dans ce module :

Propriétés :

background-blend-mode
Définit le mélange des couleurs entre image(s) d'arrière-plan et couleur d'arrière-plan.
mix-blend-mode
Définit le mode de mélange entre le contenu et ce qui est visible en arrière-plan de l'élément.

Voyez aussi notre tutoriel sur Les modes de fusion.