Izolácia - Triky CSS

Anonim

isolationNehnuteľnosť v CSS sa používa na zabránenie prvky miešaním so svojimi kulís.

.module ( isolation: isolate; )

Najčastejšie sa používa, keď mix-blend-modebol deklarovaný na inom prvku. Aplikácia isolationna prvok stráži tento prvok tak, aby nededil mix-blend-modeaplikovaný na ďalšie prvky, ktoré by za ním mohli byť.

Inými slovami, ak mix-blend-modehovoríte, aby sa prekrývajúce prvky navzájom miešali, isolationvytvorí sa výnimka pre prvky, kde sa uplatňuje. Je to ako spôsob, ako vypnúť režim zmiešavania, ale skôr z nadradeného prvku, ako je potrebné priamo vyberať prvok so zmiešaním.

Hodnoty

  • isolate: Robí presne to, čo hovorí. Chráni prvok pred zmiešaním s inými prvkami, ktoré sú v pozadí.
  • auto: Obnoví izoláciu a umožní prvku splynúť s jeho pozadím.

Prezrite si izoláciu pera Cha-Cha-Cha od CSS-Tricks (@ css-tricks) na CodePen.

Prípad použitia

Maria Antonietta Perna, ktorá pracovala pre SitePoint, vytvorila ukážku, ktorá mimoriadne dobre posúva cieľ domov. Túto grafiku sme vytvorili, aby sme vysvetlili jej ukážku:

Prezrite si zmes textu a obrázkov pera s režimom zmiešavania od SitePoint (@SitePoint) na CodePen.

Kde to nefunguje

Možno budete očakávať, isolationže keď background-blend-modepoužijete prvky, izolovate ich , ale nie je to tak. Prvky pozadia sú už svojou podstatou izolované v tom, že sa nezlučujú s obsahom, ktorý sa za nimi nachádza.

Ďalším miestom, kde sa isolationzdá byť neplatné, je použitie pri spojení s translaterovnakým prvkom. Môžete do toho naraziť, ak sa pokúsite vycentrovať prvok vertikálne aj horizontálne pomocou absoluteumiestnenia a translatesúčasne:

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

Zdá sa, že použitie translateznaku izoluje prvok ako taký bez použitia isolation.

Súvisiace

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

Viac informácií

  • Špecifikácia W3C
  • izolácia na MDN
  • izolácia na Codrops
  • SitePoint: Detailný pohľad na vlastnosť CSS mix-blend-mode

Podpora prehľadávača pre izolát

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

Môžem použiť ... Podpora prehľadávača pre mix-blend-mode

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

Desktop

Chrome Firefox IE Hrana Safari
41 32 Nie 79 TP

Mobil / tablet

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