isolation
Īpašums CSS tiek izmantota, lai novērstu elementu, sajaucot ar saviem backdrops.
.module ( isolation: isolate; )
To visbiežāk lieto, kad mix-blend-mode
tas ir deklarēts citā elementā. Lietošana isolation
elementam aizsargā šo elementu tā, lai tas netiktu pārmantots, mix-blend-mode
lietojot citus elementus, kas varētu būt aiz tā.
Citiem vārdiem sakot, ja jūs mix-blend-mode
sakāt, ka pārklājas elementi sajaucas viens ar otru, tad isolation
tiek 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 isolation
elementu izolēšanu, kad background-blend-mode
tiek 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 translate
un to pašu elementu. Jūs, iespējams, mēģināt centrēt elementu gan vertikāli, gan horizontāli, izmantojot absolute
pozicionēšanu un translate
kopā:
.module ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); isolation: isolate; )
To izmantošana translate
parā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 |