Menyeragamkan gaya fokus dengan CSS Custom Properties

Cepat menguji projek anda: Buka penyemak imbas anda, gunakan kunci tab sahaja, dan cuba menavigasi antara elemen interaktif seperti butang, pautan, dan elemen bentuk.

Jika anda seorang pengguna dengan penglihatan biasa, anda harus dapat melihat perubahan visual apabila tumpuan melompat antara elemen DOM. Tetapi jika tidak ada perubahan visual, atau perubahan itu adalah minimum, maka anda dapat mencari cara untuk membuat perbezaan besar bagi pelawat anda.

Artikel ini akan memperkenalkan teknik untuk menguruskan gaya fokus projek dengan lebih cekap menggunakan sifat tersuai CSS dan mempelajari pemilih fokus CSS moden. Pertama, mari kita faham mengapa gaya fokus yang kelihatan sangat penting.

Memenuhi standard gaya fokus WCAG

Status fokus yang kelihatan mematuhi Garis Panduan Kebolehcapaian Kandungan Web (WCAG) Standard 2.4.7 - Fokus dapat dilihat. Dokumen "pemahaman" dalam 2.4.7 menyatakan niat standard ini:

Tujuan kriteria kejayaan ini adalah untuk membantu pengguna memahami elemen mana yang mempunyai fokus papan kekunci. Ia mesti dapat membiarkan pengguna mengetahui elemen unsur berganda yang mempunyai fokus papan kekunci.

Dalam WCAG 2.2 yang akan datang, standard baru akan ditambah untuk menjelaskan "betapa jelasnya penunjuk fokus." Walaupun masih dalam peringkat draf, akrab dengan dan memohon panduan dalam 2.4.11 - penampilan fokus (minimum) sudah pasti langkah aktif untuk meningkatkan gaya fokus yang boleh anda ambil hari ini.

Urus gaya fokus dengan atribut tersuai CSS

Satu teknik yang saya mula menggunakan tahun ini adalah untuk memasukkan tetapan berikut seawal mungkin pada elemen asas interaktif utama dalam lembaran cascading saya:

 <code>:is(a, button, input, textarea, summary) { --outline-size: max(2px, 0.08em); --outline-style: solid; --outline-color: currentColor; } :is(a, button, input, textarea, summary):focus { outline: var(--outline-size) var(--outline-style) var(--outline-color); outline-offset: var(--outline-offset, var(--outline-size)); }</code>

Ini melekatkan sifat tersuai, yang membolehkan anda fleksibel menyesuaikan bahagian -bahagian tertentu gaya garis besar yang diperlukan untuk memastikan fokus tetap kelihatan apabila konteks unsur berubah.

Untuk --outline-size , kami menggunakan max() untuk memastikan nilai sekurang-kurangnya 2px sambil membenarkan skala berdasarkan 0.08em berdasarkan komponen (mis., Butang besar atau pautan dalam tajuk).

Hartanah yang anda tidak biasa dengan di sini adalah outline-offset , yang mentakrifkan ruang antara elemen dan garis besar. Anda juga boleh memberikan nombor negatif untuk membenamkan garis besar, yang sangat berguna untuk memastikan kontras gaya fokus. Dalam set peraturan kami, kami menetapkan harta ini untuk menerima Property Custom Pilihan --outline-offset supaya ia boleh disesuaikan jika diperlukan, jika tidak, ia akan kembali ke saiz --outline-size .

Peningkatan penampilan kontur

Semasa karier saya, saya telah diminta untuk menghapuskan kontur dan juga telah mengeluarkan kontur sendiri kerana mereka dianggap "tidak sedap."

Kini terdapat dua sebab mengapa kontur tidak boleh dikeluarkan (kecuali kesan kebolehaksesan):

1. Dalam Chromium dan Firefox, outline kini mengikuti border-radius ! box-shadow
2. Dengan :focus-visible , kita boleh meminta penyemak imbas menggunakan heuristik untuk memaparkan gaya fokus hanya apabila corak input yang memerlukan tumpuan yang dapat dilihat dikesan. Singkatnya, ini bermakna pengguna tetikus tidak akan melihatnya apabila diklik, dan pengguna papan kekunci masih akan melihatnya apabila kekunci tab beroperasi.

Harus diingat bahawa unsur-unsur bentuk sentiasa memaparkan gaya fokus-mereka tidak terhad oleh :focus-visible .

Oleh itu, mari kita tingkatkan peraturan kita, tambah yang berikut untuk memasukkan :focus-visible . Kami akan menyimpan awal :focus yang telah kami tentukan untuk pelayar lama sekiranya ia tidak akan hilang.

 <code>:is(a, button, input, textarea, summary):focus-visible { outline: var(--outline-size) var(--outline-style) var(--outline-color); outline-offset: var(--outline-offset, var(--outline-size)); }</code>

Oleh kerana penyemak imbas cara mengendalikan pemilih yang mereka tidak faham, kita perlu memisahkan peraturan ini, walaupun mereka menentukan sifat garis besar yang sama, kita tidak dapat menggabungkannya bersama -sama.

Akhirnya, kita juga memerlukan peraturan ini :focus:not(:focus-visible) yang pelik ini, yang menghilangkan gaya fokus biasa untuk penyemak imbas yang menyokong :focus-visible :

 <code>:is(a, button, input, textarea, summary):focus:not(:focus-visible) { outline: none; }</code>

Perlu diingat bahawa versi terkini Chromium dan Firefox telah beralih kepada menggunakan :focus-visible sebagai cara lalai untuk menggunakan gaya fokus pada unsur-unsur interaktif dan baru-baru ini telah diaktifkan sebagai cara lalai di WebKit, jadi ia sepatutnya akan datang dalam versi stabil Safari! Peraturan kami masih sah kerana kami menyesuaikan penampilan garis besar.

Untuk lebih banyak panduan mengenai gaya fokus yang kelihatan, saya cadangkan panduan yang indah dan komprehensif Sara Soueidan mengenai petunjuk fokus, kerana ia mengambil kira standard 2.4.11 yang akan datang.

Demonstrasi gaya fokus

Contoh ini menunjukkan setiap elemen interaktif ini dan cara menggunakan tetapan tersuai menggunakan sifat tersuai, termasuk beberapa perubahan kepada mod gelap. Bergantung pada sokongan penyemak imbas anda, anda mungkin tidak melihat gaya fokus melainkan jika anda menggunakan kekunci Tab, kerana :focus-visible digunakan.

Perkara terakhir: Dari segi gaya fokus, button adalah elemen interaktif yang unik kerana ia mempunyai pertimbangan tambahan antara negeri -negeri, terutama jika anda hanya bergantung pada warna. Untuk bantuan, cuba gunakan penjana palet dalam projek saya ButtonBuddy.dev.

Atas ialah kandungan terperinci Menyeragamkan gaya fokus dengan CSS Custom Properties. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!