La historia de ::backdrop
La API de pantalla completa introdujo nuevos conceptos, como la capa superior y el elemento ::backdrop.
- La capa superior es una nueva capa de apilamiento que se renderiza más cerca del usuario dentro de un viewport. Tiene el tamaño del viewport y aparece sobre todas las demás capas.
- El seudoelemento CSS
::backdropes un cuadro del tamaño del viewport, que se renderiza justo debajo de cualquier elemento que se presente en la capa superior.
Una de las funciones de la especificación original de ::backdrop era la siguiente:
No se hereda de ningún elemento ni de los que no se hereda.
Si bien eso fue útil para aislar el estilo de ::backdrop, también implicaba que ::backdrop no tenía acceso a ninguna de las propiedades personalizadas declaradas en :root. Esto generó confusión entre los desarrolladores web.
Como solución alternativa, debías declarar explícitamente tus propiedades personalizadas tanto en ::backdrop como en :root para que estén disponibles:
/* Pre-Chrome 122 */
:root, ::backdrop {
--back-color: #333;
}
::backdrop {
background-color: var(--back-color);
}
Actualización de ::backdrop
Para solucionar los problemas con ::backdrop, el grupo de trabajo de CSS adoptó estos conceptos y ahora los especificó en la especificación de diseño posicionado de CSS.
Además de trasladar la definición a una nueva especificación, se definieron mejor las definiciones.
Un perfeccionamiento que tiene un impacto directo en los desarrolladores web es que el elemento ::backdrop ahora es un elemento permanecer en un árbol, lo que significa que hereda todas las propiedades heredables de su elemento de origen.
Navegadores compatibles
- 122
- 122
- 120
- 17,4
Gracias a este cambio, es posible anular los valores de las propiedades personalizadas en elementos específicos, y ::backdrop tendrá acceso a ellos. Por ejemplo, el ::backdrop asociado con un elemento <dialog> abierto ahora puede acceder a las propiedades personalizadas disponibles en ese <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);
}
::backdrop puede acceder a la variable --backdrop-color y usarla para colorear su fondo.