Czy puste atrybuty danych HTML5 są poprawne?

Chciałbym napisać prosty plugin jQuery, który wyświetla inline modals pod określonymi elementami. Moim pomysłem jest automatyczne Inicjowanie skryptu w oparciu o atrybuty danych określone na 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-target w powyższym przykładzie jest poprawne, czy musi być data-modal-target="true"? Nie obchodzi mnie nic bardziej gównianego niż IE9 itp, moim jedynym wymogiem jest to, że jest poprawny HTML5.

Author: user, 2012-03-16

4 answers

Tak, doskonale. W Twoim przypadku data-modal-target reprezentowałby atrybut boolean:

2.4.2 atrybuty logiczne

Obecność atrybutu boolean na elemencie reprezentuje true wartość, a brak atrybutu przedstawia wartość false.

 91
Author: Lloyd,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-14 18:38:35

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

Niektóre atrybuty mogą być określone przez podanie tylko nazwy atrybutu, bez wartości.

W poniższym przykładzie atrybut disabled jest podany z pustą składnią atrybutu:

<input disabled>

Zauważ, że składnia atrybutu empty jest dokładnie równoważna określeniu pustego string jako wartość atrybutu, jak w poniższym przykładzie.

<input disabled="">

Więc możesz używać pustych niestandardowych atrybutów danych, ale potrzebna jest specjalna Obsługa, aby używać ich jako boolean.

Jeśli uzyskujesz dostęp do atrybutu poprzez element.dataset:

  • gdy atrybut jest pusty, jego wartością jest "".
  • gdy atrybut jest nieobecny, otrzymujesz undefined.

Dlatego nie można po prostu sprawdzić jako if (element.dataset.myattr), ponieważ zawsze będzie false.

Możesz i powinieneś sprawdzić atrybuty logiczne jako if (element.dataset.myattr !== undefined).


Odpowiedź Lloyda jest błędna. Wspomina link do boolean atrybuty microsyntax, ale data-* atrybuty nie są określone jako boolean w spec.

 38
Author: user,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-20 06:14:36

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

"atrybuty mogą być określone na cztery różne sposoby:

Pusta składnia atrybutu Tylko nazwa atrybutu. Wartość jest domyślnie pustym łańcuchem. [...]" https://developers.whatwg.org/syntax.html#attributes-0

 0
Author: eew,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-22 09:39:20

Z jednej strony przechodzi 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ą boolean: https://www.w3.org/TR/html5/dom.html#custom-data-attribute podczas gdy mówi, że bardzo wyraźnie dla innych atrybutów boolean, takich jak checked https://www.w3.org/TR/html5/forms.html#attr-input-checked

 0
Author: Ciro Santilli 新疆改造中心 六四事件 法轮功,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-15 16:26:54