web-dev-qa-db-fra.com

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

Je voudrais écrire un plugin jQuery simple qui affiche les modaux en ligne sous les éléments spécifiés. Mon idée est que le script s'initie 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-target dans l'exemple ci-dessus est valide, ou doit-il être data-modal-target="true"? Je ne me soucie de rien de plus fou que IE9, etc., ma seule exigence est qu'il soit valide HTML5.

html5custom-data-attributehtml5-data
108
Adam

Oui, parfaitement valable. Dans ton cas, data-modal-target repré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 vraie valeur et l'absence de l'attribut représente la fausse valeur.

104
Lloyd

Spécification des attributs de données personnalisés ne mentionne aucune modification dans la gestion des attributs vides, donc 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'attribut disabled 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 pour 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.

Si vous accédez à l'attribut via element.dataset:

  • Lorsqu'un attribut vide est présent, sa valeur est "".
  • Lorsqu'un attribut est absent, vous obtenez undefined.

Par conséquent, vous ne pouvez pas simplement vérifier que if (element.dataset.myattr) car ce sera toujours false.

Vous pouvez et devez vérifier les attributs booléens comme if (element.dataset.myattr !== undefined).

La réponse de Lloyd est incorrecte. Il mentionne un lien vers la microsyntaxe des attributs booléens, mais les attributs data-* Ne sont pas spécifiés comme booléens dans les spécifications.

42
user

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 de data- attributs qu'ils sont booléens: https://www.w3.org/TR/html5/dom.html#custom-data-attribute alors qu'il est dit très clairement pour d'autres attributs booléens comme checkedhttps://www.w3.org/TR/html5/forms.html#attr-input-checked

1
Ciro Santilli 新疆改造中心996ICU六四事件

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-

1
eew