Isolation - CSS-Tricks

Anonim

Die isolationEigenschaft in CSS wird verwendet, um zu verhindern, dass Elemente mit ihren Hintergründen verschmelzen.

.module ( isolation: isolate; )

Es wird am häufigsten verwendet, wenn mix-blend-modees für ein anderes Element deklariert wurde. Durch Anwenden isolationauf das Element wird dieses Element geschützt, sodass es nicht mix-blend-modeauf die anderen Elemente angewendet wird, die möglicherweise dahinter stehen.

Mit anderen Worten, wenn mix-blend-modeüberlappende Elemente angewiesen werden, sich miteinander zu vermischen, isolationwird eine Ausnahme für die Elemente erstellt, auf die sie angewendet werden. Es ist wie eine Möglichkeit, den Mix-Blend-Modus zu deaktivieren, jedoch von einem übergeordneten Element aus, anstatt das Element mit direkter Überblendung auswählen zu müssen.

Werte

  • isolate: Tut genau das, was es sagt. Es schützt das Element vor dem Verschmelzen mit anderen Elementen im Hintergrund.
  • auto: Setzt die Isolation zurück und lässt das Element in den Hintergrund übergehen.

Siehe die Stiftisolierung Cha-Cha-Cha von CSS-Tricks (@ css-Tricks) auf CodePen.

Ein Anwendungsfall

Maria Antonietta Perna, die für SitePoint schrieb, erstellte eine Demo, die den Punkt besonders gut nach Hause bringt. Wir haben diese Grafik erstellt, um ihre Demo zu erklären:

Siehe die Text- / Bildmischung mit Stift-Mischmodus von SitePoint (@SitePoint) auf CodePen.

Wo es nicht funktioniert

Sie können erwarten isolation, Elemente zu isolieren, wenn sie background-blend-modeverwendet werden, aber das ist nicht der Fall. Hintergrundelemente sind von Natur aus bereits dadurch isoliert, dass sie nicht mit dem dahinter stehenden Inhalt verschmelzen.

Ein weiterer Punkt, an isolationdem es ungültig zu sein scheint, ist, wenn es in Verbindung mit translatedemselben Element verwendet wird. Sie könnten darauf stoßen, wenn Sie versuchen, ein Element sowohl vertikal als auch horizontal mithilfe der absolutePositionierung und translatezusammen zu zentrieren:

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

Die Verwendung von translatescheint das Element ohne die Verwendung selbst zu isolieren isolation.

verbunden

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

Mehr Informationen

  • W3C-Spezifikation
  • Isolation auf MDN
  • Isolierung auf Codrops
  • SitePoint: Eine Nahaufnahme Sehen Sie sich die Eigenschaft CSS-Mix-Blend-Modus an

Browser-Unterstützung für Isolate

Chrom Safari Feuerfuchs Oper IE / Edge Android iOS
41 7.1 36 30 Nee 41 8.4

Kann ich ... Browser-Unterstützung für den Mix-Blend-Modus verwenden?

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
41 32 Nein 79 TP

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 14.0-14.4