HTML Özniteliklerinin Az Bilinen İşleri: details name, fieldset disabled, output for
HTML özniteliklerinin çoğunu tek bir işiyle öğreniyoruz: name form verisi gönderir, value input'un içeriğidir, title fareyle üstüne gelince küçük bir kutu açar. Oysa aynı öznitelikler başka etiketlerin üstünde bambaşka işler yapıyor ve birkaçı yazmayı planladığın JavaScript'i tamamen gereksiz kılıyor. Hepsi standartta yıllardır duruyor, tarayıcı desteği de oturdu.
JavaScript yazmadan çözülen üç iş
details + name: akordeon
Aynı name değerini taşıyan <details> öğeleri tek grup sayılır, biri açıldığında diğerleri kapanır.
<details name="sss"><summary>Kargo ne zaman çıkar?</summary>…</details> <details name="sss"><summary>İade süresi kaç gün?</summary>…</details>SSS listesi, ürün filtreleri, yan menü. Akordeon için kurulan onlarca satır bu tek öznitelikle gidiyor. Radyo düğmesinden bir farkı var: açık olanın başlığına tekrar tıklayınca kapanır, yani grubun tamamı kapalı kalabilir. İkisine birden open verme, tarayıcı fazlalığı kapatır ve hangisinin açık kalacağına güvenemezsin.
fieldset disabled: grubu tek hamlede kilitle
disabled'ı tek tek inputlara değil <fieldset>'e ver, içindeki bütün form kontrolleri kapanır ve gönderimde sunucuya gitmez. Asıl işe yarayan kısım kuralın istisnası: fieldset'in ilk <legend>'i içindeki kontroller açık kalır.
Bir rezervasyon formunda fatura bölümünü tam olarak böyle kilitlemiştim; grubu açan tek şey legend'ın içine koyduğum "Farklı adrese fatura kes" onay kutusuydu.
li value: numaraları elle yazma
<li value="7"> o maddeyi 7 yapar, sonrakiler 8'den devam eder. Uzun bir sıralı listeyi ikiye bölüp araya açıklama paragrafı koyduğunda ikinci parçanın ilk maddesine bir value vermen yeter. Yalnız <ol> içinde çalışır, <ul>'de sessizce yok sayılır.
Form tarafında üç öznitelik
multiple'ı dosya seçiciden tanıyoruz ama type="email" alanında da çalışır: virgülle ayrılmış adres listesi kabul eder, aradaki boşlukları kırpar ve her adresi ayrı ayrı doğrular. "Ekibini davet et" kutusu için hazır çözüm.
<output for="fiyat adet"> hesabın hangi alanlardan beslendiğini bildirir. for hesaplama yapmaz, boşlukla ayrılmış bir id listesidir. Asıl kazanç output'un örtük role="status" taşıması: içeriği değiştiğinde ekran okuyucu bunu kendiliğinden duyurur, ayrıca bir aria-live bölgesi kurmana gerek kalmaz.
target yalnızca bağlantılara ait değil, <form> da alır; _blank, _top ya da bir iframe'in name değeri verilebilir. Sayfayı yenilemeden gönderim için gizli iframe'e post etme numarası artık gereksiz, onu fetch yapıyor. target'ı sadece sonucu gerçekten yeni sekmede istediğin yerde kullan.
title'a kaldıramayacağı kadar yük biniyor
<abbr> üstündeki title kısaltmanın açılımıdır, başka bir şey değil. Bunun dışında title'ı bilgi taşıyan bir yer gibi kullanma: dokunmatikte hiç görünmez, klavyeyle gezen kullanıcıya açılmaz, ekran okuyucularda davranışı tutarsız. Kullanıcının kaçırdığında kaybedeceği hiçbir şey orada durmamalı; açıklama gerekiyorsa ekrana yaz.
Bilinmeyen bir tarafı da var: <link rel="stylesheet"> üstündeki title stil setine ad verir ve alternate stylesheet mekanizmasını açar. Firefox'un sayfa stili menüsü dışında pratik karşılığı kalmadı, bilmekle yetin.
ins, del, datetime ve cite
<ins> ve <del> sadece altı çizili ya da üstü çizili metin üretmez. İkisi de datetime ile değişikliğin zamanını, cite ile değişikliği açıklayan belgenin adresini alır. Sürüm notu, mevzuat metni, düzeltme yayınlayan haber sayfası: değişiklik günlüğünün karşılığı olan işaretleme bu. datetime'a serbest metin yazma, geçerli bir tarih dizgisi bekler.
Aynı cite, blockquote ve q üstünde alıntının kaynak adresini taşır. Ekranda görünmez, dolayısıyla okuyucunun göreceği kaynak satırını ayrıca yazman gerekir.
CSS tarafı: öznitelik seçicileri
Öznitelikler seçici olarak da çalışır ve alt biçimleri fazladan class açmaktan kurtarır. [href^="http"] başlangıcı, [href$=".pdf"] sonu, [href*="/blog/"] içinde geçeni, [lang|="tr"] tr ile onun tire uzantılarını, [rel~="nofollow"] boşlukla ayrılmış listedeki tek kelimeyi yakalar. Sonuna i eklersen büyük küçük harf ayrımı kalkar: [href$=".pdf" i].
Özgüllüğü class ile aynı seviyede, yani mevcut class kurallarını ezmez; sırayı ona göre kur. Dış bağlantılara ikon basmak tek satır: a[href^="http"]:not([href*="muratuysal.com"])::after.
SEO beklentisini yerinde tut
Buradakilerin sıralamaya doğrudan bir etkisi yok. Arama motoru tarafında gerçekten iş gören öznitelik listesi kısa: görselde alt, sayfada lang, çok dilli yapıda hreflang, bağlantıda rel. Geri kalanı erişilebilirlik ve bakım kolaylığı için değerli, zaten yeterli sebep.
Kaynaklar