Isolering - CSS-tricks

Anonim

Den isolationegendom i CSS används för att förhindra elementen från att blanda med sina bakgrunder.

.module ( isolation: isolate; )

Det används oftast när mix-blend-modedet deklareras på ett annat element. Att applicera isolationpå elementet skyddar det elementet så att det inte ärver det som mix-blend-modetillämpas på de andra element som kan ligga bakom det.

Med andra ord, om mix-blend-modeberättar överlappande element att smälta in i varandra, isolationskapar ett undantag för de element där det tillämpas. Det är som ett sätt att stänga av mix-blend-mode, men från ett överordnat element snarare än att behöva välja elementet med blandning direkt.

Värden

  • isolate: Gör precis vad det står. Det skyddar elementet från att smälta in i andra element som finns i bakgrunden.
  • auto: Återställer isoleringen och låter elementet smälta in i bakgrunden.

Se Pen Isolation Cha-Cha-Cha av CSS-Tricks (@ css-tricks) på CodePen.

Ett användningsfall

Maria Antonietta Perna, som skrev för SitePoint, skapade en demo som driver poängen hemma särskilt bra. Vi skapade den här bilden för att förklara hennes demo:

Se Pen Text / Image-blandningen med mix-blend-mode från SitePoint (@SitePoint) på CodePen.

Där det inte fungerar

Du kan förvänta dig isolationatt isolera element när det background-blend-modeanvänds, men så är inte fallet. Bakgrundselement är redan isolerade av sin natur genom att de inte blandas med innehållet som ligger bakom dem.

En annan plats där det isolationverkar ogiltigförklaras är när den används tillsammans med translatesamma element. Du kan stöta på detta om du försöker centrera ett element både vertikalt och horisontellt med hjälp av absolutepositionering och translatetillsammans:

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

Användningen av translateverkar för att isolera elementet på egen hand utan användning isolation.

Relaterad

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

Mer information

  • W3C-specifikation
  • isolering på MDN
  • isolering på Codrops
  • SitePoint: En närbild Titta på egenskapen CSS mix-blend-mode

Webbläsarstöd för isolat

Krom Safari Firefox Opera IE / Edge Android iOS
41 7.1 36 30 Nej 41 8.4

Kan jag använda ... Webbläsarsupport för mix-blend-mode

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.

Skrivbord

Krom Firefox IE Kant Safari
41 32 Nej 79 TP

Mobil / surfplatta

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