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

Bramus

A história do ::backdrop

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

• A camada superior é uma nova camada de empilhamento 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 CSS ::backdrop é uma caixa do tamanho da janela de visualização, renderizado imediatamente abaixo de qualquer elemento apresentado na camada superior.

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

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

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

Como solução alternativa, foi necessário declarar explicitamente as propriedades personalizadas no ::backdrop e no :root para disponibilizá-las:

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

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

Atualização de ::backdrop

Para corrigir os problemas com ::backdrop, o grupo de trabalho de CSS adotou esses conceitos e os especificou na especificação de layout posicionado no CSS (em inglês).

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

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

Graças a essa mudança, será 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);
}