Sind leere HTML5-Datenattribute gültig?

116

Ich möchte ein einfaches jQuery-Plugin schreiben, das Inline-Modalitäten unter bestimmten Elementen anzeigt. Meine Idee ist, dass das Skript basierend auf den auf Elementen angegebenen Datenattributen automatisch initiiert wird.

Ein sehr einfaches Beispiel:

<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>

Ich frage mich nur, ob data-modal-target das obige Beispiel gültig ist oder sein muss data-modal-target="true". Ich kümmere mich nicht um etwas Mistigeres als IE9 usw. Meine einzige Anforderung ist, dass es gültiges HTML5 ist.

html custom-data-attribute html5-data

— Adam
quelle

Ich konnte nicht finden, wo benutzerdefinierte Datenattribute einen Wert erfordern oder nicht. und bin mir immer noch nicht sicher, ob ich den Wert weglassen oder nur einschließen soll, um sicher zu gehen. Die W3C-Spezifikation ist verwirrend (keine Überraschung). Ich denke, es kann vom Skript abhängen, das die Werte verwendet. (Kommentarbeispiel weiter unten, aufgrund der Längenbeschränkung).

— Goodeye

Ich verwende beispielsweise ein Plug-In mit benutzerdefinierten Datenattributen mit Standardwerten: einige Zeichenfolgen, einige Boolesche Werte (was mich dazu veranlasst, nach dieser Frage zu suchen). Die booleschen Daten haben eine Mischung daraus, ob der Standardwert wahr oder falsch ist. Es wird überprüft, ob es existiert oder einen Wert hat. Es wird geprüft, ob der Wert entweder wahr oder leer (für wahr) oder falsch ist. Die Prüfung auf Leerzeichen ist jedoch im Code explizit angegeben. es ist nicht "eingebaut". Und es wird nicht nach dem Attributnamen gesucht, wie data-abc = "data-abc", wie es ein boolesches Attribut erfordert; Dies verursacht einen Fehler.

— Goodeye

52

Gültig, aber sie sind nicht boolesch.

In der Spezifikation für benutzerdefinierte Datenattribute werden keine Änderungen an der Behandlung leerer Attribute erwähnt. Daher gelten hier die allgemeinen Regeln für leere Attribute :

Bestimmte Attribute können angegeben werden, indem nur der Attributname ohne Wert angegeben wird.

Im folgenden Beispiel wird das disabledAttribut mit der leeren Attributsyntax angegeben:
<input disabled>
Beachten Sie, dass die Syntax für leere Attribute genau der Angabe der leeren Zeichenfolge als Wert für das Attribut entspricht, wie im folgenden Beispiel.
<input disabled="">

Sie dürfen also leere benutzerdefinierte Datenattribute verwenden, aber eine spezielle Behandlung ist erforderlich, um sie als Boolesche Werte zu verwenden.

Wenn Sie auf ein leeres Attribut zugreifen, lautet sein Wert "". Da es sich um einen falschen Wert handelt, können Sie nicht einfach if (element.dataset.myattr)überprüfen, ob ein Attribut vorhanden ist.

Sie sollten element.hasAttribute('myattr')oder if (element.dataset.myattr !== undefined)stattdessen verwenden.

Lloyds Antwort ist falsch. Er erwähnt den Link zu den Booleschen Attributen Mikrosyntax, aber data-*Attribute werden in der Spezifikation nicht als Boolesche Werte angegeben.

— Benutzer
quelle

"Beachten Sie, dass die Syntax für leere Attribute genau der Angabe der leeren Zeichenfolge als Wert für das Attribut entspricht, wie im folgenden Beispiel." ist genau das, wonach ich gesucht habe. Insbesondere scriptAttrsmag die Einstellung von jQuery keinen einfachen deferWert, aber a defer: ""sollte den Trick machen. Vielen Dank!

— sfarbota vor

112

Ja, vollkommen gültig. In Ihrem Fall data-modal-targetwürde dies ein boolesches Attribut darstellen:

2.4.2 Boolesche Attribute

Das Vorhandensein eines booleschen Attributs für ein Element repräsentiert den wahren Wert, und das Fehlen des Attributs repräsentiert den falschen Wert.

— Lloyd
quelle

3

Nett! Vielen Dank für den Link, ich habe normalerweise nicht die Geduld, durch w3.org zu waten :)

— Adam

4

Ich weiß nicht, ob das Weglassen des Werts "verwandelt" in ein boolesches Attribut - es scheint, dass die booleschen Attribute nicht willkürlich sind; Ich denke, es gibt eine Liste von ihnen. Vielleicht spielt es keine Rolle, ob es vom Browser / Skript als boolesche oder benutzerdefinierte Daten behandelt wird. aber vielleicht hängt es vom Skript ab, das es liest.

— Goodeye

3

Ich glaube, das hat sich geändert. Sicherlich wird das Beispiel, das ich in meinem Code verwende, nicht als Boolescher Wert behandelt, sondern als leere Zeichenfolge. Das Testen if ($('p').data('modal-target'))funktioniert also nicht: stackoverflow.com/questions/16864999/… .

— Derek Henderson

4

sieht so aus, als ob dies nicht wahr element.dataset.modalTargetwäre, würde eine leere Zeichenfolge erzeugen, die falsch ist (Chrome 32). Das gleiche Ergebnis mit jQuery

— H1D

20

Dies scheint eine Fehlinterpretation der Spezifikation zu sein. Der Abschnitt , den Sie verknüpfen beschreibt Boolesche Attribute, aber nicht sagen , ob Attribute benutzerdefinierte Daten können sein Boolesche Attribute.

— BoltClock

1

Ja, es ist eine gültige Syntax, den Wert für ein benutzerdefiniertes Datenattribut wegzulassen.

"Attribute können auf vier verschiedene Arten angegeben werden:

Leere Attributsyntax Nur der Attributname. Der Wert ist implizit die leere Zeichenfolge. [...] " https://developers.whatwg.org/syntax.html#attributes-0

— eew
quelle

1

Einerseits besteht es den Validator 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>

Andererseits sagt HTML5 in der Spezifikation von data-Attributen nicht, dass sie boolesch sind: https://www.w3.org/TR/html5/dom.html#custom-data-attribute während dies für andere boolesche Werte sehr deutlich gesagt wird Attribute wie checked https://www.w3.org/TR/html5/forms.html#attr-input-checked

— Ciro Santilli 郝海东冠状病六四事件法轮功
quelle