Apakah atribut data HTML5 kosong valid?

115

Saya ingin menulis plugin jQuery sederhana yang menampilkan modals inline di bawah elemen tertentu. Ide saya adalah agar skrip masuk otomatis berdasarkan atribut data yang ditentukan pada elemen.

Contoh yang sangat mendasar:

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

Saya hanya ingin tahu apakah data-modal-targetcontoh di atas valid, atau haruskah data-modal-target="true"? Saya tidak peduli tentang sesuatu yang lebih buruk dari IE9 dll, satu-satunya persyaratan saya adalah HTML5 valid.

html  custom-data-attribute  html5-data 
— Adam
sumber
Saya tidak dapat menemukan di mana atribut data khusus memerlukan nilai atau tidak; dan saya masih tidak yakin apakah akan menghilangkan nilainya, atau hanya memasukkannya agar aman. Spesifikasi W3C membingungkan (tidak mengherankan). Saya pikir itu mungkin tergantung pada skrip yang menggunakan nilai. (contoh komentar dilanjutkan di bawah, karena batas panjangnya).
— selamat tinggal
misalnya, saya menggunakan plugin yang memiliki atribut data khusus dengan nilai default: beberapa string, beberapa boolean (mengarahkan saya untuk mencari pertanyaan ini). Data boolean memiliki campuran apakah defaultnya benar atau salah; itu melakukan pemeriksaan untuk melihat apakah itu ada atau memiliki nilai. Ini memeriksa apakah nilainya benar atau kosong (untuk benar), atau salah. Tapi centang kosong secara eksplisit dalam kode; itu bukan "built-in". Dan, ini tidak memeriksa nama atribut, seperti data-abc = "data-abc" karena atribut boolean memerlukan; ini menyebabkan kesalahan.
— selamat tinggal

Jawaban:

52

Valid, tapi bukan boolean.

Spesifikasi atribut data khusus tidak menyebutkan perubahan apa pun pada penanganan atribut kosong, sehingga aturan umum tentang atribut kosong berlaku di sini:

Atribut tertentu dapat ditentukan dengan hanya memberikan nama atribut, tanpa nilai.

Dalam contoh berikut, disabledatribut diberikan dengan sintaks atribut kosong:

<input disabled>

Perhatikan bahwa sintaks atribut kosong sama persis dengan menentukan string kosong sebagai nilai untuk atribut, seperti pada contoh berikut.

<input disabled="">

Jadi, Anda diperbolehkan menggunakan atribut data khusus yang kosong, tetapi diperlukan penanganan khusus untuk menggunakannya sebagai boolean.

Saat Anda mengakses atribut kosong, nilainya adalah "". Karena ini adalah nilai yang salah, Anda tidak bisa hanya menggunakan if (element.dataset.myattr)untuk memeriksa apakah ada atribut.

Anda harus menggunakan element.hasAttribute('myattr')atau if (element.dataset.myattr !== undefined)sebagai gantinya.

Jawaban Lloyd salah. Dia menyebutkan tautan ke atribut boolean microsyntax, tetapi data-*atribut tidak ditentukan sebagai boolean dalam spesifikasi.

— pengguna
sumber
"Perhatikan bahwa sintaks atribut kosong sama persis dengan menentukan string kosong sebagai nilai untuk atribut, seperti pada contoh berikut." persis seperti yang saya cari. Secara khusus, scriptAttrspengaturan jQuery tidak menyukai defernilai biasa , tetapi a defer: ""harus melakukan triknya. Terima kasih!
— sfarbota
111

Ya, sangat valid. Dalam kasus Anda, data-modal-targetakan mewakili atribut boolean:

2.4.2 Atribut Boolean

Kehadiran atribut boolean pada sebuah elemen merepresentasikan nilai sebenarnya, dan ketiadaan atribut merepresentasikan nilai false.

— Lloyd
sumber
3
Bagus! Terima kasih untuk tautannya, saya biasanya tidak memiliki kesabaran untuk mengarungi w3.org :)
— Adam
4
Saya tidak tahu menghilangkan nilai "mengubahnya menjadi" atribut boolean - tampaknya atribut boolean tidak sembarangan; Saya pikir ada daftarnya. Mungkin tidak masalah jika itu diperlakukan sebagai boolean atau data khusus oleh browser / skrip; tapi mungkin itu tergantung dari script yang membacanya.
— selamat tinggal
3
Saya yakin ini telah berubah. Tentu saja contoh yang saya gunakan dalam kode saya tidak diperlakukan sebagai boolean melainkan sebagai string kosong. Jadi, pengujian if ($('p').data('modal-target'))tidak akan berhasil: stackoverflow.com/questions/16864999/… .
— Derek Henderson
4
Sepertinya ini tidak benar element.dataset.modalTargetakan menghasilkan string kosong yang salah (Chrome 32) hasil yang sama dengan jQuery
— H1D
20
Ini tampaknya merupakan salah tafsir dari spesifikasi. Bagian yang Anda tautkan menjelaskan atribut Boolean, tetapi tidak menyebutkan apakah atribut data khusus dapat berupa atribut Boolean.
— BoltClock
1

Di satu sisi, ini melewati validator 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>

Di sisi lain, HTML5 tidak menyebutkan dalam spesifikasi data-atribut bahwa mereka adalah boolean: https://www.w3.org/TR/html5/dom.html#custom-data-attribute sementara ia mengatakannya dengan sangat jelas untuk boolean lainnya atribut seperti checked https://www.w3.org/TR/html5/forms.html#attr-input-checked

— Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.