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.
Navigateurs pris en charge
- 122
- 122
- 120
- 17,4
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);
}