Isolasjon - CSS-triks

Anonim

Den isolationegenskap i CSS brukes til å forhindre at elementer blandes med sine bakgrunner.

.module ( isolation: isolate; )

Det brukes oftest når det mix-blend-modeer deklarert på et annet element. Bruk isolationav elementet beskytter det elementet slik at det ikke arver det som mix-blend-modebrukes på de andre elementene som kan være bak det.

Med andre ord, hvis det mix-blend-modeblir fortalt at overlappende elementer skal blandes med hverandre, så isolationskaper det et unntak for elementene der det brukes. Det er som en måte å slå av blandingsblandingsmodus, men fra et overordnet element i stedet for å måtte velge elementet med blanding direkte.

Verdier

  • isolate: Gjør akkurat hva det står. Det beskytter elementet fra å blande seg inn i andre elementer som er i bakgrunnen.
  • auto: Tilbakestiller isolasjonen og lar elementet smelte inn i bakgrunnen.

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

En brukssak

Maria Antonietta Perna, som skrev for SitePoint, opprettet en demo som driver poenget spesielt godt. Vi laget denne grafikken for å forklare demoen hennes:

Se penntekst / bildeblanding med blandingsblandingsmodus av SitePoint (@SitePoint) på CodePen.

Der det ikke fungerer

Du kan forvente isolationå isolere elementer når background-blend-modedet brukes, men det er ikke tilfelle. Bakgrunnselementer er allerede isolert av sin natur ved at de ikke blander seg med innholdet som ligger bak dem.

Et annet sted der det isolationser ut til å være ugyldig, er når det brukes sammen med translatepå samme element. Du kan støte på dette hvis du prøver å sentrere et element både vertikalt og horisontalt ved hjelp av absoluteposisjonering og translatesammen:

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

Bruken av translateser ut til å isolere elementet alene uten bruk isolation.

I slekt

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

Mer informasjon

  • W3C spesifikasjon
  • isolasjon på MDN
  • isolasjon på Codrops
  • SitePoint: Et nærbilde Se på CSS mix-blend-mode Property

Nettleserstøtte for isolat

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

Kan jeg bruke ... Nettleserstøtte for miks-bland-modus

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome Firefox DVS Kant Safari
41 32 Nei 79 TP

Mobil / nettbrett

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