: ziyaret edildi - CSS Hileleri

Anonim

:visitedSözde sınıf seçici bir çapa bağlantı (üzerinde stil bazı değiştirebilir kullanıcının tarayıcısı zaten linki ziyaret edip etmediğini) elemanı. Kullanıcıların ziyaret ettikleri ve ziyaret etmedikleri bağlantılar arasındaki farkı ayırt etmelerine yardımcı olmayı amaçlamaktadır.

a:visited ( color: gray; )

Sınırlamalar ve Kullanım

:visitedKötü amaçlı bir web sitesinin, :visitedstil içeren tonlarca web sitesine bağlantıları olabileceği ve ardından kullanıcının ziyaret ettiği bir sunucuya geri bildirimde bulunmak için bağlantıların görsel stilini JavaScript ile test etmesi gibi bazı gizlilik endişeleri vardır. Bu, kullanıcının gizliliğini ihlal eder ve potansiyel olarak kişisel olarak tanımlayıcı bilgileri açığa çıkarabilir.

Sonuç olarak, çoğu tarayıcı :visitedbağlantılarda hangi stillerin değiştirilebileceğini ve bu yöntemle hangi stil bilgilerinin rapor edilebileceğini kısıtlar getComputedStyle.

Bu, bu durum için iyi bir durumdur.

Bunlar, değiştirilebilecek özelliklerdir :visited:

  • color
  • background-color
  • border-color (ve alt özellikleri)
  • outline-color
  • fillVe strokeözelliklerinin renk kısımları

:visitedBağlantının zaten "ziyaret edilmemiş" veya :linkdurumunda olması durumunda bu özellikleri değiştirmek için kullanabilirsiniz . Bağlantıda halihazırda mevcut olmayan özellikleri eklemek için bunu kullanamazsınız. Örneğin:

Sen değiştirebilir background-colora :visitedbağlantı öğesi zaten bir arka plan rengi olsaydı linke.

"Ziyaret edilmemiş" bir bağlantı olduğunda arka plan rengi yoksa background-colorbir :visitedbağlantıya ekleyemezsiniz .

Sözde Sınıfları Sırayla Bağlayın

Bağlantı sözde sınıflarının çoğunun belirli bir sırada bildirilmesi gerektiğini bilmek de yararlıdır. Sipariş şu şekildedir:

  1. Bağlantı
  2. Ziyaret
  3. Üzerine gelme
  4. Aktif

:focusBağlantınızın stilini dahil ediyorsanız , onu "fareyle üzerine gelme" ve "etkin" arasına eklemek yaygındır.

Demo

Uzatma :visited

:visitedBağlantılar için doğrudan biçimlendirme sınırlı olsa da , ziyaret edilen bağlantıların stilini belirleme seçeneklerinizi genişletmenin birçok akıllı yolu vardır. 2015 yılında, :visitedbağlantıların şekillendirilmesi için yeni fikirler paylaşan çok sayıda blog yazısı vardı :

Yeniden ziyaret: Joel Califa'dan localstorageziyaret edildi, ziyaret edilen alan içi bağlantıların stilini kullanmak için bir örnek gösterir .

Hacking: Una Kravets'ten ziyaret edildi , bağlantılara içerik :visitedolarak "ziyaret edilmemiş" bir etiket ekleyerek başını döndürür :after, bu daha sonra bağlantı ziyaret edildikten sonra bir arka plan rengi değişimiyle gizlenir.

Stelian Firez'in CSS harmanlama modlarıyla ziyaret edilen sınırlarını zorlamak, DuckDuckGo'ya atfedilen küçük bir HTML numarasını ve background-blend-mode: screen;ziyaret edilen bir bağlantının yanındaki özel bir simgeyi soldurmak için birleştirir.

Dudley Storey'den SVG ile Ziyaret Edilen Bağlantıların Stilini Ayarlama. Bağlantı filldurumundayken sayfanın arka plan rengiyle eşleşecek şekilde ayarlanmış SVG resimlerini kullanır :link, ardından bağlantı durumundayken başka bir renge geçer :visited. Öğretici, SVG yerine Unicode karakterleri kullanan alternatif bir yöntem de içerir.

İlişkili

  • :link
  • :active
  • :hover
  • :focus

Daha fazla bilgi

  • :visited W3C spesifikasyonunda
  • :visited MDN'de

Tarayıcı Desteği

Tüm tarayıcılar bunu destekler.