Izolacija - CSS-trikovi

Anonim

isolationNekretnina u CSS se koristi za sprečavanje elemente od miješanja sa svojim pozadine.

.module ( isolation: isolate; )

Najčešće se koristi kada mix-blend-modeje deklariran na drugom elementu. Primjena isolationna element čuva taj element tako da ne naslijedi mix-blend-modeprimijenjeno na ostale elemente koji bi mogli biti iza njega.

Drugim riječima, ako mix-blend-modegovori preklapajućim elementima da se stope jedni s drugima, tada isolationstvara izuzeće za elemente na kojima se primjenjuje. To je poput načina da isključite mix-blend-mode, ali iz nadređenog elementa, umjesto da trebate izravno odabrati element s blendingom.

Vrijednosti

  • isolate: Da li točno ono što piše. Štiti element od stapanja s drugim elementima koji su u pozadini.
  • auto: Resetira izolaciju i omogućuje elementu da se uklopi u njegovu pozadinu.

Pogledajte izolaciju olovke Cha-Cha-Cha tvrtke CSS-Tricks (@ css-tricks) na CodePenu.

Slučaj upotrebe

Maria Antonietta Perna, pišući za SitePoint, kreirala je demonstraciju koja posebno dobro vodi točku kući. Napravili smo ovu grafiku kako bismo objasnili njezin demo:

Pogledajte mješavinu olovke Tekst / slika s načinom miješanja-miješanja SitePointa (@SitePoint) na CodePenu.

Tamo gdje to ne ide

Možda ćete očekivati isolationizoliranje elemenata kada background-blend-modese koristi, ali to nije slučaj. Pozadinski su elementi već izolirani po svojoj prirodi jer se ne stapaju sa sadržajem koji stoji iza njih.

Još jedno mjesto na kojem se isolationčini nevaljanim jest kada se koristi zajedno s translateistim elementom. Na ovo biste mogli naletjeti ako pokušate centrirati element i okomito i vodoravno koristeći absolutepozicioniranje i translatezajedno:

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

Čini se da upotreba translateelementa samostalno izolira element bez upotrebe isolation.

Povezano

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

Više informacija

  • W3C specifikacija
  • izolacija na MDN
  • izolacija na Codrops
  • SitePoint: Pogled izbliza na svojstvo CSS mix-blend-mode

Podrška preglednika za izolat

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

Mogu li koristiti ... Podrška preglednika za mix-blend-način

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.

Radna površina

Krom Firefox IE Rub Safari
41 32 Ne 79 TP

Mobitel / tablet

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