Isolatie - CSS-trucs

Anonim

De isolationeigenschap in CSS wordt gebruikt om te voorkomen dat elementen versmelten met hun achtergronden.

.module ( isolation: isolate; )

Het wordt het meest gebruikt wanneer het mix-blend-modeop een ander element is gedeclareerd. Door isolationop het element toe te passen, wordt dat element bewaakt, zodat het niet het mix-blend-modetoegepaste op de andere elementen erachter overneemt.

Met andere woorden, als mix-blend-modeoverlappende elementen met elkaar overvloeien, wordt isolationeen uitzondering gemaakt voor de elementen waarop het wordt toegepast. Het is als een manier om de mix-blend-modus uit te schakelen, maar vanuit een bovenliggend element in plaats van het element met blending direct te moeten selecteren.

Waarden

  • isolate: Doet precies wat het zegt. Het beschermt het element tegen vermenging met andere elementen op de achtergrond.
  • auto: Stelt de isolatie opnieuw in en laat het element opgaan in de achtergrond.

Zie de Pen Isolation Cha-Cha-Cha door CSS-Tricks (@ css-tricks) op CodePen.

Een use case

Maria Antonietta Perna, die voor SitePoint schreef, heeft een demo gemaakt die het punt bijzonder goed maakt. We hebben deze afbeelding gemaakt om haar demo uit te leggen:

Zie de Pen Text / Image blend met mix-blend-mode door SitePoint (@SitePoint) op CodePen.

Waar het niet werkt

Je zou verwachten isolationdat je elementen isoleert wanneer ze background-blend-modeworden gebruikt, maar dat is niet het geval. Achtergrondelementen zijn door hun aard al geïsoleerd doordat ze niet opgaan in de inhoud die erachter zit.

Een andere plek waar isolationongeldig lijkt te zijn, is wanneer het wordt gebruikt in combinatie met translatehetzelfde element. U kunt dit tegenkomen als u probeert een element zowel verticaal als horizontaal te centreren door middel van absolutepositionering en translatesamen:

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

Het gebruik van translatelijkt het element op zichzelf te isoleren zonder het te gebruiken isolation.

Verwant

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

Meer informatie

  • W3C-specificatie
  • isolatie op MDN
  • isolatie op Codrops
  • SitePoint: een close-up van de eigenschap CSS mix-blend-mode

Browserondersteuning voor isolate

Chrome Safari Firefox Opera IE / Edge Android iOS
41 7.1 36 30 Nee 41 8,4

Kan ik… Browserondersteuning gebruiken voor mix-blend-mode

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.

Bureaublad

Chrome Firefox D.W.Z Rand Safari
41 32 Nee 79 TP

Mobiel / tablet

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