:defined
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since janvier 2020.
La pseudo-classe CSS :defined représente n'importe quel élément ayant été défini. Cela inclut les éléments standards provenant du navigateur, ainsi que les éléments personnalisés (« custom elements ») ayant correctement été définis (c'est-à-dire grâce à la méthode CustomElementRegistry.define()).
/* Cette règle cible tout élément défini */
:defined {
font-style: italic;
}
/* Cette règle cible n'importe quelle instance d'un élément personnalisé donné */
simple-custom:defined {
display: block;
}
Syntaxe
:defined {
/* ... */
}
Exemples
Masquer les éléments jusqu'à ce qu'ils soient définis
Dans cette démonstration, nous définissons un élément personnalisé de base nommé <custom-element> et utilisons les sélecteurs :not(:defined) et :defined pour mettre en forme l'élément avant et après sa définition. Cela est utile si vous avez un élément personnalisé complexe qui prend un certain temps à se charger dans la page — vous pouvez alors masquer les instances de l'élément jusqu'à ce que la définition soit terminée afin d'éviter que des éléments non stylisés n'apparaissent de manière inesthétique sur la page.
HTML
Le code HTML suivant utilise l'élément personnalisé, mais celui-ci n'a pas encore été défini. Nous incluons également un élément <button> qui définira l'élément personnalisé lorsqu'on cliquera dessus, ce qui vous permettra de voir son état avant et après la définition.
<custom-element>
<p>
Contenu chargé : Lorem ipsum tel sed tellus eiusmod tellus. Aenean. Semper
dolor sit nisi. Elit porttitor nisi sit vivamus.
</p>
</custom-element>
<button id="btn">définir le <code><custom-element></code></button>
CSS
Dans le CSS suivant, nous utilisons le sélecteur custom-element:not(:defined) pour sélectionner l'élément et le colorer en gris lorsqu'il n'est pas défini, et le sélecteur custom-element:defined pour sélectionner l'élément et le colorer en noir une fois qu'il est défini.
custom-element:not(:defined) {
border-color: grey;
color: grey;
}
custom-element:defined {
background-color: wheat;
border-color: black;
color: black;
}
/* afficher le message de chargement */
custom-element:not(:defined)::before {
content: "Chargement...";
position: absolute;
inset: 0;
align-content: center;
text-align: center;
font-size: 2rem;
background-color: white;
border-radius: 1rem;
}
/* supprimer le message de chargement */
custom-element:defined::before {
content: "";
}
Nous avons également utilisé le pseudo-élément ::before pour afficher un message superposé « Chargement... » jusqu'à ce que l'élément soit défini. Une fois défini, il est supprimé en définissant le content sur une chaîne vide.
JavaScript
Le JavaScript suivant a été utilisé pour définir l'élément personnalisé. Pour vous permettre de voir l'état de l'élément personnalisé avant et après sa définition, nous exécutons la méthode must be provided lorsque vous cliquez sur le bouton.
const btn = document.querySelector("#btn");
btn.addEventListener("click", () => {
customElements.define("custom-element", class extends HTMLElement {});
btn.remove();
});
Résultat
Spécifications
| Specification |
|---|
| HTML # selector-defined |
| Selectors Level 4 # defined-pseudo |
Compatibilité des navigateurs
Loading…