Cambios en la herencia ::backdrop de CSS

Bramus

El historial de ::backdrop

La API de pantalla completa 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 de la ventana de visualización 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 que respeta el á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);
}