CSS ile Ziyaret Edilen Sayfa Bağlantılarına Şekil Vermek

Sözde sınıf ve elementler makalesinde değindiğim bir konu idi bu. Ancak genelde bu özelliği tasarımcılar ve kod yazarları atlıyor. Şimdiye kadar ki hiç bir projemde kullanma gereği duymadım açıkçası. Ama bence kullanılabilirlik açısından önemli bir özellik. Bundan sonraki projelerimde kullanmayı düşünüyorum.

http://www.evalotta.net/ sitedeki uygulamayı görünce çok hoş bir şey olduğu aklıma geldi. Bende bu konuda bir şeyler yazmalıyım diye not ettim. Nasip bu güneymiş.

İnternet tarayıcıları daha önce ziyaret ettiğimiz sayfa bağlantılarını ön belleğinde tutar. Biz ön belleği silmediğimiz müddetçe hafızasında kalır. CSS bize daha önce ziyaret ettiğimiz sayfa bağlantılarının stilini değiştirme imkanı sunar, böylece kullanıcıya sen burayı daha önce ziyaret etmiştin bilgisini verebiliriz. İnternet tarayıcıları ziyaret edilmiş bağlantılara kendileri standart bir stil atarlar. Mesela Firefox altını çizili ve mor renkli yapıyor.

stadart_ff

Tarayıcılar bize bu ayrımı gösterir, tabi biz bağlantı tanımları değiştirmediğimiz müddetçe. Biz bağlantıya genel tanım yaptığımızda bu özellik bir bakıma göz ardı edilecektir. Bir çok projede bu tanımlamayı yazpıyoruz.

a{color:#f00;}

genel_bag_renk

Yukarıdaki tanımlama tüm bağlantı tipleri için genel bir tanımdır ve ziyaret edilmiş sayfa stilinide belirler.

Bizim amacımız ziyaret edilmiş bağlantıları farklı stil ile belirterek ayrımı göstermek. Bir çok yerde yazı üstünü çizerek belirlenir.

a:visited { text-decoration: line-through; }

ziy_sayfa_uzeri_ciz

Örneği görmek için tıklayınız.

Diğer bir yöntemde ardalan resmi koymak. Bu yöntem ile hoş bir görüntüde sağlamış oluyoruz. http://www.evalotta.net/ sitesi buna çok güzel bir örnek.

a:visited {
    padding-right:20px;
    background:url(images/ziyaret_edilmis_baglanti.gif) right top no-repeat;
    color:#666;
    text-decoration:none;
}

ziy_sayfa_oki

Örneği görmek için tıklayınız.

Benzer yöntemlerle birçok alternatif oluşturulabilir. Ayrıca :before ve :after ile oluşturulan örnekler var ama hala ie6 hayatta olduğu için ve :before ve :after özelliklerini desteklemediği için pek kullanma taraftarı değilim.

Kaynak

10 Yorum (Yorum Ekle)

css mania diyor ki:

Temmuz 3, 2009, 14:24

ben de bu sorunun çözümünü arıyordum. a:active işe yaramıyor. hover'da farklı, aktif sayfada farklı bir background resmi çıksın diye çabalıyorum ama nafile. nasıl çözeriz bu sorunu?

Cevapla

css mania diyor ki:

Temmuz 4, 2009, 09:01

Sorumun cevabını buldum nihayet. Bulduğum adres:
http://www.wickham43.net/highlightservices.php

Neden daha önce aklıma gelmedi bilmiyorum. Benzer sorun yaşayanlar için bilgi vereyim. İlgili sayfada kalmasını istediğimiz görünüm için current şeklinde bir class tanımlıyoruz. Benim kodlar şöyle:

#menu li a:hover{
color: #FFF;
background: url(../images/menuHover.jpg) no-repeat center top;
}
#menu li a.current:link, #menu li a.current:visited {
color: #FFF;
background: url(../images/menuActive.jpg) no-repeat center top;
}

Bunu her sayfada aktif olmasını istediğimiz menü öğesine class olarak atıyoruz:
ANASAYFA

Hepsi bu :)

Not: Diğer

içinde yer alan linkler class olmadan yazılacak. Peki dinamik sayfalarda da tek tek mi yapacağız? Elbette hayır. Bunun çözümü de verdiğim linkte mevcut.