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.
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. isolation est utile lorsque des modes de mélange ont été définis (voir 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éé.

  • isolation: isolate;

    Un niveau d'isolation est créé.

Valeurs communes :

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 par les navigateurs (compatibilité).

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

1
Propriété
isolation
Estimation de la prise en charge globale.
94%

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.