Izolācija - CSS-triki

Anonim

isolationĪpašums CSS tiek izmantota, lai novērstu elementu, sajaucot ar saviem backdrops.

.module ( isolation: isolate; )

To visbiežāk lieto, kad mix-blend-modetas ir deklarēts citā elementā. Lietošana isolationelementam aizsargā šo elementu tā, lai tas netiktu pārmantots, mix-blend-modelietojot citus elementus, kas varētu būt aiz tā.

Citiem vārdiem sakot, ja jūs mix-blend-modesakāt, ka pārklājas elementi sajaucas viens ar otru, tad isolationtiek izveidots atbrīvojums no elementiem, kur tas tiek lietots. Tas ir kā veids, kā izslēgt mix-blend-mode, bet no vecāka elementa, nevis jāizvēlas elements tieši ar blendēšanu.

Vērtības

  • isolate: Dara tieši to, ko saka. Tas aizsargā elementu no sajaukšanās ar citiem elementiem, kas atrodas fonā.
  • auto: Atiestata izolāciju un ļauj elementam saplūst savā fonā.

Skatiet CSS-Tricks (@ css-tricks) pildspalvveida pilnšļirces izolācijas ča-ča-ča vietnē CodePen.

Lietošanas gadījums

Maria Antonietta Perna, rakstot vietnei SitePoint, izveidoja demonstrāciju, kas īpaši labi vada punktu mājās. Mēs izveidojām šo grafiku, lai palīdzētu izskaidrot viņas demonstrāciju:

Skatiet CodePen pildspalvas teksta / attēla maisījumu ar sajaukšanas režīmu, ko nodrošina SitePoint (@SitePoint).

Kur tas nedarbojas

Jūs varētu sagaidīt isolationelementu izolēšanu, kad background-blend-modetiek izmantots, bet tas tā nav. Fona elementi pēc savas būtības jau ir izolēti, jo tie nesajaucas ar saturu, kas ir aiz tiem.

Vēl viena vieta, kur isolationšķiet nederīga, ir tad, kad to lieto kopā ar vienu translateun to pašu elementu. Jūs, iespējams, mēģināt centrēt elementu gan vertikāli, gan horizontāli, izmantojot absolutepozicionēšanu un translatekopā:

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

To izmantošana translateparādās izolēt elementu pati neizmantojot isolation.

Saistīts

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

Vairāk informācijas

  • W3C specifikācija
  • izolācija MDN
  • izolācija uz Codrops
  • SitePoint: tuvplānā apskatiet CSS mix-blend-mode īpašumu

Pārlūkprogrammas atbalsts izolātam

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

Vai es varu izmantot ... Pārlūka atbalsts mix-blend-mode

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome Firefox IE Mala Safari
41 32 Nē 79 TP

Mobilais / planšetdators

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