- Konu sahibi
- #1
Data nitelikleri, HTML öğesine JavaScript veya başka istemci tarafı kodların okuyacağı küçük ve yardımcı bilgileri eklemek için kullanılmalıdır. Ürün kimliği, işlem adı, filtre anahtarı, durum bilgisi veya bileşen ayarı gibi arayüz davranışını destekleyen veriler için uygundur. Görünecek metni, erişilebilirlik bilgisini, güvenlik sırrını veya sunucu tarafında korunması gereken veriyi data niteliğine koymayın.
Özel data niteliğinin adı
Değerler HTML içinde metin olarak tutulur. Bu nedenle
Data nitelikleri erişilebilirlik bilgisinin yerine geçmez. Bir düğmenin amacı kullanıcıya görünüyorsa bunu düğme metniyle, durum bilgisi yardımcı teknolojiler tarafından duyulacaksa uygun HTML veya ARIA çözümüyle ifade edin. Data niteliği, bu bilgilerin yanında kodun ihtiyaç duyduğu yardımcı anahtarı taşıyabilir.
Aşağıdaki örnekte bir düğme ürün kimliğini ve yapılacak işlemi data nitelikleriyle taşır. Aynı sınıftaki başka düğmeler de aynı işleyiciye bağlanabilir.
Bu örnekte data niteliği yalnızca hangi ürün üzerinde işlem yapılacağını bildirir. Gerçek ekleme işlemi için sunucuya istek gönderilecekse kimlik sunucuda yeniden doğrulanmalıdır; tarayıcıdaki data değeri kullanıcı tarafından değiştirilebilir.
Data nitelikleri ne işe yarar?
Özel data niteliğinin adı
data- ile başlamalıdır. Örneğin data-product-id="42" ifadesi, öğeyle ilişkili ürün kimliğini taşır. HTML bunu kendiliğinden yorumlamaz; JavaScript bu değeri okuyup uygun işlemi gerçekleştirir.Değerler HTML içinde metin olarak tutulur. Bu nedenle
data-enabled="false" değeri JavaScript açısından otomatik olarak Boolean false değil, "false" metnidir. Sayı veya doğru/yanlış kontrolü yapacaksanız kod içinde açık dönüşüm uygulayın.Uygun ve uygunsuz kullanım
| Uygun bilgi | Örnek | Neden kullanılır? |
|---|---|---|
| Kayıt kimliği | data-product-id="42" | Tıklanan öğeyi kodda belirlemek için |
| İşlem veya filtre anahtarı | data-action="remove" | Ortak olay işleyicisine bilgi vermek için |
| Arayüz durumu | data-state="collapsed" | Bileşenin mevcut durumunu okumak için |
| Parola veya erişim anahtarı | Kullanmayın | HTML kullanıcıya ve istemci koduna açıktır |
| Görünecek başlık | Normal metin kullanın | İçeriğin anlamı data niteliğine gizlenmemelidir |
Data nitelikleri erişilebilirlik bilgisinin yerine geçmez. Bir düğmenin amacı kullanıcıya görünüyorsa bunu düğme metniyle, durum bilgisi yardımcı teknolojiler tarafından duyulacaksa uygun HTML veya ARIA çözümüyle ifade edin. Data niteliği, bu bilgilerin yanında kodun ihtiyaç duyduğu yardımcı anahtarı taşıyabilir.
Çalışan bir örnek
Aşağıdaki örnekte bir düğme ürün kimliğini ve yapılacak işlemi data nitelikleriyle taşır. Aynı sınıftaki başka düğmeler de aynı işleyiciye bağlanabilir.
Kod:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>Data niteliği örneği</title>
</head>
<body>
<button type="button" class="product-action"
data-product-id="42" data-action="add">
Ürünü ekle
</button>
<p id="result" aria-live="polite"></p>
<script>
document.querySelectorAll('.product-action').forEach(function (button) {
button.addEventListener('click', function () {
var productId = button.dataset.productId;
var action = button.dataset.action;
document.querySelector('#result').textContent =
'İşlem: ' + action + ', ürün: ' + productId;
});
});
</script>
</body>
</html>Uygulama adımları
- İhtiyaç duyulan küçük yardımcı bilgiyi belirleyin; örneğin ürünün kullanıcıya gösterilmeyen teknik kimliğini seçin.
- HTML öğesine
data-ile başlayan açıklayıcı bir ad verin ve değeri tırnak içinde yazın. - JavaScript'te
element.datasetüzerinden okuyun.data-product-idadıdataset.productIdolarak erişilir. - Dosyayı tarayıcıda açıp düğmeye basın. Başarı durumunda sonuç alanında
İşlem: add, ürün: 42görünür. - Sonuç boşsa sınıf seçicisinin HTML ile eşleştiğini, niteliğin tam olarak
data-product-idyazıldığını ve JavaScript'in öğeler yüklendikten sonra çalıştığını kontrol edin.
Bu örnekte data niteliği yalnızca hangi ürün üzerinde işlem yapılacağını bildirir. Gerçek ekleme işlemi için sunucuya istek gönderilecekse kimlik sunucuda yeniden doğrulanmalıdır; tarayıcıdaki data değeri kullanıcı tarafından değiştirilebilir.
Sık yapılan hatalar
- Görsel metni yalnızca data niteliğine koymak: Kullanıcı içeriği göremez; metni HTML içinde de bulundurun.
- Data niteliğini anlamsal HTML yerine koymak: Örneğin açılma durumunu yalnız data-state ile belirtmek, yardımcı teknolojiye aria-expanded bilgisini sağlamaz. CSS’te
[data-state="open"]gibi bir öznitelik seçicisi kullanmak ise geçerlidir; durumun erişilebilir karşılığını ayrıca koruyun. - Değer türünü yanlış varsaymak: Tüm değerleri metin kabul edin ve gerektiğinde
Number()veya açık Boolean kontrolü kullanın. - Büyük veri veya hassas bilgi saklamak: HTML istemciye gönderildiği için parola, gizli API anahtarı ve sunucuda kalması gereken iş kuralları burada tutulmamalıdır.
- Aynı bilgiyi gereksiz yere hem sınıfta hem data niteliğinde çoğaltmak: Sınıfı stil ve grup seçimi, data niteliğini öğeye bağlı işlem verisi için kullanın.
Kaynaklar
Sık sorulan sorular
Data niteliği CSS ile okunabilir mi?
CSS,attr() ile bazı attribute değerlerini içerik veya stil bağlamında kullanabilir; ancak data niteliğini uygulama mantığının yerine koymak doğru değildir. Etkileşimli davranış için JavaScript kullanın.