Propriedade CSS isolation — Controle de Contextos de Empilhamento

A propriedade CSS isolation controla se um elemento deve criar um novo contexto de empilhamento. Seus dois valores são auto (o padrão — deixar o navegador decidir) e isolate (sempre criar um, incondicionalmente).

Um contexto de empilhamento é uma camada independente que o navegador pinta como uma unidade. Os elementos dentro dele são ordenados entre si usando z-index, mas nunca se intercalam com elementos em um contexto de empilhamento diferente. Todo documento começa com um contexto de empilhamento raiz; outros são criados sempre que certas propriedades CSS são aplicadas.

isolation é mais útil junto com mix-blend-mode. Por padrão, mix-blend-mode mescla um elemento com tudo que está abaixo dele — incluindo o fundo da página e seções não relacionadas mais acima no DOM. Definir isolation: isolate em um elemento pai cria uma fronteira: a mesclagem acontece apenas dentro da subárvore desse pai, e não em relação ao restante da página.

Ao usar background-blend-mode, isolation é desnecessário — as camadas de fundo só se mesclam com outras camadas de fundo do mesmo elemento.

Quando usar

Delimitar um grupo de mesclagem. Você tem imagens ou textos sobrepostos usando mix-blend-mode e quer que eles se mesclem entre si, mas não com o restante da página. Envolva-os em um contêiner com isolation: isolate.
Proteger um componente reutilizável. Um cartão ou widget deve ter a mesma aparência independentemente do fundo em que esteja. Isolar sua raiz evita que cores externas vazem por quaisquer modos de mesclagem internos.
Criar um contexto de empilhamento sem efeitos colaterais. Várias propriedades criam contextos de empilhamento implicitamente — opacity abaixo de 1, transform, filter, will-change e um z-index não automático em um elemento posicionado — mas todas elas alteram o layout ou a aparência. isolation: isolate cria o contexto de empilhamento e nada mais.

Informação

isolation não altera a aparência do elemento nem como o espaço é alocado. Seu único efeito é definir se um novo contexto de empilhamento é criado. Isso o torna a forma mais limpa de estabelecer a fronteira quando você precisa de uma sem outras consequências visuais.

Referência da propriedade


Valor inicial	`auto`
Aplica-se a	Todos os elementos
Herdada	Não
Animável	Não
Versão	CSS3
Sintaxe DOM	`element.style.isolation = "isolate"`

Sintaxe

isolation: auto | isolate | initial | inherit;

Valores

Valor	Descrição
`auto`	Nenhum novo contexto de empilhamento é criado, a menos que outra propriedade (como `mix-blend-mode` ou `filter`) exija um. Este é o valor padrão.
`isolate`	Sempre cria um novo contexto de empilhamento no elemento, confinando as operações de mesclagem e composição a esse contexto.
`initial`	Redefine a propriedade para seu valor padrão (`auto`).
`inherit`	Herda o valor do elemento pai.

Exemplos

Contendo mix-blend-mode com isolation

As duas caixas abaixo usam marcação interna idêntica — um <div> com mix-blend-mode: difference. A única diferença é o contêiner: o primeiro usa isolation: auto; o segundo usa isolation: isolate.

Com auto, a mesclagem difference atravessa o contêiner e se mistura com o fundo cinza da página (#ccc do contêiner externo). Com isolate, um novo contexto de empilhamento é criado no nível do contêiner, de modo que a mesclagem só enxerga o fundo do próprio contêiner — não a página ao redor.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .a {
        background-color: #ccc;
      }
      #isolation-example {
        width: 300px;
        height: 300px;
      }
      .c {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        padding: 10px;
        mix-blend-mode: difference;
      }
      #isolation-example1 {
        isolation: auto;
      }
      #isolation-example2 {
        isolation: isolate;
      }
    </style>
  </head>
  <body>
    <h2>Isolation property example</h2>
    <div id="isolation-example" class="a">
      <div id="isolation-example1">
        <div class="a c">isolation: auto;</div>
      </div>
      <div id="isolation-example2">
        <div class="a c">isolation: isolate;</div>
      </div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Isolando um título mesclado sobre uma imagem

