Cambios en la herencia ::backdrop de CSS

Bramus

El historial de ::backdrop

La API de Fullscreen introdujo conceptos nuevos, 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 pseudoelemento CSS ::backdrop es un cuadro del tamaño del viewport que se renderiza inmediatamente debajo de cualquier elemento que se presente en la capa superior.

Una característica de la especificación original de ::backdrop era la siguiente:

No hereda de ningún elemento ni se hereda de él.

Si bien eso fue útil para aislar el diseño de ::backdrop, también significó que ::backdrop no tenía acceso a ninguna de las propiedades personalizadas declaradas en :root. Esto generó cierta confusión entre los desarrolladores web.

Como solución alternativa, debías declarar explícitamente tus propiedades personalizadas en ::backdrop y en :root para que estén disponibles:

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

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

Una actualización a ::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.

Una mejora que tiene un impacto directo en los desarrolladores web es que el elemento ::backdrop ahora es un elemento conforme al árbol, lo que significa que hereda cualquier propiedad heredable de su elemento de origen.

Gracias a este cambio, es posible anular los valores de 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);
}