oujood.com

La propriété css "isolation" pour définir si un élément doit créer un nouveau contenu empilé

La propriété d'isolement "isolation" est utilisée en conception de mise en page pour déterminer si un élément doit créer un nouveau contenu empilé ou s'il doit être inclus dans le contenu existant.
Cette propriété est généralement utilisée pour les éléments tels que les images et les iframes.

chercher |

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éfautauto
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.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion417136 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>




Voir aussi nos tutoriel :

Calculer l'âge en utilisant JavaScript

JavaScript offre certaines fonctions intégrées de date et d'heure, qui permettent de calculer l'âge à partir d'une date (date de naissance par exemple).

Les boucles de js

Les boucles de js

XPATH axes

XPATH axes