OUJOOD.COM
La propriété d'isolement "isolation" en CSS permet de déterminer si un élément doit créer un nouveau contenu empilé ou s'intégrer dans le contenu existant. Elle est généralement utilisée pour les éléments tels que les images et les iframes.
Créer un nouveau contenu empilé
Lorsqu'un élément est défini comme isolé, il crée un nouveau contenu empilé qui est séparé du contenu existant. Cela signifie que tout le contenu à l'intérieur de cet élément ne sera pas affecté par les styles ou les règles de mise en page appliquées aux éléments parent. Par exemple, si nous voulons que l'image suivante soit isolée on utilise la valeur "isolate" comme le montre l'exemple:
<img src="image.jpg" style="isolation: isolate;">
Intégrer dans le contenu existant
Si un élément n'est pas défini comme isolé, il sera inclus dans le contenu existant et les styles et les règles de mise en page appliquées aux éléments parent seront également appliquées à l'élément en question. Cela peut être utile pour les éléments qui doivent être alignés ou formater de manière similaire à d'autres éléments sur la page. L'exemple suivant montre comment inclure un élément dans le contenu existant :
<img src="image.jpg" style="isolation: auto;">
Définir la propriété d'isolement
La propriété d'isolement peut être définie en utilisant la propriété CSS "isolation". La valeur par défaut pour cette propriété est "auto", ce qui signifie que l'élément suivra les règles de mise en page de son parent. Si vous souhaitez définir un élément comme isolé, vous pouvez utiliser la valeur "isolate".
En résumé, la propriété d'isolement est un outil puissant pour les designers de mise en page qui leur permet de définir si un élément doit créer un nouveau contenu empilé ou être inclus dans le contenu existant. Cela peut être utile pour les éléments tels que les images et les iframes qui nécessitent une mise en page spécifique.
CSS Syntaxe CSS
isolation: auto|isolate|initial|inherit;Valeurs de la propriété :
auto : Valeur par défaut. Elle crée un nouvel élément de pile lorsque cela est nécessaire.
isolate : Il empêche l'élément de se mélanger. Il crée un nouvel élément empilé.
initial : Il définit la propriété d'isolation à sa valeur par défaut.
inherit : Cette propriété est héritée de son parent.
| Valeurs par défaut | auto |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.isolation="isolate"; |
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 41 | 71 | 36 | oui | 30 |
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>CSS la propriété isolation</title>
<style>
h1{color:#003668;}
.a {
background-color: lightgreen;
}
#b {
width: 250px;
height: 250px;
}
.c {
width: 100px;
height: 100px;
border: 1px solid black;
padding: 2px;
mix-blend-mode: difference;
}
#d {
isolation: auto;
}
#e {
isolation: isolate;
}
</style>
</head>
<body>
<h1>CSS la propriété isolation</h1>
<div id="b" class="a">
<div id="d">
<div class="a c">div d: isolation: auto;</div>
</div>
<div id="e">
<div class="a c">div e: isolation: isolate;</div>
</div>
</div>
</body>
</html>