Alterações na herança ::backdrop do CSS

Bramus

Histórico de ::backdrop

A API Fullscreen introduziu novos conceitos, como a camada superior e o elemento ::backdrop.

• A camada superior é uma nova camada empilhada renderizada mais próxima do usuário em uma janela de visualização. Ela tem o tamanho da janela de visualização e aparece sobre todas as outras camadas.
• O pseudoelemento ::backdrop do CSS é uma caixa do tamanho da janela de visualização, renderizada imediatamente abaixo de qualquer elemento apresentado na camada de cima.

Um recurso da especificação original para ::backdrop era o seguinte:

Ele não herda de nenhum elemento e não é herdado.

Embora isso tenha sido útil para isolar o estilo do ::backdrop, também significou que o ::backdrop não tinha acesso a nenhuma das propriedades personalizadas declaradas em :root. Isso gerou confusões entre os desenvolvedores da Web.

Como solução alternativa, você precisava declarar explicitamente suas propriedades personalizadas em ::backdrop e :root para disponibilizá-las:

/* Pre-Chrome 122 */
:root, ::backdrop {
  --back-color: #333;
}

::backdrop {
  background-color: var(--back-color);
}

Atualização do app ::backdrop

Para corrigir os problemas com ::backdrop, o Grupo de trabalho do CSS adotou esses conceitos e agora os especificou na especificação de layout posicionado do CSS.

Além de mover a definição para uma nova especificação, as definições foram refinadas.

Um refinamento que tem um impacto direto nos desenvolvedores da Web é que o elemento ::backdrop agora é um elemento tree abiding, o que significa que ele herda todas as propriedades herdáveis do elemento de origem.

Compatibilidade com navegadores

• 122
• 122
• 120
• 17.4

Graças a essa mudança, é possível substituir os valores de propriedades personalizadas em elementos específicos, e ::backdrop terá acesso a eles. Por exemplo, o ::backdrop associado a um elemento <dialog> aberto agora pode acessar as propriedades personalizadas disponíveis nesse <dialog>.

/* Chrome 122 and up */
:root {
  --backdrop-color: #333; /* Any ::backdrop can access this custom property */
}

dialog {
  --backdrop-color: #6300ff33; /* The ::backdrop for dialog can access this custom property */
}

::backdrop {
  background-color: var(--backdrop-color);
}

Demonstração com uma <dialog> que é aberta na camada superior. No Chrome 122 e versões mais recentes, o ::backdrop pode acessar e usar a variável --backdrop-color para colorir o plano de fundo.