: Sokongan fokus-kelihatan datang ke Firefox

Versi Firefox 85 Sokongan secara rasmi :focus-visible ! Apa maksudnya? Mari kita lihat bersama.

Memandangkan dokumentasi MDN telah dikemas kini, yang sangat dinanti-nantikan :focus-visible kini disokong secara asli di Firefox 85.

:focus-visible adalah bahawa ia bijak mengimbangi kebolehcapaian dan estetika visual. Kita semua tahu bahawa profil fokus adalah penting untuk kebolehcapaian (terutamanya apabila menavigasi papan kekunci), tetapi profil fokus biru lalai tidak selalu sesuai dengan reka bentuk jenama.

Pada masa lalu, kami menghadapi dilema: sama ada menggunakan garis besar tersuai, yang memaparkan apabila semua elemen mendapat fokus (sama ada klik papan kekunci atau tetikus), atau membatalkan garis besar sepenuhnya, mengorbankan aksesibiliti. Dan :focus-visible menyelesaikan masalah ini dengan sempurna. Ia menggunakan maklumat input pengguna penyemak imbas (atau heuristik) untuk menentukan sama ada tumpuannya datang dari papan kekunci atau tetikus.

(Bolehkah heuristik penyemak imbas dengan sempurna membezakan kaedah input? Ia bergantung kepada keadaan. Setelah menyentuh interaksi, keadaan menjadi rumit.)

Ini bermakna kita boleh mengeluarkan cincin fokus lalai (hebat!), Dan hanya memaparkan gaya tersuai apabila diperlukan (interaksi papan kekunci) (Awesome!). Mari lihat contoh (terima kasih kepada Andy Adams):

 <code>.next-image-button:focus { outline: none; } .next-image-button:focus-visible { outline: 3px solid blanchedalmond; /* 自定义焦点样式*/ }</code>

Harus diingat bahawa :focus-visible tidak sepenuhnya mengeluarkan cincin fokus seperti :focus , jadi kedua-duanya biasanya digunakan bersama-sama.

Chrome telah dilaksanakan seawal tahun 2018 :focus-visible . Firefox juga mempunyai versi awalan sendiri sebelum :-moz-focusring . Pengguna Safari? Pergi dan undi ciri ini! Igalia sedang mengumpul dana dan bekerja untuk menambahkannya ke pelayar Safari! Brian Kardell menjelaskan secara terperinci ini.

Atas ialah kandungan terperinci : Sokongan fokus-kelihatan datang ke Firefox. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!