¿Son válidos los atributos de datos HTML5 vacíos?

115

Me gustaría escribir un complemento jQuery simple que muestre modales en línea bajo elementos especificados. Mi idea es que el script se inicie automáticamente según los atributos de datos especificados en los elementos.

Un ejemplo muy 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>

Me pregunto si data-modal-targetel ejemplo anterior es válido o tiene que serlo data-modal-target="true". No me importa nada más malo que IE9, etc., mi único requisito es que sea HTML5 válido.

html custom-data-attribute html5-data

— Adán
fuente

No pude encontrar dónde los atributos de datos personalizados requieren un valor o no; y todavía no estoy seguro de si omitir el valor o simplemente incluirlo para estar seguro. La especificación del W3C es confusa (no es de extrañar). Creo que puede depender del script que use los valores. (el ejemplo de comentario continúa a continuación, debido al límite de longitud).

— goodeye

Por ejemplo, estoy usando un complemento que tiene atributos de datos personalizados con valores predeterminados: algunas cadenas, algunos valores booleanos (lo que me lleva a buscar esta pregunta). Los datos booleanos tienen una combinación de si el valor predeterminado es verdadero o falso; está haciendo la verificación para ver si existe o tiene un valor. Verifica si el valor es verdadero o vacío (para verdadero) o falso. Pero la comprobación de vacío es explícita en el código; no está "integrado". Y no busca el nombre del atributo, como data-abc = "data-abc" como lo requiere un atributo booleano; esto provoca un error.

— goodeye

52

Válidos, pero no son booleanos.

La especificación de atributos de datos personalizados no menciona ningún cambio en el manejo de atributos vacíos, por lo que las reglas generales sobre atributos vacíos se aplican aquí:

Ciertos atributos se pueden especificar proporcionando solo el nombre del atributo, sin valor.

En el siguiente ejemplo, el disabledatributo se proporciona con la sintaxis de atributo vacía:
<input disabled>
Tenga en cuenta que la sintaxis de atributo vacía es exactamente equivalente a especificar la cadena vacía como el valor del atributo, como en el siguiente ejemplo.
<input disabled="">

Por lo tanto, puede usar atributos de datos personalizados vacíos, pero se necesita un manejo especial para usarlos como booleanos.

Cuando accede a un atributo vacío, su valor es "". Dado que es un valor falso, no puede usarlo if (element.dataset.myattr)para verificar si un atributo está presente.

Deberías usar element.hasAttribute('myattr')o en su if (element.dataset.myattr !== undefined)lugar.

La respuesta de Lloyd es incorrecta. Él menciona el enlace a la microsintaxis de atributos booleanos, pero los data-*atributos no se especifican como booleanos en la especificación.

— usuario
fuente

"Tenga en cuenta que la sintaxis de atributo vacía es exactamente equivalente a especificar la cadena vacía como el valor del atributo, como en el siguiente ejemplo". es exactamente lo que estaba buscando. Específicamente, a la scriptAttrsconfiguración de jQuery no le gusta un defervalor simple , pero defer: ""debería funcionar. ¡Gracias!

— sfarbota

111

Sí, perfectamente válido. En su caso, data-modal-targetrepresentaría un atributo booleano:

2.4.2 Atributos booleanos

La presencia de un atributo booleano en un elemento representa el valor verdadero y la ausencia del atributo representa el valor falso.

— Lloyd
fuente

3

¡Agradable! Gracias por el enlace, normalmente no tengo la paciencia para leer w3.org :)

— Adam

4

No sé si omitir el valor "lo convierte en" un atributo booleano; parece que los atributos booleanos no son arbitrarios; Creo que hay una lista de ellos. Tal vez no importe si el navegador / script lo trata como un dato booleano o personalizado; pero tal vez dependa de que el guión lo lea.

— goodeye

3

Creo que esto ha cambiado. Ciertamente, el ejemplo que estoy usando en mi código no se trata como booleano sino como una cadena vacía. Entonces, las pruebas if ($('p').data('modal-target'))no funcionarán: stackoverflow.com/questions/16864999/… .

— Derek Henderson

4

parece que esto no es cierto element.dataset.modalTargetproduciría una cadena vacía que es falsa (Chrome 32) mismo resultado con jQuery

— H1D

20

Esto parece ser una mala interpretación de la especificación. La sección a la que enlaza describe los atributos booleanos, pero no dice si los atributos de datos personalizados pueden ser atributos booleanos.

— BoltClock

1

Sí, es una sintaxis válida omitir el valor de un atributo de datos personalizado.

"Los atributos se pueden especificar de cuatro formas diferentes:

Sintaxis de atributo vacía Solo el nombre del atributo. El valor es implícitamente la cadena vacía. [...] " https://developers.whatwg.org/syntax.html#attributes-0

— eew
fuente

1

Por un lado, pasa el 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 otro lado, HTML5 no dice en la especificación de data-atributos que son booleanos: https://www.w3.org/TR/html5/dom.html#custom-data-attribute mientras que lo dice muy claramente para otros booleanos atributos como checked https://www.w3.org/TR/html5/forms.html#attr-input-checked

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