Gli attributi di dati HTML5 vuoti sono validi?

115

Mi piacerebbe scrivere un semplice plugin jQuery che visualizzi i modali inline sotto gli elementi specificati. La mia idea è che lo script si auto-init in base agli attributi dei dati specificati sugli elementi.

Un esempio molto semplice:

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

Mi chiedo solo se data-modal-targetnell'esempio sopra è valido o deve esserlo data-modal-target="true"? Non mi interessa niente di più schifoso di IE9 ecc., Il mio unico requisito è che sia HTML5 valido.

html custom-data-attribute html5-data

— Adamo
fonte

Non sono riuscito a trovare dove gli attributi dei dati personalizzati richiedono un valore o meno; e non sono ancora sicuro se omettere il valore o includerlo semplicemente per sicurezza. Le specifiche W3C creano confusione (nessuna sorpresa). Penso che possa dipendere dallo script che utilizza i valori. (l'esempio di commento continua di seguito, a causa del limite di lunghezza).

— goodeye

ad esempio, sto utilizzando un plug-in che ha attributi di dati personalizzati con valori predefiniti: alcune stringhe, alcuni booleani (che mi portano a cercare questa domanda). I dati booleani hanno una combinazione di se il valore predefinito è vero o falso; sta verificando se esiste o ha un valore. Controlla se il valore è vero o vuoto (per vero) o falso. Ma il controllo per vuoto è esplicito nel codice; non è "integrato". Inoltre, non sta verificando il nome dell'attributo, come data-abc = "data-abc" come richiesto da un attributo booleano; questo causa un errore.

— goodeye

52

Valido, ma non sono booleani.

La specifica degli attributi dei dati personalizzati non menziona alcuna modifica alla gestione degli attributi vuoti, quindi le regole generali sugli attributi vuoti si applicano qui:

Alcuni attributi possono essere specificati fornendo solo il nome dell'attributo, senza alcun valore.

Nell'esempio seguente, l' disabledattributo viene fornito con la sintassi dell'attributo vuoto:
<input disabled>
Si noti che la sintassi dell'attributo vuoto è esattamente equivalente a specificare la stringa vuota come valore per l'attributo, come nell'esempio seguente.
<input disabled="">

Quindi è consentito utilizzare attributi di dati personalizzati vuoti, ma è necessaria una gestione speciale per utilizzarli come booleani.

Quando accedi a un attributo vuoto, il suo valore è "". Poiché si tratta di un valore falso, non puoi semplicemente usarlo if (element.dataset.myattr)per verificare se un attributo è presente.

Dovresti usare element.hasAttribute('myattr')o if (element.dataset.myattr !== undefined)invece.

La risposta di Lloyd è sbagliata. Cita il collegamento alla microsintassi degli attributi booleani, ma gli data-*attributi non sono specificati come booleani nelle specifiche.

— utente
fonte

"Notare che la sintassi dell'attributo vuoto è esattamente equivalente a specificare la stringa vuota come valore per l'attributo, come nell'esempio seguente." è esattamente quello che stavo cercando. In particolare, l' scriptAttrsimpostazione di jQuery non ama un defervalore normale , ma defer: ""dovrebbe fare il trucco. Grazie!

— sfarbota

111

Sì, perfettamente valido. Nel tuo caso, data-modal-targetrappresenterebbe un attributo booleano:

2.4.2 Attributi booleani

La presenza di un attributo booleano su un elemento rappresenta il valore vero e l'assenza dell'attributo rappresenta il valore falso.

— Lloyd
fonte

3

Bello! Grazie per il link, di solito non ho la pazienza di attraversare w3.org :)

— Adam

4

Non so omettere il valore "lo trasforma in" un attributo booleano - sembra che gli attributi booleani non siano arbitrari; Penso che ce ne sia un elenco. Forse non importa se viene trattato come un dato booleano o personalizzato dal browser / script; ma forse dipende dal copione che lo legge.

— goodeye

3

Credo che questo sia cambiato. Certamente l'esempio che sto usando nel mio codice non viene trattato come un booleano ma piuttosto come una stringa vuota. Quindi, i test if ($('p').data('modal-target'))non funzioneranno: stackoverflow.com/questions/16864999/… .

— Derek Henderson

4

sembra che questo non sia vero element.dataset.modalTargetprodurrebbe una stringa vuota che è falsa (Chrome 32) stesso risultato con jQuery

— H1D

20

Questa sembra essere un'interpretazione errata delle specifiche. La sezione a cui ti colleghi descrive gli attributi booleani, ma non dice se gli attributi dei dati personalizzati possono essere attributi booleani.

— BoltClock

1

Sì, è una sintassi valida omettere il valore per un attributo di dati personalizzato.

"Gli attributi possono essere specificati in quattro modi diversi:

Sintassi dell'attributo vuoto Solo il nome dell'attributo. Il valore è implicitamente la stringa vuota. [...] " https://developers.whatwg.org/syntax.html#attributes-0

— MER
fonte

1

Da un lato, passa il validatore 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>

Dall'altro, HTML5 non dice nella specifica degli data-attributi che sono booleani: https://www.w3.org/TR/html5/dom.html#custom-data-attribute mentre lo dice molto chiaramente per altri booleani attributi come checked https://www.w3.org/TR/html5/forms.html#attr-input-checked

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