Les attributs de données HTML5 vides sont-ils valides?

115

J'aimerais écrire un simple plugin jQuery qui affiche les modaux en ligne sous les éléments spécifiés. Mon idée est que le script s'initialise automatiquement en fonction des attributs de données spécifiés sur les éléments.

Un exemple très basique:

<p data-modal-target>Hover over me for an inline modal!</p>
<div data-modal-content data-modal-align="right" data-modal-trigger="hover" data-modal-offset="10px"><!-- any desired syntax can go here --></div>

Je me demande simplement si data-modal-targetdans l'exemple ci-dessus est valide, ou doit-il l'être data-modal-target="true"? Je me fiche de quelque chose de plus merdique que IE9, etc., ma seule exigence est que ce soit du HTML5 valide.

html custom-data-attribute html5-data Adam
la source
Je n'ai pas pu trouver où les attributs de données personnalisés nécessitent une valeur ou non; et je ne sais toujours pas s'il faut omettre la valeur ou simplement l'inclure pour être sûr. La spécification W3C est déroutante (pas de surprise). Je pense que cela peut dépendre du script utilisant les valeurs. (Exemple de commentaire continué ci-dessous, en raison de la limite de longueur).
revoir
par exemple, j'utilise un plug-in qui a des attributs de données personnalisés avec des valeurs par défaut: des chaînes, des booléens (ce qui m'amène à chercher cette question). Les données booléennes mélangent si la valeur par défaut est vraie ou fausse; il fait la vérification pour voir s'il existe ou s'il a une valeur. Il vérifie si la valeur est vraie ou vide (pour vrai) ou fausse. Mais la vérification du vide est explicite dans le code; ce n'est pas "intégré". Et, il ne vérifie pas le nom de l'attribut, comme data-abc = "data-abc" comme l'exige un attribut booléen; cela provoque une erreur.
revoir

Réponses:

52

Valide, mais ils ne sont pas booléens.

La spécification des attributs de données personnalisés ne mentionne aucun changement dans la gestion des attributs vides, donc les règles générales sur les attributs vides s'appliquent ici:

Certains attributs peuvent être spécifiés en fournissant uniquement le nom de l'attribut, sans valeur.

Dans l'exemple suivant, l' disabledattribut est donné avec la syntaxe d'attribut vide:

<input disabled>

Notez que la syntaxe d'attribut vide équivaut exactement à spécifier la chaîne vide comme valeur de l'attribut, comme dans l'exemple suivant.

<input disabled="">

Vous êtes donc autorisé à utiliser des attributs de données personnalisés vides, mais une gestion spéciale est nécessaire pour les utiliser comme booléens.

Lorsque vous accédez à un attribut vide, sa valeur est "". Puisqu'il s'agit d'une valeur fausse, vous ne pouvez pas simplement l'utiliser if (element.dataset.myattr)pour vérifier si un attribut est présent.

Vous devriez utiliser element.hasAttribute('myattr')ou à la if (element.dataset.myattr !== undefined)place.

La réponse de Lloyd est fausse. Il mentionne le lien vers la microsyntaxe des attributs booléens, mais les data-*attributs ne sont pas spécifiés comme booléens dans la spécification.

utilisateur
la source
"Notez que la syntaxe d'attribut vide équivaut exactement à spécifier la chaîne vide comme valeur de l'attribut, comme dans l'exemple suivant." est exactement ce que je cherchais. Plus précisément, le scriptAttrsparamètre de jQuery n'aime pas une defervaleur simple , mais a defer: ""devrait faire l'affaire. Merci!
sfarbota le
111

Oui, parfaitement valable. Dans votre cas, data-modal-targetreprésenterait un attribut booléen:

2.4.2 Attributs booléens

La présence d'un attribut booléen sur un élément représente la valeur vraie et l'absence de l'attribut représente la valeur fausse.

Lloyd
la source
3
Agréable! Merci pour le lien, je n'ai généralement pas la patience de parcourir w3.org :)
Adam
4
Je ne sais pas si omettre la valeur "le transforme en" un attribut booléen - il semble que les attributs booléens ne sont pas arbitraires; Je pense qu'il y en a une liste. Peut-être que cela n'a pas d'importance si elles sont traitées comme des données booléennes ou personnalisées par le navigateur / script; mais peut-être que cela dépend du script qui le lit.
revoir
3
Je pense que cela a changé. L'exemple que j'utilise dans mon code n'est certainement pas traité comme un booléen mais plutôt comme une chaîne vide. Donc, les tests if ($('p').data('modal-target'))ne fonctionneront pas: stackoverflow.com/questions/16864999/… .
Derek Henderson
4
semble que ce n'est pas vrai element.dataset.modalTargetproduirait une chaîne vide qui est falsifiée (Chrome 32) même résultat avec jQuery
H1D
20
Cela semble être une mauvaise interprétation de la spécification. La section à laquelle vous créez un lien décrit les attributs booléens, mais n'indique pas si les attributs de données personnalisés peuvent être des attributs booléens.
BoltClock
1

Oui, c'est une syntaxe valide pour omettre la valeur d'un attribut de données personnalisé.

"Les attributs peuvent être spécifiés de quatre manières différentes:

Syntaxe d'attribut vide Juste le nom de l'attribut. La valeur est implicitement la chaîne vide. [...] " https://developers.whatwg.org/syntax.html#attributes-0

eew
la source
1

D'une part, il passe le validateur 16.5.7 https://validator.w3.org/nu/#textarea :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>a</title>
</head>
<body data-asdf>
</body>
</html>

D'autre part, HTML5 ne dit pas dans la spécification des data-attributs qu'ils sont booléens: https://www.w3.org/TR/html5/dom.html#custom-data-attribute alors qu'il le dit très clairement pour les autres booléens attributs comme checked https://www.w3.org/TR/html5/forms.html#attr-input-checked

Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
la source