Izoliacija - CSS-gudrybės

Anonim

isolationCSS turtas naudojamas siekiant užkirsti kelią elementus iš maišymo savo backdrops.

.module ( isolation: isolate; )

Dažniausiai jis naudojamas, kai mix-blend-modejis buvo deklaruotas kitam elementui. Taikant isolationelementą, elementas saugomas, kad jis nepaveldėtų mix-blend-modetaikomo kitiems elementams, kurie gali būti už jo.

Kitaip tariant, jei mix-blend-modeliepiate persidengiantiems elementams susilieti vienas su kitu, tada isolationsukuriama išimtis tiems elementams, kuriuose jis taikomas. Tai tarsi būdas išjungti „mix-blend-mode“ režimą, bet ne iš pirminio elemento, o už tai, kad reikia tiesiogiai pasirinkti elementą su maišymu.

Vertybės

  • isolate: Daro tiksliai tai, ką sako. Jis apsaugo elementą nuo susiliejimo su kitais fone esančiais elementais.
  • auto: Atstato izoliaciją ir leidžia elementui įsilieti į savo foną.

Peržiūrėkite „CSS-Tricks“ (@ css-tricks) „CodePen“ rašiklio izoliavimo cha-cha-cha.

A naudojimo atvejis

Maria Antonietta Perna, rašydama „SitePoint“, sukūrė demonstracinę versiją, kuri ypač gerai varo punktą namo. Sukūrėme šią grafiką, kad galėtume paaiškinti jos demonstracinę versiją:

„CodePen“ ieškokite „SitePoint“ (@SitePoint) „Pen“ teksto / vaizdo mišinio su mišinio mišinio režimu.

Kur tai neveikia

Galite tikėtis isolationizoliuoti elementus, kai background-blend-modejie naudojami, tačiau taip nėra. Fono elementai jau yra izoliuoti pagal savo pobūdį, nes jie nesusimaišo su turiniu, kuris yra už jų.

Kita vieta, kur, isolationatrodo, negalioja, yra tada, kai ji naudojama kartu su translatetuo pačiu elementu. Galite atsitrenkti į tai, jei bandysite centruoti elementą tiek vertikaliai, tiek horizontaliai, naudodami absolutepozicionavimą ir translatekartu:

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

Naudojimo translateatrodo izoliuoti elementą savo nenaudojant isolation.

Susijęs

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

Daugiau informacijos

  • W3C specifikacija
  • izoliacija MDN
  • izoliacija ant Codrops
  • „SitePoint“: iš arti pažvelkite į CSS „mix-blend-mode“ ypatybę

Naršyklės palaikymas izoliatui

„Chrome“ „Safari“ „Firefox“ Opera IE / kraštas „Android“ „iOS“
41 7.1 36 30 Ne 41 8.4

Ar galiu naudoti ... Naršyklės palaikymas „mix-blend“ režimui

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.

Darbalaukis

„Chrome“ „Firefox“ T.Y Briauna „Safari“
41 32 Ne 79 TP

Mobilusis / planšetinis kompiuteris

„Android Chrome“ „Android Firefox“ „Android“ „iOS Safari“
88 85 81 14,0–14,4