Bagaimanakah Anda Boleh Melaksanakan Gaya Fokus Papan Kekunci Sahaja Menggunakan :focus-visible?

Gaya Fokus Papan Kekunci Sahaja dalam Pelayar Moden

Dalam pelayar moden, kelas pseudo :focus-visible boleh digunakan untuk mencapai papan kekunci- hanya fokus gaya. Kelas pseudo ini memadankan elemen fokus apabila pengguna berinteraksi dengan halaman melalui papan kekunci atau peranti bukan penunjuk lain, menunjukkan fokus apabila ia membantu pengguna. Akibatnya, deringan fokus ditindas apabila pengguna berinteraksi melalui mengklik atau mengetik.

Penggayaan Fokus Tersuai dengan :fokus-kelihatan

Untuk melaksanakan gaya fokus tersuai sambil mengekalkan keserasian dengan penyemak imbas lama, ikut pendekatan ini:

<code class="css">button:focus {
  /* Default focus styles */
}

button:focus:not(:focus-visible) {
  /* Undo default focus styles */
}</code>

Pelayar dalam yang menyokong :focus-visible, peraturan kedua mengatasi gaya fokus yang ditakrifkan dalam peraturan pertama apabila :focus-visible tidak aktif. Ini memastikan gaya fokus hanya digunakan apabila :focus-visible aktif.

Penyelesaian Asal untuk Penyemak Imbas Lama

Untuk penyemak imbas yang tidak menyokong :focus-visible, pendekatan alternatif melibatkan penggunaan elemen tambahan dalam setiap elemen boleh fokus, seperti yang dicadangkan dalam artikel Roman Komarov:

<code class="css">/* Root button styling */
.btn {
  all: initial;
  display: inline-block;
}

/* Inner content element */
.btn__content {
  background: orange;
  cursor: pointer;
  display: inline-block;
}

/* Custom focus styles on inner element */
.btn:focus > .btn__content {
  box-shadow: 0 0 2px 2px #51a7e8;
  color: lime;
}</code>

Dengan meletakkan gaya fokus pada elemen dalaman, sambil mengalih keluar garis besar lalai pada kedua-dua elemen induk dan dalaman selepas menambah gaya fokus tersuai, hanya interaksi papan kekunci menggunakan gaya fokus pada elemen utama yang boleh dilihat.

Atas ialah kandungan terperinci Bagaimanakah Anda Boleh Melaksanakan Gaya Fokus Papan Kekunci Sahaja Menggunakan :focus-visible?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!