Ajouter SES attributs en xhtml

Bonjour,

Je travaille sur un site en xhtml strict, il se valide correctement à un détail près : le validator génère une erreur à chaque fois que j'ajoute mes propres attributs à une balise standards.

Je me sert de ses attributs pour du javascript non intrusif.
Par exemple pour indiquer dans une textarea le nombre de caractères autorisés, j'ajoute sur chacun un attribut du genre taillemax="500". À la saisie, un compteur javascript récupère la valeur, indique le nombre de caractère qu'on peut encore saisir, et bloque la saisie quand la taillemax est atteinte (et oui, j'effectue aussi le même contrôle côté serveur).

Mais n'est là que pour servir d'exemple, je voudrais savoir d'une façon générale comment faire pour ajouter des informations de type attribut quand ceux de la DTD xhtml de base ne suffisent plus...

Sinon tant pis, je sens que je vais les laisser, c'est pas des erreurs graves non plus...

La logique du W3C implique qu'on ne rajoute pas d'attribut non-standard aux balises.

Pour résoudre cet epineux problème, il existe plusieurs solution :

1 - Abuser des definissions de class :

<textarea name="truc" class="maxChar500 noHTML">

De cette manière il est possible de savoir comment doit ce comporter un champs textearea avec JavaScript (500 caractère maximum et pas de balise HMTL... par exemple)

L'accès à la liste des classes appliquées en JavaScript passe par l'attribut className qu'il faut eclaté (avec split()) pour séparé toutes les classes.

2 - Faire du XHTML 1.1 qui permet de redéfinir les balises et attribut disponible via sa propre DTD ! Malheureusement, cette solution est assez problématique à mettre en oeuvre car tous les navigateurs ne suppporte pas les format XHTML en mode XML et ne sont pas validant. Ainsi le resultat obtenu n'est pas garantis.

Oui, c'est bien ce que je pensais.

Et je ne compte pas spécialement faire du xhtml1.1, le vrai 1.1 en xml, ça ne me semble pas viable pour mon cas pour le moment (no troll !).

J'avais bien pensé à la solution dont tu parles, mais les classes ne sont pas faites pour stocker des attributs, je trouve ça assez moche et reste énormément moins pratique qu'un objet_dom.getAttribute();

Pour le moment je vais garder mes attributs persos, après tout il n'y a que le validator que ça gène.

El Riiico a écrit :
J'avais bien pensé à la solution dont tu parles, mais les classes ne sont pas faites pour stocker des attributs

!? Et pourquoi pas ! Après tout, les classes ne sont jamais que des informations destiné à customizer l'apparence (CSS) et le comportement (JS)

El Riiico a écrit :
je trouve ça assez moche et reste énormément moins pratique qu'un objet_dom.getAttribute();

Ce n'est pourtant pas très compliqué et tout aussi élégant de faire une fonction getAttributeByClass()

El Riiico a écrit :
Pour le moment je vais garder mes attributs persos, après tout il n'y a que le validator que ça gène.

Ça, ça reste à voir... disons que sur les navigateurs "classique" qui sont ultra permissif (car non-validant) ce n'est pas problématique... mais Quid des autres supports... et que ce passera-t-il le jour ou les navigateurs deviendront des parseurs validant ?

Donc, oui, ça marche, mais tu n'enticipe pas un eventuel changement technologique ! C'est donc à tes risques et perils de proposer une telle solution

Bah, tant que je ne déclare pas le code en "application/xml" (si je me souviens bien), les parsers d'aujourd'hui et de demain ne s'offusqueront pas pour si peu.
C'est pour ça que je fais du xhtml1.0 et pas du 1.1.

Haaaa, je le savais que ça allait partir en discution philosophique

Bonjour

El Riiico a écrit :
mais les classes ne sont pas faites pour stocker des attributs

Sans aucune philosophie, et pour en rester au niveau strictement normatif : c'est totalement faux. L'attribut "class" est fait pour stocker ce qu'on a à y stocker pour utilisation par n'importe quelle machine, script, navigateur, etc, et qui ne rentre pas dans le contenu proprement dit. C'est à dire des métadonnées, qui peuvent très bien concerner le côté applicatif, ou la présentation.

C'est amusant de voir comme les gens aiment se compliquer la vie parfois
Modifié par Laurent Denis (07 Dec 2005 - 13:20)

Bonjour,
Intéressant, cette discussion.
Mais j'aurais une question : comment, alors, coupler dans cet attribut class un paramètre devant être utilisé en javascript et un autre devant être utilisé par le CSS ?

Genre j'ai ça en CSS :
.maclass { ... }

et puis je voudrais à la fois avoir un paramètre javascript et utiliser le comportement normal de l'attribut pour le CSS. Si je mets autre chose que class="maclass", ça marchera plus du côté CSS... Y a-t-il une solution à part définir des multiples classes inutiles appelées maxcharsXXX ?


Sinon au passage, style="AttribPerso:valeur;" peut être récupéré par .style.AttribPerso... mais seulement sur IE

QuentinC a écrit :
Si je mets autre chose que class="maclass", ça marchera plus du côté CSS...

Et bien si, ça marchera ! En effet, l'attribut class permet de définir de multiple class en les séparant par un espace

Par exemple :

<style type="text/css">
.CSSRouge{color:#900}
.CSSGras{font-weight:bold}
</style>
<div class="CSSRouge CSSGras JSHover">Machin bidule...</div>

En definissant la class CSS "CSSRouge" pour mettre le texte en rouge et en definissant la class CSS "CSSGras" pour mettre le texte en gras, les deux style seront appliqué à la balise... en suite, rien n'empèche de rajouter des class pour le JavaScript de la même façon

jpl949 a écrit :
sinon reste toujors la solution de l' "id" a la place de "class"

Hop, hop, hop... il ne faut pas tout confondre !

Les identifiant (id) ont vocation à identifier un element unique alors que les class sont des meta-données (Comme le dit si bien Laurent Denis)... on ne peut donc mettre qu'un seul id à un seul elements alors qu'on peut mettre plusieurs classes à plusieurs éléments !

Les finalité sont très différentes... et chaque sytème des avantages et des inconvenients, mais on ne compare pas ce qui n'est pas comparable

Une grossière erreur très souvent faite est de croire que les ID et les CLASS ne sont la que pour les CSS or, il n'est est rien !

D'ailleurs, les id sont très pratiques en js. Rien que pour la facilité offerte par document.getElementById pour accéder aux éléments...

Merci, je ne savais pas qu'on pouvait indiquer plusieurs classes CSS en les séparant par des espaces. Maintenant : est-ce que ceci :
class="js:verif(2)"
ou
class="verif(2)"
peuvent poser problème ?
Pour moi le premier oui, le deuxième non. Votre avis ?
Merci.

Bonjour,

Du point de vue d'HTML4.01 - XHTML1.0, ces valeurs sont a priori possibles. Elles sont cependant impossibles en tant que valeurs de sélecteur CSS, aussi bien pour les parenthèses que les deux-points.

cela-dit, un class="verif-2" me semblerait plus habile, si tu as besoin d'associer un nom et une valeur.
Modifié par Laurent Denis (08 Dec 2005 - 18:17)

En fait, je pensais avoir besoin de plusieurs valeurs
donc au moins je suis fixé, les parenthèses, c'est mieux si j'oublie
parce que je pensais à : class="fonction(this,1,2,3)"
Les experts en javascript auront vite compris l'idée qui se cache derrière cette manoeuvre : un appel direct de fonction...
Bon évidemment, le truc auquel je n'ai pas pensé tout de suite, c'est que ça peut effectivement faire planter le moteur CSS

Tant pis, je vais opter pour
class="fonction_1_2_3"
ou
class="fonction-1-2-3"
Et tant qu'à faire j'utiliserai une petite instruction split en plus.

Au fait j'ai un énorme doute depuis que j'ai écrit ces lignes : le tiret et l'underline sont-ils autorisés dans un nom de classe ou d'id ?

QuentinC a écrit :
Au fait j'ai un énorme doute depuis que j'ai écrit ces lignes : le tiret et l'underline sont-ils autorisés dans un nom de classe ou d'id ?

Oui, ils sont autorisés tous les deux. Cependant, le tiret n'est pas autorisé comme premier caractère.

Il y a eu une longue valse d'hésitations sur l'underscore au fil des spécifications CSS1, CSS2, errata CSS2 et CSS2.1 : semi-autorisé, puis interdit, il a finalement été définitivement autorisé. Les seuls navigateurs qui ne le reconnaissent pas sont les plus anciennes versions d'Opera et NS4, en général ignorées ou privées de feuilles de style...
Modifié par Laurent Denis (08 Dec 2005 - 20:32)

Sauf NS4... OK donc la voie est libre à 100%... les détenteurs de NS4 n'on qu'à évoluer un peu.

MErci LD.

Allez, après on pourra pas dire que je suis borné :

/**
 * Fonction générique, récupère la valeur d'un attribut passé par la classe d'un objet DOM
 *
 * Ne marche que pour des attributs passés comme suit : class="NomAttribut-ValeurCorrespondante"
 *
 * @param DOM objet_DOM Objet DOM interrogé
 * @param string nom_attribut Nom de l'attribut
 * @return string retourne la valeur correspondante, ou FALSE si l'attribut n'est pas trouvé
 */
function getAttributeFromClass(objet_DOM,nom_attribut)
{
	if(objet_DOM.getAttribute('className'))
	{
		var chaine_classe = objet_DOM.getAttribute('className');
	}
	if(objet_DOM.getAttribute('class'))
	{
		var chaine_classe = objet_DOM.getAttribute('class');
	}
	var tmp1 = chaine_classe.split(' ');
	for(var i = 0; i < tmp1.length; i++)
	{
		var tmp2 = tmp1[i].split('-');
		if(tmp2.length >= 2 && tmp2[0] == nom_attribut)
		{
			return tmp2[1];
		}
	}
	return false;
}

Normalement c'est du solide et du valide, ça respecte la norme Javascript standard (la 1.0 si je me trompe pas). Ca marche avec tous les navigateurs que j'ai pu trouver.[/i]
Modifié par El Riiico (09 Dec 2005 - 18:43)

Hey, j'ai l'impression qu'il y a un problème et que mon code est modifié !

Je crois qu'il y a un conflit avec le code phpBB du forum pour l'italique...
Modifié par El Riiico (09 Dec 2005 - 18:47)

Hey, j'ai l'impression qu'il y a un problème et que mon code est modifié !

Pour définir tmp2, c'est :
var tmp2 = tmp1"crochet gauche"i"crochet droit".split('-');

Pour définir tmp2, c'est :
var tmp2 = tmp1"crochet gauche"i"crochet droit".split('-');

En fait, il suffit de mettre un espace avant le crochet fermant ou après le crochet ouvrant. Faut y penser, j'oublie aussi de temps en temps...

Une autre question pendant que j'y suis : il n'y a pas de limite à la longueur des noms dans l'attribut class ?

Je m'explique : j'ai ça :
class="jsformcheckCharLength-6-18-Votre-mot-de-passe-doit-contenir-entre-6-et-18-caractères"

Merci.