Tutorial CSS / Status Tautan CSS dan Fokus Keyboard yang Terlihat

Atur tampilan status tautan dengan kelas semu seperti :link, :visited, :hover, dan :focus-visible sambil menjaga tautan tetap dapat dikenali. Pengguna keyboard memerlukan indikator fokus yang terlihat, dan gaya hover saja tidak dapat menyampaikan setiap status interaktif.

Buat tautan dapat dikenali

a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

Tautan dibuat dengan elemen a yang berisi href. Hanya mewarnai teks biru tidak membuatnya menjadi tautan yang sebenarnya. Memberi garis bawah juga memberi informasi kepada pembaca yang kesulitan membedakan warna mengenai bagian mana yang merupakan tautan. text-underline-offset menyesuaikan jarak antar huruf dan garis bawah. Di sini em didasarkan pada ukuran font dari tautan.

Gunakan nama yang menggambarkan koneksi, seperti “Informasi Pengunjung,” daripada tujuan yang tidak diketahui, seperti “Klik.” Sebelum membuat tautan biasa tampak seperti tombol, Anda perlu membedakan apakah itu navigasi atau aksi. Tautan cocok untuk elemen yang bergerak ke dokumen lain, dan tombol biasanya cocok untuk elemen yang mengeksekusi aksi pada layar saat ini.

Bandingkan keadaan tautan dan urutan sumber

