Izolare - CSS-Tricks

Anonim

isolationProprietatea în CSS este folosit pentru a preveni elemente de amestecare cu fundalurile lor.

.module ( isolation: isolate; )

Este cel mai frecvent utilizat atunci când mix-blend-modea fost declarat pe un alt element. Aplicarea isolationelementului protejează acel element astfel încât să nu moștenească mix-blend-modeaplicarea celorlalte elemente care ar putea fi în spatele acestuia.

Cu alte cuvinte, dacă le mix-blend-modespune elementelor suprapuse să se amestece unele cu altele, atunci isolationcreează o scutire pentru elementele în care este aplicată. Este ca o modalitate de a dezactiva modul mix-blend-mode, dar dintr-un element părinte, mai degrabă decât necesitatea de a selecta elementul cu amestecarea directă.

Valori

  • isolate: Face exact ceea ce spune. Protejează elementul de amestecarea cu alte elemente care se află pe fundal.
  • auto: Resetează izolarea și permite elementului să se amestece în fundalul său.

Vedeți Pen Isolation Cha-Cha-Cha de CSS-Tricks (@ css-tricks) pe CodePen.

Un caz de utilizare

Maria Antonietta Perna, care scria pentru SitePoint, a creat o demonstrație care conduce în mod deosebit punctul de acasă. Am creat această imagine pentru a explica demonstrația ei:

Consultați amestecul de text / imagine stilou cu mix-blend-mode de SitePoint (@SitePoint) pe CodePen.

Unde nu funcționează

S-ar putea să vă așteptați isolationsă izolați elemente atunci când background-blend-modeeste utilizat, dar nu este cazul. Elementele de fundal sunt deja izolate prin natura lor prin faptul că nu se amestecă cu conținutul din spatele lor.

Un alt loc în care isolationpare a fi invalidat este atunci când este utilizat împreună cu translateacelași element. S-ar putea să vă loviți de acest lucru dacă încercați să centrați un element atât pe verticală cât și pe orizontală folosind absolutepoziționarea și translateîmpreună:

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

Utilizarea lui translatepare să izoleze singur elementul fără utilizarea acestuia isolation.

Legate de

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

Mai multe informatii

  • Specificație W3C
  • izolarea pe MDN
  • izolarea pe Codrops
  • SitePoint: O privire de ansamblu Uită-te la proprietatea CSS mix-blend-mode

Suport pentru browser pentru izolate

Crom Safari Firefox Operă IE / Edge Android iOS
41 7.1 36 30 nu 41 8.4

Pot folosi ... Suport pentru browser pentru mix-blend-mode

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.

Desktop

Crom Firefox IE Margine Safari
41 32 Nu 79 TP

Mobil / Tabletă

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