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