a:link { color: #1756a9; }

a:visited { color: #6b438c; }

a:hover { color: #b53239; }

a:active { color: #8a2630; }

Sebuah tautan dapat sesuai dengan beberapa status sekaligus: tautan yang dikunjungi di bawah penunjuk sesuai dengan :visited dan :hover. Dengan spesifisitas yang sama dan kondisi kaskade yang sama lainnya, deklarasi yang terakhir menang untuk properti yang sama. Urutan link → visited → hover → active membuat warna hover dan ditekan dapat diamati apakah tujuan telah dikunjungi atau tidak. Lihat Kombinator dan Kelas Semu CSS.

Urutan ini tidak mengalahkan semua aturan lainnya. Jika Anda memiliki selektor yang lebih spesifik atau kondisi kaskade lainnya, hasilnya akan berbeda. Jika warnanya tidak berubah, periksa deklarasi warna mana yang diterapkan di alat pengembang. :active tidak dalam keadaan untuk terus menampilkan menu yang dipilih. Jika Anda perlu menampilkan menu halaman saat ini, pertimbangkan kelas terpisah atau tampilan semantik seperti aria-current.

Pertahankan fokus keyboard terlihat

a:focus-visible {
  outline: 3px solid #9b5d00;
  outline-offset: 3px;
}

Fokus merujuk pada objek yang akan menerima input dari keyboard. Jika lokasi saat ini tidak terlihat saat menavigasi ke tautan dengan Tab, akan sulit bagi pengguna untuk mengetahui di mana harus menekan Enter. :focus-visible berlaku dalam situasi di mana peramban menentukan bahwa menampilkan fokus adalah perlu. Hal ini biasanya muncul saat pergerakan dengan keyboard, tetapi tidak semua situasi klik/input hanya dibagi menjadi dua tipe. Untuk menerapkan indikator fokus pada kolom isian, bandingkan contoh dalam Status Formulir CSS: Fokus, Validasi, disabled, dan readonly.

outline menggambar garis fokus dan outline-offset memisahkannya dari elemen. Jangan hapus indikator default dengan outline: none kecuali Anda menyediakan pengganti yang memadai. Contoh ini mempertahankan baik garis bawah tautan maupun garis fokus yang terlihat. Lihat MDN: :focus visible.

Buat contoh dua file

Buat links.html dan visit.html dalam folder yang sama. Simpan kode pertama sebagai links.html dan kode berikutnya sebagai visit.html dalam format UTF-8. Tautan pertama membawa Anda ke file terpisah yang sebenarnya, dan tautan kedua menuju heading jam operasional di halaman saat ini.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Link states exercise</title>
  <style>
    body { margin: 24px; font: 1rem/1.7 sans-serif; color: #333; }
    main { max-width: 65ch; }
    a { text-decoration: underline; text-underline-offset: 0.15em; }
    a:link { color: #1756a9; }
    a:visited { color: #6b438c; }
    a:hover { color: #b53239; }
    a:active { color: #8a2630; }
    a:focus-visible { outline: 3px solid #9b5d00; outline-offset: 3px; }
    nav li + li { margin-block-start: 0.7em; }
  </style>
</head>
<body>
  <main>
    <h1>Small Garden visitor information</h1>
    <nav aria-label="Instruction link"><ul>
      <li><a href="visit.html">Visitor information on a separate page</a></li>
      <li><a href="#hours">Opening hours on this page</a></li>
    </ul></nav>
    <h2 id="hours">Opening hours</h2>
    <p>Plant care takes place in the morning. These times are fictional sample content, not information about a real facility.</p>
    <p>Hover over the links or press Tab to check their colors and outlines.</p>
  </main>
</body>
</html>

<!doctype html>

<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Visitor Information</title></head>

<body><h1>Visitor information page</h1><p>This separate document is opened by the first link.</p><p><a href="links.html">Return to the link exercise</a></p></body></html>

Uji tautan dengan mouse dan keyboard

1. Buka links.html dan arahkan kursor ke tautan pertama. Periksa apakah warnanya berubah menjadi merah. Jika Anda menahan tombol mouse, Anda akan melihat warna merah tua. Karena halaman bergerak saat Anda melepaskannya, warna aktif tidak tetap setelah diklik.
2. Buka tautan pertama, lalu gunakan tombol Kembali pada browser untuk kembali ke links.html. Pindahkan kursor dari tautan dan periksa warna kunjungan. Hasil dapat berbeda pada profil baru, jendela pribadi, atau setelah membersihkan riwayat, dan alamat yang sudah dikunjungi mungkin akan ditandai sebagai dikunjungi dari awal.
3. Tempatkan kursor di luar tautan dan tekan tab ke tautan pertama. Pastikan garis luar cokelat tua muncul, kemudian tekan Tab lagi ke tautan berikutnya. Shift+Tab bergerak dalam urutan sebaliknya.
4. Fokuskan pada tautan pertama, tekan Enter. Pastikan visit.html terbuka. Saat Anda kembali, aktifkan tautan kedua dengan Enter dan itu seharusnya membawa Anda ke judul “Opening hours” (jam operasional).

Tampilan yang telah dikunjungi memiliki batasan privasi. Beberapa properti terkait warna, seperti color, dapat digunakan, tetapi ukuran, gambar, dan sebagainya tidak dapat diubah secara bebas untuk menentukan apakah kunjungan telah terjadi. Demi privasi, browser menyamarkan hasil pembacaan warna visited melalui getComputedStyle(), dll., jadi jangan menilai riwayat kunjungan hanya berdasarkan nilai gaya yang dihitung. Batasan rinci dijelaskan dalam :visited di MDN dan dalam pernyataan privasi.

Diagnosa perubahan status yang hilang

• Jika tautan tidak membuka tujuan, periksa nama file dari href dan lokasi visit.html. Pertama, periksa apakah Anda menempatkan kedua file dalam folder yang sama.
• Jika Anda hanya melihat warna hover alih-alih warna visit, gerakkan pointer dari tautan. Jika hover dipaksa aktif di alat pengembang, matikan.
• Jika navigasi keyboard tidak memindahkan fokus, periksa apakah itu tautan nyata dengan href. Pengaturan navigasi keyboard di browser/sistem operasi Anda juga dapat berpengaruh.
• Ketika garis fokus terpotong, periksa overflow elemen induk dan ruang sekitarnya. Pada sentuhan mobile, hover bisa berperilaku berbeda dibanding di desktop, jadi informasi penting tidak hanya ditampilkan saat hover.

Setelah Anda selesai berlatih mengubah urutan aturan, kembalikan mereka ke urutan semula. CSS yang telah dimodifikasi sementara di alat pengembang akan kembali ke nilai yang disimpan di file saat Anda memuat ulang, tetapi riwayat penelusuran tidak direset hanya dengan memuat ulang.