Aqui um título usa mix-blend-mode: overlay para se mesclar com uma foto. Sem isolation: isolate no título, o overlay também se mescla com o fundo #eee do body onde o título se estende além da imagem. Adicionar isolation: isolate confina a mesclagem ao próprio contexto de empilhamento do título, mantendo o efeito consistente em toda a largura.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      * {
        box-sizing: border-box;
      }
      body {
        background-color: #eee;
        color: #555;
        font-size: 1.1em;
        font-family: Roboto, Helvetica, Arial, sans-serif;
      }
      .isolation-example {
        margin: 1em auto;
        width: 100%;
        max-width: 814px;
        position: relative;
      }
      img {
        width: 100%;
      }
      .isolation-example h1 {
        position: absolute;
        top: 5em;
        color: white;
        text-align: center;
        font-size: 40px;
        width: 100%;
        text-transform: uppercase;
        background-color: #000;
        padding: .5em .25em;
        mix-blend-mode: overlay;
        isolation: isolate;
      }
    </style>
  </head>
  <body>
    <h2>Isolation property example</h2>
    <div class="isolation-example">
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Yellow tree." />
      <div class="element">
        <h1>House</h1>
      </div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Como os contextos de empilhamento são criados

isolation: isolate é uma das muitas formas de acionar um novo contexto de empilhamento. A tabela abaixo lista os gatilhos mais comuns e se eles têm efeitos colaterais visuais ou de layout:

Gatilho	Efeito colateral
`isolation: isolate`	Nenhum — apenas contexto de empilhamento
`opacity` menor que `1`	Altera a transparência do elemento
transform (qualquer valor exceto `none`)	Move ou remodela o elemento
filter (qualquer valor exceto `none`)	Aplica um efeito visual
will-change com `transform` ou `opacity`	Pode promover o elemento à sua própria camada de composição
`z-index` não automático em um elemento posicionado	Altera a ordem de empilhamento

Quando você precisa apenas da fronteira — sem transparência, sem alteração visual, sem reordenação — recorra a isolation: isolate.

Pontos importantes

isolation não é herdado. Definir essa propriedade em um pai não faz com que os filhos obtenham seus próprios contextos de empilhamento.
A propriedade só tem efeito em elementos que participam de um contexto de empilhamento (na prática, todos os elementos de nível de bloco e inline, elementos SVG e filhos de flex/grid).
Inspecione as fronteiras de contexto de empilhamento com o DevTools do navegador: o Firefox exibe o ícone de contexto de empilhamento ao lado dos elementos no painel Layers; o Chrome mostra informações de contexto de empilhamento na aba Computed.
O suporte a navegadores é excelente — todos os navegadores evergreen suportam isolation desde 2015. Nenhum prefixo é necessário.

Propriedades relacionadas

mix-blend-mode — mescla um elemento com o conteúdo abaixo dele; isolation controla onde essa mesclagem para.
background-blend-mode — mescla as próprias camadas de fundo de um elemento entre si.
filter — aplica efeitos gráficos como desfoque e escala de cinza; também cria implicitamente um contexto de empilhamento.
opacity — outro gatilho de contexto de empilhamento; valores abaixo de 1 tornam o elemento semitransparente.
transform — move, rotaciona ou redimensiona um elemento; também cria um contexto de empilhamento.
z-index — controla a ordem de empilhamento dentro de um contexto de empilhamento.

Prática

O que a propriedade CSS 'isolation' faz?

Ela habilita o reconhecimento de voz.Ela controla se um novo contexto de empilhamento local deve ser criado.Ela altera a cor do texto.Ela ajuda a isolar um elemento do seu fundo e alterar a ordem de empilhamento de uma pilha de elementos.