Czy puste atrybuty danych HTML5 są prawidłowe?

115

Chciałbym napisać prostą wtyczkę jQuery, która wyświetla wbudowane modale pod określonymi elementami. Mój pomysł jest taki, aby skrypt automatycznie inicjował się na podstawie atrybutów danych określonych w elementach.

Bardzo podstawowy przykład:

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

Zastanawiam się tylko, czy data-modal-targetw powyższym przykładzie jest poprawny, czy musi być data-modal-target="true"? Nie obchodzi mnie nic bardziej gównianego niż IE9 itp. Moim jedynym wymaganiem jest, aby był to poprawny HTML5.

html custom-data-attribute html5-data Adam
źródło
Nie udało mi się znaleźć, gdzie niestandardowe atrybuty danych wymagają wartości, czy nie; i nadal nie jestem pewien, czy pominąć tę wartość, czy po prostu dołączyć ją dla bezpieczeństwa. Specyfikacja W3C jest myląca (nic dziwnego). Myślę, że może to zależeć od skryptu używającego wartości. (przykład komentarza kontynuowany poniżej, ze względu na limit długości).
goodeye
np. używam wtyczki, która ma niestandardowe atrybuty danych z wartościami domyślnymi: niektóre ciągi znaków, niektóre wartości logiczne (co prowadzi mnie do szukania tego pytania). Dane logiczne zawierają kombinację tego, czy wartość domyślna to prawda lub fałsz; sprawdza, czy istnieje lub ma wartość. Sprawdza, czy wartość jest prawdą, pustą (dla prawdy) lub fałszem. Ale sprawdzenie, czy pusty jest pusty, jest jawny w kodzie; nie jest „wbudowany”. I nie sprawdza nazwy atrybutu, na przykład data-abc = "data-abc", ponieważ atrybut logiczny wymaga; powoduje to błąd.
goodeye

Odpowiedzi:

52

Prawidłowe, ale nie są logiczne.

Specyfikacja niestandardowych atrybutów danych nie wspomina o żadnych zmianach w obsłudze pustych atrybutów, więc mają tu zastosowanie ogólne zasady dotyczące pustych atrybutów :

Niektóre atrybuty można określić, podając tylko nazwę atrybutu, bez wartości.

W poniższym przykładzie disabledatrybut jest podawany z pustą składnią atrybutu:

<input disabled>

Należy zauważyć, że pusta składnia atrybutu jest dokładnie równoważna określeniu pustego ciągu jako wartości atrybutu, jak w poniższym przykładzie.

<input disabled="">

Możesz więc używać pustych niestandardowych atrybutów danych, ale wymagana jest specjalna obsługa, aby używać ich jako wartości logicznych.

Kiedy uzyskujesz dostęp do pustego atrybutu, jego wartością jest "". Ponieważ jest to fałszywa wartość, nie możesz po prostu użyć if (element.dataset.myattr)do sprawdzenia, czy atrybut jest obecny.

Zamiast tego powinieneś użyć element.hasAttribute('myattr')lub if (element.dataset.myattr !== undefined).

Odpowiedź Lloyda jest błędna. Wspomina o linku do atrybutów boolowskich microsyntax, ale data-*atrybuty nie są określone jako boolowskie w specyfikacji.

użytkownik
źródło
„Zwróć uwagę, że składnia pustego atrybutu jest dokładnie równoważna określeniu pustego ciągu jako wartości atrybutu, jak w poniższym przykładzie”. jest dokładnie tym, czego szukałem. W szczególności scriptAttrsustawienie jQuery nie lubi zwykłej deferwartości, ale defer: ""powinno załatwić sprawę. Dzięki!
sfarbota
111

Tak, całkowicie ważne. W twoim przypadku data-modal-targetreprezentowałby atrybut boolowski:

2.4.2 Atrybuty boolowskie

Obecność atrybutu logicznego w elemencie reprezentuje wartość prawdziwą, a brak atrybutu reprezentuje wartość fałszywą.

Lloyd
źródło
3
Miły! Dzięki za link, zwykle nie mam cierpliwości, by przebrnąć przez w3.org :)
Adam
4
Nie wiem, czy pominięcie wartości „zamienia ją w” atrybut boolowski - wygląda na to, że atrybuty boolowskie nie są arbitralne; Myślę, że jest ich lista. Może nie ma znaczenia, czy są one traktowane jako dane logiczne czy niestandardowe przez przeglądarkę / skrypt; ale może to zależy od skryptu, który go odczytuje.
goodeye
3
Wierzę, że to się zmieniło. Z pewnością przykład, którego używam w moim kodzie, nie jest traktowany jako wartość logiczna, ale raczej jako pusty ciąg. Więc testowanie if ($('p').data('modal-target'))nie zadziała: stackoverflow.com/questions/16864999/… .
Derek Henderson,
4
wygląda na to, że to nieprawda, element.dataset.modalTargetdałoby pusty ciąg, który jest fałszywy (Chrome 32) ten sam wynik z jQuery
H1D
20
Wydaje się, że jest to błędna interpretacja specyfikacji. Sekcja, do której prowadzi łącze, opisuje atrybuty logiczne, ale nie mówi, czy niestandardowe atrybuty danych mogą być atrybutami boolowskimi.
BoltClock
1

Tak, prawidłową składnią jest pomijanie wartości dla niestandardowego atrybutu danych.

„Atrybuty można określić na cztery różne sposoby:

Pusta składnia atrybutu Tylko nazwa atrybutu. Wartość jest niejawnie pustym ciągiem. [...] ” https://developers.whatwg.org/syntax.html#attributes-0

eew
źródło
1

Z jednej strony przechodzi przez walidator 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>

Z drugiej strony HTML5 nie mówi w specyfikacji data-atrybutów, że są one logiczne: https://www.w3.org/TR/html5/dom.html#custom-data-attribute, podczas gdy mówi to bardzo wyraźnie w przypadku innych wartości logicznych atrybuty, takie jak checked https://www.w3.org/TR/html5/forms.html#attr-input-checked

Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
źródło