: terlihat fokus - Trik CSS | CSS Almanak 2024

The :focus-visiblepseudo-class (juga dikenal sebagai pseudo-class “Focus-Terindikasi”) adalah CSS cara asli elemen gaya yang:

Apakah di fokus
Membutuhkan indikator yang terlihat untuk menunjukkan fokus (lebih lanjut tentang ini nanti)

:focus-visibledigunakan serupa untuk :focus: untuk memberi perhatian pada elemen yang saat ini memiliki fokus.

.element:focus-visible ( background-color: pink; /* Something to get the user's attention */ )

:focus-visibleadalah bagian dari draft kerja Pemilih CSS4. Sebelum diadopsi, Mozilla memperkenalkan kelas :-moz-focusringsemu untuk menghadirkan fungsionalitas ke Firefox di depan spesifikasi formal.

Mengapa kita membutuhkan: fokus terlihat?

Bukankah :focussudah melakukan ini? Ya, tapi ada masalah. Ilustrasi paling jelas adalah tombol yang mengaktifkan beberapa JavaScript. Bayangkan carousel gambar dengan tombol untuk berpindah antar gambar. Katakanlah Anda telah menambahkan a tabindexke tombol sehingga dapat dipilih dengan keyboard, tetapi saat Anda menguji carousel dengan mouse, Anda melihat garis luar ini di sekitar tombol cantik Anda:

Garis besar ditambahkan oleh browser pada `:focus`

Bukannya Anda ingin melakukan ini (untuk masalah aksesibilitas), tetapi bagaimana Anda menyingkirkannya? Dengan mengatur :focuspseudo-class:

.next-image-button:focus ( outline: none; )

Sekarang tombol Anda tampak hebat saat berada dalam fokus, tetapi apa yang terjadi jika pengguna membuka tab ke tombol Anda tanpa mouse melainkan keyboard? Mereka tidak bisa melihat di mana mereka tab! Itu masalah karena sekarang tidak ada cara untuk mengetahui tombol mana yang difokuskan untuk tindakan keyboard:

Salah satunya terfokus, tetapi Anda tidak dapat melihatnya!

Adakah cara untuk menghapus kerangka fokus biru tetapi masih menunjukkan fokus yang lebih sejalan dengan desain situs? Tentu, Anda bisa mendapatkan kue dan memakannya juga, terima kasih :focus-visible!

:focus-visiblehanya berlaku jika Anda benar-benar menginginkan indikator visual untuk membantu pengguna melihat di mana fokusnya. Dengan kata lain, itu tidak bisa menyembunyikan garis besar seperti :focuskaleng. (Yah, itu bisa dengan memadukannya ke dalam desain, tapi apa pun.) Keduanya harus digunakan bersama dalam pengertian itu. Mari tambahkan satu ke tombol kita:

.next-image-button:focus ( outline: none; ) .next-image-button:focus-visible ( outline: 3px solid blanchedalmond; /* That'll show 'em */ )

Sekarang, ketika keyboard digunakan untuk menekan tombol, akan ada indikasi visual dari fokus:

`:focus-visible` membuat fokus terlihat!

Bagaimana browser menentukan kapan sesuatu: terlihat fokus?

Browser diberi sedikit kelonggaran untuk menentukan kapan selektor semu ini harus diterapkan ke elemen tertentu menggunakan heuristiknya sendiri. Pertama, mari kita lihat draf kerja CSS4, dan kemudian kita akan mencoba memecahnya. Dari spesifikasinya:

Jika pengguna telah menyatakan preferensi (seperti melalui preferensi sistem atau pengaturan browser) untuk selalu melihat indikator fokus yang terlihat, agen pengguna harus menghormati ini dengan memiliki: fokus-terlihat selalu cocok dengan elemen aktif, terlepas dari yang lain faktor. (Opsi lain mungkin bagi agen pengguna untuk menampilkan indikator fokusnya sendiri terlepas dari gaya penulis.)

Elemen apa pun yang mendukung masukan keyboard (seperti elemen masukan, atau elemen lain yang dapat memicu keyboard virtual untuk ditampilkan pada fokus jika keyboard fisik tidak ada) harus selalu cocok: terlihat fokus saat difokuskan.

Jika pengguna berinteraksi dengan halaman melalui keyboard, elemen yang saat ini difokuskan harus cocok dengan: focus-visible (yaitu penggunaan keyboard dapat mengubah apakah kelas semu ini cocok meskipun tidak memengaruhi: focus).

Jika pengguna berinteraksi dengan halaman melalui perangkat penunjuk, sehingga fokus dipindahkan ke elemen baru yang tidak mendukung masukan pengguna, elemen yang baru difokuskan tidak boleh cocok: fokus-terlihat.

Jika elemen aktif cocok: fokus terlihat, dan skrip menyebabkan fokus berpindah ke tempat lain, elemen yang baru difokuskan harus cocok: fokus terlihat.

Sebaliknya, jika elemen aktif tidak cocok: fokus terlihat, dan skrip menyebabkan fokus berpindah ke tempat lain, elemen fokus baru tidak boleh cocok: fokus terlihat.

Jika itu sedikit abstrak, inilah interpretasinya:

Situasi	Apakah: terlihat fokus berlaku?
Pengguna mengatakan bahwa mereka selalu ingin fokus terlihat melalui pengaturan	Iya
Sebuah elemen membutuhkan keyboard untuk berfungsi (seperti teks)	Iya
Pengguna menavigasi dengan keyboard	Iya
Pengguna menavigasi dengan perangkat penunjuk (seperti mouse atau jari pada layar sentuh)	Tidak
Sebuah skrip menyebabkan fokus berpindah dari satu `:focus-visible`elemen ke elemen lain	Iya
Skrip menyebabkan fokus berpindah dari non- `:focus-visible`elemen ke elemen lain	Tidak

Ini harus diulang: Ini adalah pedoman, dan browser akan dapat membuat keputusan sendiri tentang apa yang dipilih oleh :focus-visible. Kami dapat berharap bahwa kasus navigasi keyboard yang jelas akan ditangani dengan cara yang dapat diprediksi, tetapi browser memiliki kemampuan untuk membuat penentuan sendiri, seperti fitur lainnya.

Dukungan browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.