Styling Links

Tautan adalah elemen teks paling interaktif di halaman: pengguna mengarahkan kursor, menekan, dan berpindah halaman melaluinya. Browser menampilkannya dengan gaya bawaan biru bergaris bawah, lengkap dengan lima state yang berbeda. Menimpa warnanya saja sering tidak cukup — state bisa saling menimpa kalau urutan penulisannya salah, dan state fokus yang dihapus membuat pengguna keyboard kehilangan arah. Pada chapter ini kita menata kelima state tautan secara utuh, memahami urutan LVHA, menghormati batasan :visited, lalu meniru pola yang dipakai website nyata.

Lima State Tautan #

Kelima selector di atas adalah pseudo-class: selector yang mencocokkan keadaan elemen, ditulis menempel pada selector biasa seperti a:hover. Satu kejelasan penting: menata a tanpa pseudo-class berlaku untuk semua tautan apa pun state-nya, sedangkan a:link hanya menyasar tautan yang belum dikunjungi. :focus-visible secara khusus hanya aktif untuk fokus lewat keyboard, sehingga gaya fokus tidak mengganggu saat pengguna mengklik dengan mouse.

Menata Kelima State #

a {
  color: #1f6f54;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: #14503a;
}

a:focus-visible {
  outline: 2px solid #f4b942;
  outline-offset: 2px;
}

a:active {
  color: #0d3b2a;
}

Penjelasan singkat: text-underline-offset mengatur jarak garis bawah dari teks, dan garis yang terlalu menempel menyulitkan pembacaan. outline dipilih untuk fokus karena berada di luar kotak dan tidak menggeser tata letak — sebagaimana dibahas pada chapter outline di section Warna, Background, dan Borders.

Demo berikut memperlihatkan state-state itu pada tautan teks dan tautan tombol:

Semuanya digerakkan CSS semata — seluruh state punya gaya, bukan hanya :hover.

Urutan LVHA: Mengapa Urutannya Penting #

:link, :visited, :hover, dan :active memiliki bobot specificity yang sama, sehingga bila dua aturan cocok pada saat bersamaan, aturan yang ditulis belakangan yang menang. Keadaan itu benar-benar terjadi: tautan yang sudah dikunjungi sedang dihover cocok dengan :visited dan :hover sekaligus.

a:link { color: #1f6f54; }
a:visited { color: #7a5ea8; }
a:hover { color: #14503a; }
a:active { color: #0d3b2a; }

Pada tautan yang sudah dikunjungi dan sedang dihover, dua aturan cocok bersamaan; karena :hover ditulis belakangan, warna hover yang tampil.

Batasan :visited untuk Privasi #

Browser membatasi properti yang boleh dipakai pada :visited: hanya properti warna seperti color, background-color, border-color, outline-color, dan warna text-decoration. Properti lain seperti font-weight atau padding diabaikan begitu saja. Alasannya privasi: bila halaman bisa menata ciri khas seperti ketebalan huruf pada :visited, halaman lain dapat membaca riwayat kunjungan pengguna dengan mengukur perbedaan gaya. Browser juga membuat JavaScript melaporkan gaya tautan yang belum dikunjungi, sehingga perbedaannya tidak dapat diintip.

Praktisnya: batasi rencana desain :visited pada pergantian warna, dan anggap itu cukup — perbedaan warna sudah membantu pengguna mengenali tautan yang pernah mereka buka.

Pola yang Sering Dipakai #

Tautan yang tampil sebagai tombol — kombinasi display: inline-block, padding, dan latar:

.tombol-tautan {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 8px;
  background-color: #1f6f54;
  color: #fdfaf3;
  text-decoration: none;
}

.tombol-tautan:hover {
  background-color: #14503a;
}

Menandai tautan eksternal — attribute selector dari section Selectors dapat menyasar tautan berdasarkan isi href-nya:

a[href^="https"]::after {
  content: " ↗";
  font-size: 0.9em;
}

Pseudo-element ::after dibahas tuntas pada section Pseudo-classes dan Pseudo-elements; di sini cukup dicatat bahwa pola ini menambahkan penanda kecil di belakang setiap tautan yang href-nya diawali https.

Kesalahan Umum #

Ringkasan #

Tautan memiliki lima state — :link, :visited, :hover, :focus-visible, :active — yang urutan penulisannya menentukan siapa menimpa siapa: ikuti LVHA. :visited dibatasi pada properti warna demi privasi riwayat kunjungan, dan state fokus harus selalu mendapat pengganti yang jelas. Pola tautan-tombol serta penanda tautan eksternal melengkapi perangkat kita. Chapter berikutnya beralih ke elemen yang paling sering kita bersihkan sebelum dipakai sebagai menu: list.