Izolace - Triky CSS

Anonim

isolationNemovitost v CSS se používá k zabránění prvky mísením se svými kulis.

.module ( isolation: isolate; )

Nejčastěji se používá, když mix-blend-modebyl deklarován na jiném prvku. Aplikování isolationna prvek hlídá tento prvek tak, aby nezdědil mix-blend-modeaplikovaný na ostatní prvky, které by za ním mohly být.

Jinými slovy, pokud mix-blend-modeříkáte překrývajícím se prvkům, aby se navzájem spojily, isolationvytvoří výjimku pro prvky, kde se aplikuje. Je to jako způsob, jak vypnout režim mix-blend, ale spíše z nadřazeného prvku, než je nutné vybrat prvek přímým mícháním.

Hodnoty

  • isolate: Dělá přesně to, co říká. Chrání prvek před prolínáním s jinými prvky, které jsou v pozadí.
  • auto: Obnoví izolaci a umožní prvku splynout s jeho pozadím.

Podívejte se na izolaci pera Cha-Cha-Cha od CSS-Tricks (@ css-tricks) na CodePen.

Případ použití

Maria Antonietta Perna, která psala pro SitePoint, vytvořila demo, díky kterému je bod domů obzvláště dobrý. Tuto grafiku jsme vytvořili, abychom vysvětlili její ukázku:

Podívejte se na směs text / obrázek pera s režimem míchání od SitePoint (@SitePoint) na CodePen.

Kde to nefunguje

Můžete očekávat, isolationže při background-blend-modepoužití izolujete prvky , ale není tomu tak. Prvky pozadí jsou již ze své podstaty izolované tím, že se neslučují s obsahem, který je za nimi.

Dalším místem, kde se isolationzdá být znehodnoceno, je situace, kdy se používá ve spojení se translatestejným prvkem. Do tohoto můžete narazit, pokud se pokusíte vycentrovat prvek vertikálně i horizontálně pomocí absoluteumístění a translatespolečně:

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

Použití se translatezdá k izolaci prvku samostatně bez použití isolation.

Příbuzný

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

Více informací

  • Specifikace W3C
  • izolace na MDN
  • izolace na Codrops
  • SitePoint: Detailní pohled na vlastnost CSS mix-blend-mode

Podpora prohlížeče pro izolaci

Chrome Safari Firefox Opera IE / Edge Android iOS
41 7.1 36 30 ani náhodou 41 8.4

Mohu použít ... Podpora prohlížeče pro režim mix-blend

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

plocha počítače

Chrome Firefox TJ Okraj Safari
41 32 Ne 79 TP

Mobilní / Tablet

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