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.
Compatibilidade com navegadores
- 122
- 122
- 120
- 17,4
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);
}