Isolamento - CSS-Tricks

Anonim

A isolationpropriedade em CSS é usada para evitar que os elementos se misturem com seus cenários.

.module ( isolation: isolate; )

É mais comumente usado quando mix-blend-modefoi declarado em outro elemento. Aplicar isolationao elemento protege esse elemento de forma que ele não herde o mix-blend-modeaplicado aos outros elementos que possam estar por trás dele.

Em outras palavras, se mix-blend-modeestiver instruindo os elementos sobrepostos a se mesclar uns com os outros, isolationcria uma isenção nos elementos onde ela é aplicada. É como uma forma de desligar o modo de mistura de mistura, mas a partir de um elemento pai, em vez de precisar selecionar o elemento com mistura diretamente.

Valores

  • isolate: Faça exatamente o que isso diz. Ele protege o elemento de se misturar com outros elementos que estão no cenário.
  • auto: Redefine o isolamento e permite que o elemento se misture ao fundo.

Veja o Pen Isolation Cha-Cha-Cha da CSS-Tricks (@ css-tricks) no CodePen.

Um caso de uso

Maria Antonietta Perna, escrevendo para o SitePoint, criou uma demonstração que mostra o ponto de vista particularmente bem. Criamos este gráfico para ajudar a explicar sua demonstração:

Veja a mistura Pen Text / Image com mix-blend-mode do SitePoint (@SitePoint) no CodePen.

Onde não funciona

Você pode esperar isolationisolar elementos quando background-blend-modefor usado, mas não é o caso. Os elementos de fundo já estão isolados por sua natureza, pois não se misturam ao conteúdo que está por trás deles.

Outro ponto onde isolationparece ser invalidado é quando ele é usado em conjunto com translateno mesmo elemento. Você pode esbarrar nisso se tentar centralizar um elemento tanto vertical quanto horizontalmente usando absoluteposicionamento e translatejuntos:

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

O uso de translateparece isolar o elemento por conta própria, sem o uso isolation.

Relacionado

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

Mais Informações

  • Especificação W3C
  • isolamento em MDN
  • isolamento em Codrops
  • SitePoint: Uma análise detalhada da propriedade CSS mix-blend-mode

Suporte do navegador para isolar

cromada Safári Raposa de fogo Ópera IE / Edge Android iOS
41 7,1 36 30 não 41 8,4

Posso usar ... Suporte do navegador para o modo mix-blend-mode

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.

Área de Trabalho

cromada Raposa de fogo IE Beira Safári
41 32 Não 79 TP

Celular / Tablet

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