Izolacija - CSS-triki

Anonim

isolationHotel v CSS se uporablja za preprečevanje elemente iz mešanja s svojimi kulise.

.module ( isolation: isolate; )

Najpogosteje se uporablja, če mix-blend-modeje bil razglašen za drug element. Uporaba isolationza element varuje ta element, tako da ne podeduje mix-blend-modeuporabljenega za druge elemente, ki so morda za njim.

Z drugimi besedami, če mix-blend-modeprekrivajočim elementom sporoča, naj se mešajo med seboj, potem isolationustvari izjemo za elemente, kjer je uporabljen. To je kot način za izklop načina mešanja, vendar iz nadrejenega elementa, namesto da bi elementa izbrali neposredno z mešanjem.

Vrednote

  • isolate: Ali točno to piše. Ščiti element pred mešanjem z drugimi elementi, ki so v ozadju.
  • auto: Ponastavi izolacijo in omogoči, da se element zlije v njegovo ozadje.

Oglejte si Pen Isolation Cha-Cha-Cha by CSS-Tricks (@ css-tricks) na CodePen.

Primer uporabe

Maria Antonietta Perna, ki piše za SitePoint, je ustvarila predstavitev, ki še posebej dobro vodi točko domov. To grafiko smo ustvarili za razlago njene predstavitve:

Oglejte si mešanico Pen Text / Image z načinom mix-blend, ki ga izvaja SitePoint (@SitePoint) na CodePen.

Kjer ne deluje

Morda boste pričakovali, isolationda boste izolirali elemente, ko jih boste background-blend-modeuporabili, vendar to ne drži. Elementi ozadja so že po svoji naravi izolirani, saj se ne mešajo z vsebino, ki je za njimi.

Drugo mesto, kjer se isolationzdi, da je razveljavljeno, je, če se uporablja skupaj z translateistim elementom. Morda boste naleteli na to, če poskušate element centrirati navpično in vodoravno s absolutepozicioniranjem in translateskupaj:

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

Zdi se, da uporaba translateelementa samostojno izolira brez uporabe isolation.

Sorodno

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

Več informacij

  • Specifikacija W3C
  • izolacija na MDN
  • izolacija na Codrops
  • SitePoint: pogled od blizu na lastnost CSS mix-blend-mode

Podpora brskalnika za izolat

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

Ali lahko uporabim ... Podpora za brskalnik za mix-blend-način

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.

Namizje

Chrome Firefox IE Rob Safari
41 32 Ne 79 TP

Mobilni / tablični računalnik

Android Chrome Android Firefox Android iOS Safari
88 85 81 14,0-14,4