F XForms et le style

F XForms et le style (non normatif)

Cette section informative trace les grandes lignes des fonctionnalités CSS nouvelles et existantes nécessaires pour styler un contenu XForms. Une future recommandation du groupe de travail CSS définira complètement ces fonctionnalités.

F.1 Les pseudo-classes

Une pseudo-classe CSS sert à sélectionner des éléments à styler en fonction d'informations qui se tiennent hors de l'arbre du document ou qu'on ne peut exprimer en utilisant les autres sélecteurs.

Nom	Défini dans :	Relation avec XForms
`:enabled` et `:disabled`	[CSS3]	Sélectionne toute commande de formulaire liée à un nœud dont la valeur de la propriété d'élément de modèle `relevant` est évaluée à "`true`", ou "`false`" (respectivement).
`:required` et `:optional`	à définir	Sélectionne toute commande de formulaire liée à un nœud dont la valeur de la propriété d'élément de modèle `required` est évaluée à "`true`", ou "`false`" (respectivement).
`:valid` et `:invalid`	à définir	Sélectionne toute commande de formulaire liée à un nœud qui est actuellement valide, ou invalide (respectivement), comme défini par XForms 1.0.
`:read-only` et `:read-write`	à définir	Sélectionne toute commande de formulaire liée à un nœud dont la valeur de la propriété d'élément de modèle `readonly` est évaluée à "`true`", ou "`false`" (respectivement).
`:out-of-range` et `:in-range`	à définir	Sélectionne toute commande de formulaire liée à un nœud qui contient une valeur que la commande de formulaire ne peut pas, ou peut, rendre (respectivement).

Cette liste n'est pas exhaustive ; d'autres pseudo-classes peuvent être définies.

F.2 Les pseudo-éléments

Les pseudo-éléments sont des abstractions au sujet de l'arbre du document qui vont au-delà de celles définies par le langage du document. Les pseudo-éléments n'apparaissent pas dans le DOM ; ils ne servent que pour les besoins de l'application d'un style.

Nom	Défini dans :	Relation avec XForms
`::value`	à définir	Représente la zone active d'une commande de formulaire à l'exclusion de l'étiquette ; en HTML, cela correspond à l'élément `input` et à d'autres éléments de commande de formulaire. Ce pseudo-élément est un sous-élément de l'élément de commande de formulaire et il apparaît immédiatement après l'élément obligatoire `label`.
`::repeat-item`	à définir	Représente un seul élément d'une séquence de répétition. Sa position est celle d'un parent pour tous les éléments dans un seul élément de répétition. Chaque `::repeat-item` est associé à un nœud de donnée d'instance particulier et est affecté par les propriétés d'élément de modèle (par exemple, `relevant`) qui s'y trouvent, dans la mesure où les propriétés de style concernées s'appliqueront en cascade aux éléments enfants.
`::repeat-index`	à définir	Représente l'élément courant d'une séquence de répétition. Sa position est celle d'un parent pour tous les éléments de l'élément de répétition à l'index (et celle d'un enfant pour le pseudo-élément `::repeat-item`), ainsi toutes les déclarations de style qui s'appliquent à ce pseudo-élément écrasent celles sur le parent `::repeat-item`.

Cette liste n'est pas exhaustive ; d'autres éléments peuvent être définis.

F.3 Exemples

Les exemples suivants montrent comment appliquer un style de base sur des commandes de formulaire et des structures de répétition.

@namespace xforms url(http://www.w3.org/2002/xforms);
/* Affiche un arrière-plan rouge sur toutes les commandes de formulaire invalides */
*:invalid { background-color:red; }

/* Afficher un astérisque rouge après toutes les commandes de formulaires obligatoires */
*:required::after { content: "*"; color:red; }

/* Ne rend pas les commandes de formulaire non pertinentes */
*:disabled { visibility: hidden; }

/* Les déclarations suivantes amènent les commandes de formulaires et leur étiquette
   à s'aligner parfaitement, comme si on avait utilisé un tableau */
xforms|group { display: table; }
xforms|input { display: table-row; }
xforms|input > xforms|label { display: table-cell; }
xforms|input::value { border: thin black solid; display: table-cell; }

/* Affiche un message d'alerte quand nécessaire */
*:valid   > xforms|alert { display: none; }
*:invalid > xforms|alert { display: inline; }

/* Affiche les éléments de répétition avec une bordure tiretée */
*::repeat-item { border: dashed; }

/* Affiche un éclairage vert sarcelle (teal) derrière l'élément de répétition courant */
*::repeat-index { background-color: teal; }


Table des matières	Précédent	Suivant	Bas de page