: dilawati - Trik CSS

Anonim

The :visitedpemilih pseudo-kelas boleh menukar beberapa gaya pada pautan anchor ( unsur) jika pelayar pengguna telah melawat pautan. Ini bertujuan untuk membantu pengguna membezakan perbezaan antara pautan yang mereka miliki dan belum dikunjungi.

a:visited ( color: gray; )

Batasan dan Penggunaan

Ada beberapa kekhawatiran privasi tentang :visited, iaitu bahawa laman web yang berniat jahat boleh mempunyai pautan ke banyak laman web dengan :visitedgaya, kemudian menguji gaya visual pautan dengan JavaScript untuk melaporkan kembali ke pelayan laman web yang telah dikunjungi pengguna. Ini melanggar privasi pengguna dan berpotensi mendedahkan maklumat pengenalan diri.

Akibatnya, kebanyakan penyemak imbas menyekat gaya apa yang dapat diubah pada :visitedpautan, dan maklumat gaya apa yang dapat dilaporkan dengan getComputedStylemetode tersebut.

Ini adalah keadaan yang baik.

Inilah sifat-sifat yang boleh diubah dengan :visited:

  • color
  • background-color
  • border-color (dan sub-sifatnya)
  • outline-color
  • Bahagian warna filldan strokesifat

Anda hanya boleh menggunakan :visiteduntuk mengubah sifat tersebut jika pautan sudah memilikinya dalam keadaan "tidak dikunjungi" atau :linkkeadaan Anda tidak boleh menggunakannya untuk menambahkan sifat yang belum ada di pautan. Sebagai contoh:

Anda boleh menukar background-colordaripada :visitedlink jika unsur link sudah mempunyai warna latar belakang.

Anda tidak boleh menambah background-colorkepada :visitedlink jika ia tidak mempunyai warna latar belakang apabila ia adalah satu pautan "tidak dilawati".

Pautkan Kelas Pseudo mengikut Urutan

Juga berguna untuk mengetahui bahawa sebahagian besar pseudo-class pautan harus dinyatakan dalam urutan tertentu. Pesanannya adalah:

  1. Pautan
  2. Dikunjungi
  3. Tuding
  4. Aktif

Sekiranya anda menyertakan :focusgaya untuk pautan anda, biasanya untuk menambahkannya antara "hover" dan "aktif".

Demo

Memanjangkan :visited

Walaupun gaya langsung untuk :visitedpautan terhad, ada banyak cara pintar untuk memperluas pilihan anda untuk menggayakan pautan yang dikunjungi. Pada tahun 2015 terdapat bumper catatan blog yang berkongsi idea baru untuk menggayakan :visitedpautan:

Meninjau semula: dikunjungi , dari Joel Califa, menunjukkan contoh penggunaan localstorageuntuk gaya yang dikunjungi, pautan dalam domain.

Peretasan: dikunjungi , dari Una Kravets, memusingkan :visitedbadannya dengan menambahkan tanda "tidak dikunjungi" sebagai :afterkandungan ke pautan, yang kemudian disembunyikan dengan pertukaran warna latar belakang setelah pautan tersebut dikunjungi.

Meningkatkan had: dikunjungi dengan mod campuran CSS , dari Stelian Firez, menggabungkan sedikit helah HTML yang dikaitkan dengan DuckDuckGo dan background-blend-mode: screen;memudar ikon tersuai di sebelah pautan yang dikunjungi.

Menggayakan Pautan yang Dikunjungi dengan SVG , dari Dudley Storey. Menggunakan gambar SVG dengan fillset agar sesuai dengan warna latar belakang halaman ketika pautan berada dalam :linkkeadaan, kemudian ke warna lain setelah pautan itu :visited. Tutorial ini juga merangkumi kaedah alternatif menggunakan watak Unicode dan bukannya SVG.

Berkaitan

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

Maklumat lanjut

  • :visited dalam spesifikasi W3C
  • :visited di MDN

Sokongan Penyemak Imbas

Semua penyemak imbas menyokong ini.