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

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