: dikunjungi - Trik CSS

Anonim

The :visitedpemilih pseudo-class dapat mengubah beberapa styling pada anchor link ( ) elemen jika browser pengguna telah mengunjungi link. Ini dimaksudkan untuk membantu pengguna membedakan perbedaan antara tautan yang mereka miliki dan yang belum mereka kunjungi.

a:visited ( color: gray; )

Batasan dan Penggunaan

Ada beberapa masalah privasi :visited, yaitu bahwa situs web berbahaya dapat memiliki tautan ke banyak situs web dengan :visitedgaya, kemudian menguji gaya visual tautan dengan JavaScript untuk melaporkan kembali ke server situs mana yang telah dikunjungi pengguna. Ini melanggar privasi pengguna dan berpotensi mengungkapkan informasi identitas pribadi.

Akibatnya, sebagian besar browser membatasi gaya apa yang dapat diubah pada :visitedtautan, dan informasi gaya apa yang dapat dilaporkan dengan getComputedStylemetode tersebut.

Ini adalah penurunan yang bagus dari situasi itu.

Ini adalah properti yang dapat diubah dengan :visited:

  • color
  • background-color
  • border-color (dan sub-propertinya)
  • outline-color
  • Bagian warna dari filldan strokeproperti

Anda hanya dapat menggunakan :visiteduntuk mengubah properti tersebut jika link sudah memilikinya dalam status "belum dikunjungi" :link. Anda tidak dapat menggunakannya untuk menambahkan properti yang belum ada di link. Sebagai contoh:

Anda dapat mengubah background-colordari :visitedlink yang jika elemen link sudah memiliki warna latar belakang.

Anda tidak dapat menambahkan background-colorke :visitedtautan jika tidak memiliki warna latar belakang saat itu adalah tautan "belum dikunjungi".

Tautkan Kelas-Pseudo secara Berurutan

Juga berguna untuk mengetahui bahwa sebagian besar pseudo-class link harus dideklarasikan dalam urutan tertentu. Urutannya adalah:

  1. Tautan
  2. Dikunjungi
  3. Arahkan kursor
  4. Aktif

Jika Anda menyertakan :focusgaya untuk link Anda, itu umum untuk menambahkannya antara "hover" dan "active".

Demo

Memperluas :visited

Meskipun gaya langsung untuk :visitedtautan terbatas, ada banyak cara cerdas untuk memperluas opsi Anda untuk memberi gaya pada tautan yang dikunjungi. Pada tahun 2015 ada banyak sekali postingan blog yang membagikan ide-ide baru untuk menata :visitedtautan:

Meninjau kembali: dikunjungi , dari Joel Califa, menunjukkan contoh penggunaan localstorageke gaya yang dikunjungi, tautan dalam domain.

Peretasan: dikunjungi , dari Una Kravets, memutar :visitedkepalanya dengan menambahkan tag "belum dikunjungi" sebagai :afterkonten ke tautan, yang kemudian disembunyikan dengan pertukaran warna latar belakang setelah tautan dikunjungi.

Menekan batas: dikunjungi dengan mode campuran CSS , dari Stelian Firez, menggabungkan sedikit trik HTML yang dikaitkan dengan DuckDuckGo dan background-blend-mode: screen;memudarkan ikon khusus di sebelah tautan yang dikunjungi.

Menata Tautan yang Dikunjungi dengan SVG , dari Dudley Storey. Menggunakan gambar SVG dengan fillset agar sesuai dengan warna latar belakang halaman saat link dalam :linkstatus, lalu ke warna lain setelah link tersebut :visited. Tutorial ini juga menyertakan metode alternatif menggunakan karakter Unicode, bukan SVG.

Terkait

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

Informasi Lebih Lanjut

  • :visited di spesifikasi W3C
  • :visited di MDN

Dukungan Browser

Semua browser mendukung ini.