a:visited Ne Kadar İşe Yarar: Ziyaret Edilmiş Bağlantı Renginin Sınırları
Ziyaret edilmiş bağlantıyı farklı renkte göstermek, tarayıcıların ilk günlerinden kalma bir alışkanlık ve hâlâ işe yarıyor: kullanıcı nereye baktığını hatırlamak zorunda kalmıyor, listeye bakınca görüyor. Ama bu özelliğin bugün 1996'daki gibi çalıştığını sanmak yanlış. Tarayıcılar :visited seçicisini gizlilik gerekçesiyle yıllar içinde iyice budadı ve geriye çok dar bir alan kaldı. O dar alanın nerede başlayıp nerede bittiğini bilmeden yazılan CSS, sessizce hiçbir şey yapmıyor.
Tarayıcı :visited ile ne yapmanıza izin veriyor?
Yalnızca renk. Daha doğrusu: color, background-color, border-color, outline-color, column-rule-color ve SVG'de fill ile stroke. Yazı tipini, kalınlığı, altını çizmeyi, arkaya ikon koymayı, kenar boşluğunu denerseniz kural yazılır ama uygulanmaz. Üstüne, JavaScript'ten getComputedStyle ile sorduğunuzda tarayıcı size ziyaret edilmemiş hâlin değerini söyler. Yani sayfanın kendi kodu bile hangi bağlantının ziyaret edildiğini öğrenemez.
Peki bu kadar sert kısıt neden? Çünkü aksi hâlde bir sayfa, arka planına yüzlerce gizli bağlantı basıp hangilerinin renk değiştirdiğine bakarak ziyaretçinin gezinme geçmişini okuyabilirdi. 2010 civarında bu saldırı yaygınlaşınca tarayıcılar kapıyı kapattı. MDN'in :visited sayfası izin verilen özelliklerin listesini güncel tutuyor.
"Sadece renge güvenme, altını da çiz" tavsiyesinin çalışmayan yanı
Erişilebilirlik yazılarında en sık tekrarlanan cümlelerden biri bu ve bağlantının düz metinden ayrılması konusunda tamamen doğru. Ziyaret durumu için ise uygulanabilir değil. text-decoration izin listesinde olmadığı için ziyaret edilmiş bağlantıya ek bir çizgi, ok ya da tik koyamazsınız. Renk körü bir kullanıcıya ziyaret durumunu renk dışında bir sinyalle anlatmanın yolu, en azından CSS tarafında, yok.
Bu çıkmazdan çıkışın makul yolu şu: bağlantı ile düz metin ayrımını altı çizgiyle yapın, yani bütün bağlantıların altı çizili olsun; rengi de tek bir işe, ziyaret durumuna ayırın. Ayrım kaçırıldığında olan şey de dert edilecek boyutta değil, kullanıcı bir sayfaya ikinci kez girer. WCAG'in renge güvenmeme ölçütü bilgiye erişimi engelleyen durumları hedefliyor, ziyaret durumu bu sınıfa girmiyor. Bir de iki rengi birbirinden yeterince ayırın: koyu mavi ile menekşe moru pek çok ekranda, özellikle düşük parlaklıkta, neredeyse aynı görünür.
Eşleşme sayfaya değil, URL'ye bakar
Burası pratikte en çok can yakan yer. Tarayıcının geçmişinde tuttuğu şey sayfa değil, tam adres. /rehber ile /rehber/, http ile https, sonuna kampanya parametresi eklenmiş hâli ile eklenmemiş hâli birbirinden ayrı kayıtlardır. Bir kurumsal sitede "ziyaret rengi çalışmıyor" diye gelen şikâyetin sebebi, menü bağlantılarının her sayfada ayrı bir utm_source değeriyle üretilmesiydi; kullanıcı sayfaya girdiği hâlde menüdeki bağlantı hiç ziyaret edilmemiş sayılıyordu.
Peki ya kullanıcı sayfanıza başka bir siteden geldiyse? Chrome tarafında ziyaret kaydı artık bağlantıya nereden tıklandığına göre bölümlendiriliyor; başka bir sitede tıklanmış bir bağlantı, sizin sayfanızda ziyaret edilmiş görünmeyebiliyor. Kendi siteniz içindeki gezinme bundan etkilenmiyor. Yani site içi navigasyonda bu özelliğe güvenebilirsiniz, "bu haberi zaten okumuştun" bilgisini başka bir siteden taşımak için güvenemezsiniz.
Nerede gerçekten fark yaratır
Faydası her yerde eşit değil. Ziyaret rengi, kullanıcının aynı listeye tekrar tekrar döndüğü ekranlarda kazandırır: arşiv ve etiket sayfaları, site içi arama sonuçları, uzun ürün listeleri, forum başlıkları. Ana menüde ya da alt bilgide anlamı yok; oradaki bağlantıların hepsi zaten er geç mor olur ve renk bilgi taşımayı bırakır. Menüyü ziyaret renginin dışında tutmak, listelerde rengin anlamını korur.
Kodu da bu ayrımı yapacak kadar dar tutun:
.icerik a:visited { color: #6b3fa0; }Bir de sıralamaya dikkat: a:hover kuralı a:visited'dan sonra gelmezse, ziyaret edilmiş bağlantıda hover rengi hiç görünmez. Aynı özgüllükteki kurallarda son yazılan kazanır, klasik link-visited-hover-active sırası bu yüzden tesadüf değil.
Ziyaret durumunu okuyup kullanıcıya "okuduklarınız" listesi çıkarma fikri aklınıza gelirse: tarayıcı buna izin vermiyor, o kaydı kendiniz tutmanız gerekir. Kullanıcı hesabı olmayan bir sitede localStorage bunun için yeterli.