Eristäminen - CSS-temppuja

Anonim

isolationOmaisuus CSS käytetään estämään elementtejä sekoittamalla niiden taustoja.

.module ( isolation: isolate; )

Sitä käytetään yleisimmin, kun mix-blend-modese on ilmoitettu toiselle elementille. Hakeminen isolationelementtiin suojuksia, elementti niin, että se ei peri mix-blend-modesoveltaa muita elementtejä, jotka voivat olla sen takana.

Toisin sanoen, jos mix-blend-modekäsketään päällekkäisiä elementtejä sekoittumaan toisiinsa, se isolationluo vapautuksen elementteihin, joissa sitä käytetään. Se on kuin tapa kytkeä mix-blend-tila pois päältä, mutta vanhemmalta elementiltä sen sijaan, että tarvitsisi valita elementti suoraan sekoittamalla.

Arvot

  • isolate: Tekee täsmälleen mitä se sanoo. Se suojaa elementtiä sekoittumasta muihin taustalla oleviin elementteihin.
  • auto: Nollaa eristämisen ja antaa elementin sulautua taustaansa.

Katso CSS-Tricksin (@ css-tricks) kynän eristys Cha-Cha-Cha CodePenistä.

A Käyttötapa

SitePointille kirjoittava Maria Antonietta Perna loi demon, joka ajaa pisteen kotiin erityisen hyvin. Olemme luoneet tämän kuvan auttaaksemme hänen esittelyään:

Katso CodePen-sovelluksen kynäteksti- / kuvasekoitus sekoitus-sekoitustilan kanssa SitePointin (@SitePoint) avulla.

Missä se ei toimi

Voit odottaa isolationeristävän elementtejä, kun niitä background-blend-modekäytetään, mutta näin ei ole. Taustaelementit ovat jo luonteeltaan eristettyjä, koska ne eivät sekoita niiden takana olevaan sisältöön.

Toinen paikka, jossa isolationnäyttää olevan mitätöity, on, kun sitä käytetään yhdessä translatesaman elementin kanssa. Saatat törmätä tähän, jos yrität keskittää elementin sekä pysty- että vaakasuunnassa käyttämällä absolutepaikannusta ja translateyhdessä:

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

Käyttö translatenäyttää eristävän elementin itsestään ilman käyttöä isolation.

Liittyvät

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

Lisää tietoa

  • W3C-määrittely
  • eristäminen MDN: stä
  • eristäminen Codropsissa
  • SitePoint: Lähikuva Katso CSS-sekoitustilan ominaisuutta

Selaimen tuki isolaatille

Kromi Safari Firefox Ooppera IE / Edge Android iOS
41 7.1 36 30 Ei 41 8.4

Voinko käyttää… Selaimen tuki mix-blend-tilassa

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.

Työpöytä

Kromi Firefox IE Reuna Safari
41 32 Ei 79 TP

Matkapuhelin / tabletti

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