Cara Membangun UX yang Lebih Baik dengan Atribut Data HTML5 *
Pernahkah Anda ingin menambahkan data khusus ke elemen HTML tertentu untuk kemudian mengaksesnya dengan JavaScript? Sebelum HTML5 muncul di pasaran, menyimpan data khusus yang terkait dengan DOM adalah masalah besar, dan pengembang harus menggunakan semua jenis peretasan jahat, seperti memperkenalkan atribut non-standar atau menggunakan metode setUserData () yang usang untuk mengatasi masalah tersebut.
Untungnya Anda tidak perlu melakukannya lagi, karena HTML5 telah memperkenalkan global baru data-* atribut yang memungkinkan untuk menanamkan informasi tambahan pada elemen HTML apa pun. Yang baru data-* atribut buat HTML lebih bisa diperluas, karena itu memungkinkan Anda membangun aplikasi yang lebih kompleks, dan membuat pengalaman pengguna yang lebih canggih tanpa harus menggunakan teknik intensif sumber daya seperti panggilan Ajax, atau permintaan basis data sisi server.
Dukungan browser untuk atribut global baru relatif baik, karena didukung oleh semua browser modern (IE8-10 mendukungnya secara parsial).
Sintaksis dari data-* Atribut
Sintaks yang baru data-* atribut mirip dengan atribut yang diawali aria. Anda dapat memasukkan string huruf kecil apa pun di tempat * tanda. Anda juga perlu menetapkan nilai untuk setiap atribut dalam bentuk string.
Katakanlah Anda ingin membuat Tentang kami halaman, dan simpan nama departemen tempat setiap karyawan bekerja. Anda tidak perlu melakukan hal lain selain menambahkan departemen data atribut khusus ke elemen HTML yang sesuai dengan cara berikut:
- John Doe
- Jane Doe
Adat data-* atribut bersifat global, seperti halnya kelas dan id atribut, sehingga Anda dapat menggunakannya pada setiap elemen HTML. Anda juga dapat menambahkan sebanyak mungkin data-* atribut ke tag HTML yang Anda inginkan. Pada contoh di atas, misalnya Anda dapat memperkenalkan atribut khusus baru yang disebut pengguna data untuk menyimpan nama pengguna karyawan.
- John Doe
- Jane Doe
Sebagai aturan umum, jika Anda ingin menambahkan atribut khusus Anda sendiri ke elemen HTML, Anda harus selalu mengawalinya dengan data- tali. Demikian juga, ketika Anda melihat atribut awalan data dalam kode orang lain, Anda bisa tahu pasti bahwa itu adalah atribut khusus yang diperkenalkan oleh penulis.
Kapan Menggunakan dan Kapan Tidak Menggunakan Atribut Kustom
W3C mendefinisikan custom data-* atribut seperti ini:
“Atribut data khusus dimaksudkan untuk menyimpan data khusus pribadi ke halaman atau aplikasi, yang tidak ada atribut atau elemen yang lebih tepat.”
Layak untuk dipertimbangkan menggunakan data-* atribut ketika Anda tidak dapat menemukan atribut semantik lainnya untuk data yang ingin Anda simpan.
Ini bukan ide terbaik untuk menggunakannya hanya untuk keperluan styling, karena untuk itu Anda dapat memilih dari kelas dan gaya atribut. Jika Anda ingin menyimpan tipe data yang HTML5 memiliki atribut semantik, seperti tanggal Waktu atribut untuk elemen, gunakan itu alih-alih atribut awalan data.
Penting untuk dicatat itu data-* atribut menyimpan data itu pribadi ke halaman atau aplikasi, yang berarti bahwa mereka akan diabaikan oleh agen pengguna, seperti bot mesin pencari dan aplikasi eksternal. Atribut yang diawali data hanya dapat diakses oleh kode yang berjalan di situs yang menampung HTML.
Adat data-* atribut secara luas digunakan oleh kerangka frontend, seperti Bootstrap dan Zurb Foundation, juga. Berita baiknya adalah Anda tidak perlu tahu cara menulis JavaScript jika Anda ingin menggunakan atribut awalan data sebagai bagian dari kerangka kerja, karena Anda hanya perlu menambahkannya ke kode HTML untuk memicu fungsionalitas dari sebuah plugin JavaScript yang sudah ditulis sebelumnya.
Cuplikan kode di bawah ini menambahkan tooltip di sebelah kiri ke tombol di Bootstrap dengan memanfaatkan beralih data dan penempatan data atribut khusus, dan menetapkan nilai yang sesuai untuk mereka.
Target data-* Atribut dengan CSS
Meskipun tidak disarankan untuk digunakan data-* atribut hanya untuk keperluan styling, Anda dapat memilih elemen HTML milik mereka dengan bantuan penyeleksi atribut umum. Jika Anda ingin memilih setiap elemen yang memiliki atribut awalan data tertentu, gunakan sintaks ini dalam CSS Anda:
li [data-user] color: blue;
Perhatikan bahwa bukan nama pengguna yang akan ditampilkan dengan warna biru di cuplikan kode di atas - setelah semua data yang disimpan dalam atribut khusus tidak terlihat - tetapi nama-nama karyawan yang terkandung dalam elemen (dalam contoh “John Doe” dan “Jane Doe”).
Jika Anda hanya ingin memilih elemen di mana atribut awalan data mengambil nilai tertentu, ini adalah sintaks yang digunakan:
li [data-department = "IT"] border: solid blue 1px;
Anda dapat menggunakan semua pemilih atribut CSS yang lebih rumit, seperti pemilih kombinator saudara umum ([data-nilai ~ = "foo"]) atau pemilih wildcard ([data-nilai * = "foo"]), dengan atribut awalan data juga.
Mengakses data-* Atribut dengan JavaScript
Anda dapat mengakses data yang disimpan di custom data-* atribut dengan JavaScript dengan menggunakan properti dataset, atau jQuery's data() metode.
JavaScript vanila
Itu dataset properti adalah properti dari HTMLElement antarmuka, itu berarti Anda dapat menggunakannya pada tag HTML apa pun. Itu dataset properti memberikan akses ke semua kebiasaan data-* atribut elemen HTML yang diberikan. Atribut dikembalikan sebagai DOMStringMap objek yang berisi satu entri untuk masing-masing data-* atribut.
Di kami Tentang kami contoh halaman Anda dapat dengan mudah memeriksa atribut khusus “Jane Doe” telah dengan menggunakan dataset properti dengan cara berikut:
var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap user: "janedoe", department: "IT" Anda dapat melihat bahwa di dikembalikan DOMStringMap objek itu data- awalan dihapus dari nama atribut (pengguna dari pada pengguna data, dan departemen dari pada departemen data). Anda perlu menggunakan atribut dalam format yang sama jika Anda hanya ingin mengakses nilai atribut awalan data tertentu (alih-alih daftar semua atribut khusus seperti dalam cuplikan kode di atas).
Anda dapat mengambil nilai spesifik data-* atribut sebagai properti dari dataset milik. Seperti yang saya sebutkan sebelumnya, Anda perlu menghilangkan data- awalan dari nama properti, jadi jika Anda ingin mengakses nilai Jane pengguna data atribut, Anda bisa melakukannya dengan cara ini:
var jane = document.getElementById ("jane"); console.log (jane.dataset.user) // janedoe jQuery's data() metode
Itu data() Metode jQuery memungkinkan untuk mendapatkan nilai atribut awalan data. Di sini Anda juga harus menghilangkan data- awalan dari nama atribut untuk mengaksesnya dengan benar. Dalam contoh kami, Anda dapat menampilkan pesan peringatan dengan nama departemen di mana “Jane” bekerja dengan kode berikut:
$ ("# jane"). hover (function () var department = $ ("# jane"). data ("department"); lansiran (departemen);); Itu data() metode perlu digunakan dengan hati-hati, karena tidak hanya bertindak sebagai sarana untuk mendapatkan nilai atribut awalan data, tetapi juga untuk melampirkan data ke elemen DOM dengan cara berikut:
var town = $ ("# jane"). data ("town", "New York"); Data tambahan yang Anda lampirkan dengan jQuery data() Metode jelas tidak akan muncul dalam kode HTML sebagai yang baru data-* atribut, jadi jika kedua teknik digunakan pada saat yang sama, elemen HTML yang diberikan akan menyimpan dua set data, satu dengan HTML dan yang lainnya dengan jQuery.
Dalam contoh kita “Jane” mendapat data khusus baru ("kota") dengan jQuery, tetapi pasangan nilai kunci baru ini tidak akan muncul dalam HTML sebagai baru kota data atribut. Menyimpan data dengan dua cara yang berbeda bukanlah praktik terbaik untuk sedikitnya hanya gunakan salah satu dari dua metode sekaligus.
Aksesibilitas dan data-* Atribut
Seperti data yang disimpan dalam kebiasaan data-* atribut bersifat pribadi, teknologi bantu mungkin tidak dapat mengaksesnya. Jika Anda ingin agar konten Anda dapat diakses oleh pengguna yang dinonaktifkan, tidak disarankan untuk menyimpan konten yang penting bagi pengguna dengan cara ini.
