Modifications apportées à l'héritage ::backdrop CSS

Bramus

Historique de ::backdrop

L'API Fullscreen a introduit de nouveaux concepts tels que la couche supérieure et l'élément ::backdrop.

• La couche supérieure est une nouvelle couche d'empilement affichée le plus près de l'utilisateur dans un viewport. Elle a la taille de la fenêtre d'affichage et s'affiche au-dessus de toutes les autres couches.
• Le pseudo-élément CSS ::backdrop est une boîte de la taille de la fenêtre d'affichage, affichée immédiatement sous tout élément présenté dans la couche supérieure.

Voici une caractéristique de la spécification d'origine de ::backdrop:

Il n'hérite d'aucun élément et n'en hérite pas.

Bien que cela ait été utile pour isoler le style de ::backdrop, cela signifiait également que ::backdrop n'avait accès à aucune des propriétés personnalisées déclarées sur :root. Cela a créé une certaine confusion parmi les développeurs Web.

Pour contourner ce problème, vous avez dû déclarer explicitement vos propriétés personnalisées sur ::backdrop et :root pour les rendre disponibles:

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

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

Mise à jour de ::backdrop

Pour résoudre les problèmes liés à ::backdrop, le groupe de travail CSS a adopté ces concepts et les a maintenant spécifiés dans la spécification de la mise en page positionnée CSS.

En plus de déplacer la définition vers une nouvelle spécification, nous l'avons affinée.

L'élément ::backdrop est désormais un élément respectant l'arborescence, ce qui signifie qu'il hérite de toutes les propriétés héritables de son élément d'origine.

Navigateurs pris en charge

• 122
• 122
• 120
• 17,4

Grâce à ce changement, il est possible de remplacer les valeurs de propriété personnalisées sur des éléments spécifiques, et ::backdrop y aura accès. Par exemple, le ::backdrop associé à un élément <dialog> ouvert peut désormais accéder aux propriétés personnalisées disponibles dans cet élément <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);
}

Démonstration avec une <dialog> qui s'ouvre dans la couche supérieure. Dans Chrome 122 et versions ultérieures, ::backdrop peut accéder à la variable --backdrop-color et l'utiliser pour colorer son arrière-plan.