isolation

Die CSS-Eigenschaft isolation wird verwendet, um zu verhindern, dass sich Elemente mit ihren Hintergründen mischen.

.module {
  isolation: isolate;
}

Sie wird am häufigsten verwendet, wenn mix-blend-mode auf einem anderen Element deklariert wurde. Die Anwendung von isolation auf das Element schützt dieses Element, sodass es nicht den mix-blend-mode erbt, der auf andere Elemente angewendet wird, die sich dahinter befinden könnten.

Mit anderen Worten, wenn mix-blend-mode überlappenden Elementen sagt, dass sie sich miteinander mischen sollen, dann schafft isolation eine Ausnahme für die Elemente, auf die sie angewendet wird. Es ist wie eine Möglichkeit, mix-blend-mode auszuschalten, aber von einem übergeordneten Element aus, anstatt das Element mit der Mischung direkt auswählen zu müssen.

Werte

• isolate: Tut genau das, was es sagt. Es schützt das Element davor, sich mit anderen Elementen im Hintergrund zu mischen.
• auto: Setzt die Isolation zurück und erlaubt dem Element, sich mit seinem Hintergrund zu mischen.

Siehe den Pen Isolation Cha-Cha-Cha von CSS-Tricks (@css-tricks) auf CodePen.

Ein Anwendungsfall

Maria Antonietta Perna hat für SitePoint geschrieben und eine Demo erstellt, die den Punkt besonders gut verdeutlicht. Wir haben diese Grafik erstellt, um ihre Demo zu erklären.

Siehe den Pen Text/Bild-Mischung mit mix-blend-mode von SitePoint (@SitePoint) auf CodePen.

Wo es nicht funktioniert

Man könnte erwarten, dass isolation Elemente isoliert, wenn background-blend-mode verwendet wird, aber das ist nicht der Fall. Hintergrundelemente sind von Natur aus bereits isoliert, da sie sich nicht mit dem Inhalt hinter ihnen mischen.

Ein weiterer Punkt, an dem isolation scheinbar ungültig wird, ist, wenn es in Verbindung mit translate auf demselben Element verwendet wird. Dies könnte Ihnen begegnen, wenn Sie versuchen, ein Element sowohl vertikal als auch horizontal mit absolute Positionierung und translate zu zentrieren.

.module {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  isolation: isolate;
}

Die Verwendung von translate scheint das Element von sich aus zu isolieren, ohne die Verwendung von isolation.

Verwandt

• mix-blend-mode
• background-blend-mode

Weitere Informationen

• W3C-Spezifikation
• isolation auf MDN
• isolation auf Codrops
• SitePoint: Ein genauerer Blick auf die CSS-Eigenschaft mix-blend-mode

Browserunterstützung für isolate

Chrome	Safari	Firefox	Opera	IE/Edge	Android	iOS
41	7.1	36	30	Nein	41	8.4

Can I Use… Browserunterstützung für mix-blend-mode