Os atributos de dados HTML5 vazios são válidos?

115

Eu gostaria de escrever um plugin jQuery simples que exibe modais embutidos em elementos especificados. Minha ideia é que o script inicie automaticamente com base nos atributos de dados especificados nos elementos.

Um exemplo muito básico:

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

Só estou me perguntando se data-modal-targeto exemplo acima é válido ou tem que ser data-modal-target="true"? Eu não me importo com nada pior do que o IE9 etc, meu único requisito é que seja HTML5 válido.

html custom-data-attribute html5-data Adão
fonte
Não consegui encontrar onde os atributos de dados personalizados exigem um valor ou não; e ainda não tenho certeza se devo omitir o valor ou apenas incluí-lo por segurança. As especificações do W3C são confusas (sem surpresa). Acho que pode depender do script usando os valores. (exemplo de comentário continuado abaixo, devido ao limite de comprimento).
goodeye
por exemplo, estou usando um plug-in que possui atributos de dados personalizados com valores padrão: algumas strings, alguns booleanos (o que me levou a procurar por esta questão). Os dados booleanos combinam se o padrão é verdadeiro ou falso; está fazendo a verificação para ver se existe ou tem um valor. Ele está verificando se o valor é verdadeiro ou vazio (para verdadeiro) ou falso. Mas a verificação de vazio está explícita no código; não é "embutido". E não está verificando o nome do atributo, como data-abc = "data-abc" como um atributo booleano requer; isso causa um erro.
goodeye

Respostas:

52

Válidos, mas não são booleanos.

A especificação de atributos de dados personalizados não menciona nenhuma alteração no tratamento de atributos vazios, portanto, as regras gerais sobre atributos vazios se aplicam aqui:

Certos atributos podem ser especificados fornecendo apenas o nome do atributo, sem valor.

No exemplo a seguir, o disabledatributo é fornecido com a sintaxe de atributo vazia:

<input disabled>

Observe que a sintaxe do atributo vazio é exatamente equivalente a especificar a string vazia como o valor do atributo, como no exemplo a seguir.

<input disabled="">

Portanto, você tem permissão para usar atributos de dados personalizados vazios, mas é necessário um tratamento especial para usá-los como booleanos.

Quando você está acessando um atributo vazio, seu valor é "". Como é um valor falso, você não pode usar apenas if (element.dataset.myattr)para verificar se um atributo está presente.

Você deve usar element.hasAttribute('myattr')ou em if (element.dataset.myattr !== undefined)vez disso.

A resposta de Lloyd está errada. Ele menciona link para a microssintaxe de atributos booleanos, mas os data-*atributos não são especificados como booleanos na especificação.

do utilizador
fonte
"Observe que a sintaxe do atributo vazio é exatamente equivalente a especificar a string vazia como o valor do atributo, como no exemplo a seguir." é exatamente o que eu estava procurando. Especificamente, a scriptAttrsconfiguração do jQuery não gosta de um defervalor simples , mas um defer: ""deve servir. Obrigado!
sfarbota
111

Sim, perfeitamente válido. No seu caso, data-modal-targetrepresentaria um atributo booleano:

2.4.2 Atributos booleanos

A presença de um atributo booleano em um elemento representa o valor verdadeiro e a ausência do atributo representa o valor falso.

Lloyd
fonte
3
Agradável! Obrigado pelo link, geralmente não tenho paciência para navegar em w3.org :)
Adam
4
Não sei omitir o valor "o transforma em" um atributo booleano - parece que os atributos booleanos não são arbitrários; Acho que há uma lista deles. Talvez não importe se ele é tratado como um dado booleano ou personalizado pelo navegador / script; mas talvez dependa da leitura do script.
goodeye
3
Eu acredito que isso mudou. Certamente, o exemplo que estou usando em meu código não está sendo tratado como um booleano, mas sim como uma string vazia. Portanto, o teste if ($('p').data('modal-target'))não funcionará: stackoverflow.com/questions/16864999/… .
Derek Henderson
4
parece que isso não é verdade element.dataset.modalTargetproduziria uma string vazia que é falsa (Chrome 32) mesmo resultado com jQuery
H1D
20
Esta parece ser uma interpretação errônea da especificação. A seção vinculada descreve os atributos booleanos, mas não diz se os atributos de dados personalizados podem ser atributos booleanos.
BoltClock
1

Sim, é uma sintaxe válida omitir o valor de um atributo de dados personalizado.

"Os atributos podem ser especificados de quatro maneiras diferentes:

Sintaxe de atributo vazia Apenas o nome do atributo. O valor é implicitamente a string vazia. [...] " https://developers.whatwg.org/syntax.html#attributes-0

novo
fonte
1

Por um lado, ele passa no validador 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>

Por outro lado, o HTML5 não diz na especificação de data-atributos que eles são booleanos: https://www.w3.org/TR/html5/dom.html#custom-data-attribute enquanto diz isso muito claramente para outros booleanos atributos como checked https://www.w3.org/TR/html5/forms.html#attr-input-checked

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