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

Bramus

Histoire 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 rendue au plus près de l'utilisateur dans une fenêtre d'affichage. Ses dimensions correspondent à celles de la fenêtre d'affichage et s'affichent au-dessus de tous les autres calques.
• Le pseudo-élément CSS ::backdrop est une zone de la taille de la fenêtre d'affichage, affichée immédiatement sous tout élément présenté dans la couche supérieure.

La spécification d'origine pour ::backdrop présentait les caractéristiques suivantes:

Elle n'hérite d'aucun élément et n'est héritée d'aucun élément.

Bien que cela soit 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. ce qui suscitait la confusion chez 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 afin de 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 désormais spécifiés dans la spécification de mise en page CSS CSS.

Parallèlement au transfert de la définition vers une nouvelle spécification, nous avons affiné les définitions.

Une amélioration qui a un impact direct pour les développeurs Web est que l'élément ::backdrop est désormais un élément respectueux des arbres, ce qui signifie qu'il hérite des propriétés héritables de son élément d'origine.

Grâce à cette modification, il est possible de remplacer les valeurs des propriétés 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);
}