`:defined` - Sélecteur CSS

:defined

Résumé des caractéristiques du sélecteur `:defined`

Description rapide

Pseudo-classe désignant les éléments définis (notion variable suivant le langage).

Statut

Standard

Module W3C

Sélecteurs

Références (W3C)

Selectors Level 4

Statut du document: WD (document de travail)

Description de la pseudo-classe `:defined`.

:defined cible les élément qui sont définis. En HTML tous les éléments standards sont considérés comme définis. Mais ce n'est pas le cas des éléments personnalisés car ceux-ci doivent d'abord exécuter leur méthode define().

Remarque : les éléments personnalisés de HTML doivent obligatoirement comporter un tiret (signe moins) dans leur nom afin qu'il n'y ait pas de confusion possible avec les balises HTML actuelles ou futures.

Prenons un exemple : un élément personnalisé qui affiche la date du jour. Nommons le x-calendar (puisque le nom doit comporter un tiret). Écrivons maintenant la classe Javascript xCalendar qui lui sera associée. Celle-ci déclare un élément shadow qui sera le conteneur de la date, et un élément cal, du type span. Le constructeur s'occupe de calculer la date et d'en extraire le jour, le mois, et l'année.


	class xCalendar extends HTMLElement {
	   shadow = this.attachShadow({ mode: "open" });
	   cal =  document.createElement('span');
	
	   constructor() {
	      super();
	      var toDay = new Date();
	      this.cal.innerText = toDay.getDate()+'/'+(toDay.getMonth()+1)+'/'+toDay.getFullYear();
	      this.shadow.appendChild(this.cal);
	   }
	}

Le composant est prêt, il ne reste plus qu'à le définir avec la méthode define() de l'objet customElements. Nous aurions pu effectuer cette opération juste après la définition de la classe, mais pour que l'exemple soit plus parlant nous avons créer une fonction, qui sera appelée par le bouton ci-dessous.

Dans la réalité le composant peut prendre du temps pour se mettre à jour (accès à une base de données, calculs complexes, attente d'un mot de passe, etc.). C'est ce que nous avons simulé en appelant la fonction avec un bouton.


	function define() {
	   customElements.define("x-calendar", xCalendar);
	}

Enfin quelque part sur la page, nous insérons le composant personnalisé.


	x-calendar1/1/1900/x-calendar

Voila, nous avons maintenant un composant qui, au chargement de la page, n'est pas défini, et qui le sera par un clic sur le bouton.

1/1/1900

Avec les styles que nous avons appliqués le composant est masqué tant qu'il n'est pas défini. Cela n'empêche pas de lui appliquer quelques style de formatage. Lorsque :defined est activé, le composant s'affiche.

Compatibilité des navigateur avec `:defined`.

Colonne 1

Prise en charge par les navigateurs de la pseudo-classe :defined qui cible les éléments déjà définis, c'est à dire tous les éléments standards et les éléments personnalisés qui ont exécuté leur méthode define().

Pseudo-classe
:defined

Estimation de la prise en charge globale.

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Samsung Internet

Chrome

Opéra

Firefox

Edge

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la pseudo-classe `:defined`.

La pseudo-classe :defined est bien reconnue par tous les navigateurs.

Sélecteurs - Niveau 4

Introduction de la pseudo-classe :defined.

29 Septembre 2011
Document de travail.

Voir aussi...

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété :defined fait partie du module Selectors .
Les définitions suivantes sont également décrites dans ce même module.

⚠

:any()

Pseudo-classe obsolète. A été remplacée par :is().

:has()

Pseudo-classe ciblant un élément dont au moins un des enfants correspond à l'un des sélecteurs passés en argument.

:is()

Pseudo-classe permettant de simplifier les syntaxes complexes faisant intervenir plusieurs sélecteurs.

⚠

:matches()

Pseudo-classe obsolète, remplacée par is().

:not()

Pseudo-classe pour inverser l'action d'un sélecteur.