Isolatsioon - CSS-trikid

Anonim

isolationVara CSS kasutatakse, et vältida elemente segamiseks nende tausta.

.module ( isolation: isolate; )

Seda kasutatakse kõige sagedamini siis, kui see mix-blend-modeon deklareeritud mõnele teisele elemendile. Rakendades isolationelemendile valvurid, et element, nii et see ei päri mix-blend-modekohaldada muid elemente, mis võivad olla selle taga.

Teisisõnu, kui mix-blend-modeöeldakse kattuvatele elementidele üksteisega segunemist, isolationloob see elementidele, kus seda kasutatakse, erandi. See on nagu viis mix-blend-režiimi väljalülitamiseks, kuid vanemelemendilt, selle asemel, et oleks vaja otse segamisega element välja valida.

Väärtused

  • isolate: Teeb täpselt seda, mida ta ütleb. See kaitseb elementi segunemist teiste taustal olevate elementidega.
  • auto: Lähtestab isolatsiooni ja võimaldab elemendil oma taustale sulanduda.

Vaadake CodePenist CSS-Tricksi (@ css-tricks) pliiatsi eraldamise cha-cha-cha.

A Kasutusjuhtum

SitePointi jaoks kirjutav Maria Antonietta Perna lõi demo, mis ajab punkti eriti hästi koju. Selle demo selgitamiseks lõime selle graafika:

Vaadake CodePeni saidi (@SitePoint) pliiatsi teksti / pildi segu segu-segu režiimiga.

Kus see ei toimi

Võimalik, et kasutate isolationelementide eraldamist background-blend-mode, kuid see pole nii. Taustelemendid on oma olemuselt juba isoleeritud, kuna need ei sulandu nende taga oleva sisuga kokku.

Teine koht, kus isolationnäib olevat kehtetu, on see, kui seda kasutatakse koos translatesama elemendiga. Võite sellega kokku puutuda, kui proovite elementi nii vertikaalselt kui ka horisontaalselt tsentreerida, kasutades absolutepositsioneerimist ja translatekoos:

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

Kasutamine translatenäib isoleerida element omal abita isolation.

Seotud

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

Rohkem informatsiooni

  • W3C spetsifikatsioon
  • isolatsioon MDN-is
  • eraldamine Codropsile
  • SitePoint: lähivaade CSS mix-blend-mode atribuudile

Brauseri tugi isolaadile

Chrome Safari Firefox Ooper IE / Edge Android iOS
41 7.1 36 30 Ei 41 8.4

Kas ma saan kasutada ... Brauseri tugi mix-blend-režiimis

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.

Töölaud

Chrome Firefox IE Edge Safari
41 32 Ei 79 TP

Mobiil / tahvelarvuti

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