Apa perbedaan antara: fokus dan: aktif?

Apa perbedaan antara kelas :focusdan :activepseudo-class?

:focusdan :activedua negara yang berbeda.

• :focus mewakili keadaan saat elemen saat ini dipilih untuk menerima input dan
• :active mewakili keadaan saat elemen saat ini sedang diaktifkan oleh pengguna.

Misalnya katakanlah kita punya <button>. Tidak <button>akan memiliki negara untuk memulai. Itu hanya ada. Jika kita gunakan Tabuntuk memberi "fokus" ke <button>, itu sekarang memasuki :focuskondisinya. Jika Anda mengklik (atau menekan space), Anda kemudian membuat tombol masukkan status ( :active).

Pada catatan itu, ketika Anda mengklik suatu elemen, Anda memberinya fokus, yang juga menumbuhkan ilusi itu :focusdan :activesama. Mereka tidak sama. Ketika diklik tombolnya dalam :focus:activekeadaan.

Sebuah contoh:

<style type="text/css">
  button { font-weight: normal; color: black; }
  button:focus { color: red; }
  button:active { font-weight: bold; }
</style>
  
<button>
  When clicked, my text turns red AND bold!<br />
  But not when focused only,<br />
 where my text just turns red
</button>

sunting: jsfiddle

:active       Adds a style to an element that is activated
:focus        Adds a style to an element that has keyboard input focus
:hover        Adds a style to an element when you mouse over it
:lang         Adds a style to an element with a specific lang attribute
:link         Adds a style to an unvisited link
:visited      Adds a style to a visited link

Sumber: CSS Pseudo-class

Ada empat kasus.

1. Secara default, aktif dan fokus tidak aktif.
2. Saat Anda tab untuk menggilir elemen yang dapat difokus , mereka akan masuk :focus(tanpa aktif).
3. Ketika Anda mengklik pada elemen yang:active tidak bisa fokus , elemen itu masuk (tanpa fokus).
4. Ketika Anda mengklik pada elemen yang dapat :active:focusfokus, elemen itu masuk (aktif dan fokus secara bersamaan).

Contoh:

<div>
  I cannot be focused.
</div>

<div tabindex="0">
  I am focusable.
</div>

div:focus {
  background: green;
}

div:active {
  color: orange;
}

div:focus:active {
  font-weight: bold;
}

Ketika halaman memuat keduanya dalam kasus 1. Ketika Anda menekan tab Anda akan fokus pada div kedua dan melihatnya menunjukkan kasus 2. Ketika Anda mengklik pada div pertama Anda melihat kasus 3. Ketika Anda mengklik div kedua, Anda melihat kasus 4 .

Apakah suatu elemen dapat fokus atau tidak adalah pertanyaan lain . Sebagian besar tidak secara default. Tapi, itu aman untuk mengasumsikan <a>, <input>, <textarea>adalah focusable secara default.

: fokus adalah ketika suatu elemen dapat menerima input - kursor di kotak input atau tautan yang telah ditabrak.

: active adalah ketika elemen diaktifkan oleh pengguna - waktu antara saat pengguna menekan tombol mouse dan kemudian melepaskannya.

Aktif adalah ketika pengguna mengaktifkan titik itu (Seperti mengklik mouse, jika kita menggunakan tab dari bidang ke bidang tidak ada tanda dari gaya aktif. Mungkin mengklik memerlukan lebih banyak waktu, coba tahan klik pada titik itu), fokus terjadi setelah intinya diaktifkan. Coba ini :

<style type="text/css">
  input { font-weight: normal; color: black; }
  input:focus { color: green; outline: 1px solid green; }
  input:active { color: red; outline: 1px solid red; }
</style>

<input type="text"/>
<input type="text"/>

Fokus hanya dapat diberikan oleh input keyboard, tetapi Elemen dapat diaktifkan oleh keduanya, mouse atau keyboard.

Jika orang akan menggunakan: fokus pada tautan, aturan gaya hanya akan berlaku dengan menekan kapas pada keyboard.

Menggunakan "fokus" akan memberi pengguna keyboard efek yang sama dengan yang didapat pengguna mouse saat mereka mengarahkan mouse. "Aktif" diperlukan untuk mendapatkan efek yang sama di Internet Explorer.

Kenyataannya adalah, kondisi ini tidak berfungsi sebagaimana mestinya bagi semua pengguna. Tidak menggunakan ketiga penyeleksi menciptakan masalah aksesibilitas bagi banyak pengguna keyboard saja yang secara fisik tidak dapat menggunakan mouse. Saya mengundang Anda untuk mengambil tantangan #nomouse (nomouse dot org).