La pseudo-classe :defined représente n'importe quel élément ayant été défini. Cela inclut les éléments standards provenant du navigateur et également 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

Les fragments de code qui suivent sont tirés du dépôt defined-pseudo-class (voir le résultat en live).

Pour cette démonstration on définit un élément personnalisé trivial :

customElements.define('simple-custom',
  class extends HTMLElement {
    constructor() {
      super();

      let divElem = document.createElement('div');
      divElem.textContent = this.getAttribute('text');

      let shadowRoot = this.attachShadow({mode: 'open'})
        .appendChild(divElem);
  }
})

On insère une copie de cet élément dans le document, à côté d'un paragraphe classique <p>  :

<simple-custom text="Le texte de l'élément personnalisé"></simple-custom>

<p>Un paragraphe normal.</p>

Dans la feuille CSS, on inclut les règles suivantes :

// On utilise deux arrières-plans distincts
// pour ces deux éléments
p {
  background: yellow;
}

simple-custom {
  display: block;
  background: cyan;
}

// On met en italique le texte de ces 
// deux éléments
:defined {
  font-style: italic;
}

Ensuite, on fournit les deux règles suivantes afin de masquer les instances de l'élément personnalisé qui ne sont pas définies et, pour celles qui sont définies, on indique que ce sont des éléments de bloc :

simple-custom:not(:defined) {
  opacity: 0;
}

simple-custom:defined {
  opacity: 0.75;
  text-decoration: underline;
}

Ces dernières règles sont utiles lorsqu'on a un élément personnalisé complexe qui met du temps à charger : pour ceux-là, on peut vouloir les masquer jusqu'à ce que la définition soit complète afin de ne pas avoir de scintillement d'éléments non mis en formes sur la page.

Résultat

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de ':defined' dans cette spécification.
Standard évolutif  

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet OuiEdge ? Firefox Support complet 63IE Aucun support NonOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile ? Firefox Android Support complet 63Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,