isolation: isolate: Das Vermischen bei den Blendmodi genau steuern (CSS3)
Geschrieben am:
Gute Nachricht: Firefox 36 unterstützt die Eigenschaft isolation bei den Blendmodi. Das habe ich zum Anlass genommen, meinen Artikel zu isolation: isolate vom Juni 2014 zu aktualisieren.
In den beiden bisherigen Teilen meiner Artikelserie habe ich schon die Eigenschaft background-blend-mode und mix-blend-mode vorgestellt. Jetzt fehlt noch die Eigenschaft isolation. Bei der Eigenschaft geht es um die Frage: Mit welchen Elternelementen finden Vermischungen statt, wenn man mix-blend-mode verwendet?
Dazu ein kleines Beispiel:
Wir haben ein div-Element mit einem Bild:
<body>
<div><img ..></div>
</body>body erhält eine blaue Hintergrundfarbe:
body { background-color: blue; }Das div-Element wird rot eingefärbt und außerdem in der Breite beschränkt:
div {
background-color: red;
width: 210px;
}Das Bild ist damit größer als das div-Element und ragt darüber hinaus - das ist wichtig.
Nun wird festgelegt, dass sich das Bild mit den Hintergründen vermischen soll (funktioniert im Firefox ab 36, Safari ab 7.1 oder Chrome 35, wenn das Flag chrome://flags/#enable-experimental-web-platform-features gesetzt ist):
img { mix-blend-mode: difference; }Womit vermischt sich jetzt das Bild? Mit beiden: Es steht halb auf dem roten Hintergrund des div-Elements und mischt sich mit diesem. Halb ragt es über das rote div heraus und mischt sich mit dem blauen Hintergrund von body.
Man kann jetzt aber auch bestimmen, dass sich das Bild zwar mit dem div-Element, aber nicht mit dem dahinterliegenden body vermischen soll. Dafür müssen wir das div-Element zu einem eigenen Stapelkontext machen (stacking context). Dazu existieren mehrere Methoden.
Wenn wir für das div-Element eine opacity bestimmen, kreiert es einen eigenen Stapelkontext und damit vermischt sich das Bild nur mit dem div, aber nicht mit dem body-Hintergrund.
div { opacity: .95; }
Eine andere Möglichkeit, einen Stapelkontext zu erstellen, besteht in der Positionierung und der Vergabe eines z-indexes:
div {
position: relative;
z-index: 2;
}Das Ergebnis ist dasselbe wie bei der Verwendung von opacity: Das Bild vermischt sich zwar mit dem div-Element, aber nicht mit body.
Positionierung in Kombination mit z-index oder auch die Eigenschaft opacity setzen aber nicht nur einen neuen Stapelkontext, sondern haben auch andere Wirkungen. Das ist anders bei der neuen Eigenschaft isolation. Sie dient dazu, einen neuen Stapelkontext für das Blending zu aktivieren.
In der Spezifikation vom W3C sind drei neue Eigenschaften definiert: background-blend-mode, mix-blend-mode und als drittes eben isolation. isolation erlaubt zwei Werte: auto und isolate. auto ist der Standard und bedeutet, dass kein neuer Stapelkontext kreiert wird, isolate hingegen bewirkt, dass das Element einen neuen Stapelkontext kreiert und damit keine Vermischung mit weiteren Elternelementen stattfindet.
div { isolation: isolate; }Das Ergebnis ist, dass ebenfalls keine Vermischung mit body erfolgt. Zu beachten ist, dass im Beispiel mix-blend-mode beim Bild, aber isolation beim übergeordneten Element angegeben ist.
isolation-Beispiel als externe Datei oder das isolation-Beispiel bei jSFiddle
Am Rande: Das Motto meiner kleinen Artikelserie "Will it blend" passt natürlich am besten zum dritten Teil. Und wem "Will it blend" nichts sagt, der findet unter diesem Ausdruck sehr schöne Videos bei Youtube, die beweisen, dass sich so gut wie alles im Mixer zerkleinern lässt ...