: fokus-kelihatan - Trik CSS | CSS Almanac 2025

Kelas :focus-visiblepseudo (juga dikenali sebagai kelas pseudo "Fokus-Indikasi") adalah cara CSS asli untuk menggayakan elemen yang:

Sedang fokus
Perlu penunjuk yang dapat dilihat untuk menunjukkan fokus (lebih lanjut mengenai ini kemudian)

:focus-visibledigunakan sama dengan :focus: untuk menarik perhatian pada elemen yang kini mempunyai fokus.

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

:focus-visibleadalah sebahagian daripada draf kerja Pemilih CSS4. Sebelum diadopsi, Mozilla memperkenalkan kelas :-moz-focusringpseudo untuk membawa fungsi ke Firefox lebih awal daripada spesifikasi formal.

Mengapa kita memerlukan: kelihatan fokus?

Tidak :focusbuat ini? Ya, tetapi ada masalah. Ilustrasi paling jelas adalah butang yang menghidupkan beberapa JavaScript. Bayangkan karusel gambar dengan butang untuk menukar antara gambar. Katakan anda telah menambahkan a tabindexpada butang supaya ia dapat dipilih dengan papan kekunci, tetapi apabila anda menguji korsel dengan tetikus, anda melihat garis besar ini di sekitar butang cantik anda:

Garis besar yang ditambah oleh penyemak imbas di `:focus`

Bukan anda mahu melakukan ini (untuk masalah kebolehaksesan), tetapi bagaimana anda membuangnya? Dengan menetapkan kelas :focuspseudo:

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

Kini butang anda kelihatan hebat ketika berada dalam fokus, tetapi apa yang berlaku apabila pengguna mengetuk butang anda tanpa tetikus tetapi papan kekunci? Mereka tidak dapat melihat di mana mereka telah membuat tab! Itu masalah kerana sekarang tidak ada cara untuk memberitahu butang mana yang difokuskan untuk tindakan papan kekunci:

Salah satunya tertumpu, tetapi anda tidak dapat melihatnya!

Adakah cara untuk membuang garis besar fokus biru tetapi masih menunjukkan fokus yang lebih sesuai dengan reka bentuk laman web? Sudah tentu, anda boleh mendapatkan kek anda dan memakannya juga, terima kasih :focus-visible!

:focus-visiblehanya berlaku apabila anda benar-benar mahukan penunjuk visual untuk membantu pengguna melihat di mana tumpuannya. Dengan kata lain, ia tidak dapat menyembunyikan garis besar seperti :focustin. (Baiklah, dengan menggabungkannya ke dalam rancangan, tapi apa pun.) Kedua-duanya harus digunakan bersama dalam arti itu. Mari tambah satu pada butang kami:

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

Sekarang, apabila papan kekunci digunakan untuk mengetuk butang, akan ada petunjuk visual mengenai fokus:

`:focus-visible` menjadikan fokus kelihatan!

Bagaimanakah penyemak imbas menentukan bila ada: fokus dapat dilihat?

Penyemak imbas diberi sedikit kelonggaran untuk menentukan kapan pemilih semu ini harus diterapkan pada elemen tertentu dengan menggunakan heuristik mereka sendiri. Pertama, mari kita lihat draf kerja CSS4, dan kemudian kita akan cuba memecahnya. Dari spesifikasi:

Sekiranya pengguna telah menyatakan keutamaan (seperti melalui pilihan sistem atau tetapan penyemak imbas) untuk selalu melihat penunjuk fokus yang dapat dilihat, ejen pengguna harus menghormatinya dengan mempunyai: fokus yang kelihatan selalu sesuai pada elemen aktif, tanpa mengira yang lain faktor. (Pilihan lain mungkin untuk ejen pengguna menunjukkan penunjuk fokusnya sendiri tanpa mengira gaya pengarang.)

Mana-mana elemen yang menyokong input papan kekunci (seperti elemen input, atau elemen lain yang boleh mencetuskan papan kekunci maya untuk ditunjukkan pada fokus jika papan kekunci fizikal tidak ada) harus selalu sepadan: kelihatan-fokus ketika fokus.

Sekiranya pengguna berinteraksi dengan halaman melalui papan kekunci, elemen yang difokuskan saat ini harus sesuai: fokus-kelihatan (iaitu penggunaan papan kekunci boleh berubah sama ada kelas pseudo ini sepadan walaupun tidak mempengaruhi: fokus).

Sekiranya pengguna berinteraksi dengan halaman melalui peranti penunjuk, sehingga fokus dipindahkan ke elemen baru yang tidak menyokong input pengguna, elemen yang baru difokuskan tidak boleh sepadan: kelihatan fokus.

Sekiranya elemen aktif sepadan: fokus kelihatan, dan skrip menyebabkan fokus bergerak ke tempat lain, elemen yang baru difokuskan harus sepadan: kelihatan fokus.

Sebaliknya, jika elemen aktif tidak sepadan: fokus-kelihatan, dan skrip menyebabkan fokus bergerak ke tempat lain, elemen yang baru difokuskan tidak sesuai: fokus-kelihatan.

Sekiranya itu sedikit abstrak, inilah tafsiran:

Keadaan	Adakah: kelihatan fokus berlaku?
Pengguna mengatakan bahawa mereka selalu mahu fokus dapat dilihat melalui tetapan	Ya
Elemen memerlukan papan kekunci untuk berfungsi (seperti teks)	Ya
Pengguna menavigasi dengan papan kekunci	Ya
Pengguna menavigasi dengan peranti penunjuk (seperti tetikus atau jari pada skrin sentuh)	Tidak
Skrip menyebabkan fokus beralih dari `:focus-visible`elemen ke elemen lain	Ya
Skrip menyebabkan fokus beralih dari bukan `:focus-visible`unsur ke elemen lain	Tidak

Berulang kali: Ini adalah panduan, dan penyemak imbas akan dapat membuat penentuan sendiri tentang apa yang dipilih oleh :focus-visible. Kita boleh menjangkakan bahawa kesukaran navigasi papan kekunci dapat ditangani dengan cara yang dapat diramalkan, tetapi penyemak imbas mempunyai kemampuan untuk membuat penentuan sendiri, seperti ciri lain.

Sokongan penyemak imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.