Focus and: active arasındaki fark nedir?

:focusVe :activesözde sınıflar arasındaki fark nedir ?

:focusve :activeiki farklı eyalettir.

• :focus öğenin girdiyi almak için seçili olduğu durumu ve
• :active öğesi, öğenin şu anda kullanıcı tarafından etkinleştirildiği durumu gösterir.

Diyelim ki elimizde bir tane var <button>. <button>Başlamak için herhangi bir devlet olmayacaktır. Sadece var. Eğer Tab"odak" vermek için kullanırsak <button>, şimdi :focusdurumuna girer . Daha sonra tıklarsanız (veya tuşuna basarsanız space), düğmenin ( :active) durumuna girmesini sağlarsınız.

Bir öğeyi tıklayarak bu notta, üzerinde, o da o yanılsama yetiştirerek, hangi odak vermek :focusve :activeaynıdır. Aynı değiller. Tıklandığında düğme :focus:activedurumu.

Bir örnek:

<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>

düzenleme: 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

Kaynak: CSS Sözde sınıfları

Dört vaka var.

1. Varsayılan olarak, hem etkin hem de odak kapalıdır.
2. Odaklanabilir öğeler arasında geçiş yapmak için sekme yaptığınızda , bunlar girilir (etkin olmadan).:focus
3. Ne zaman tıklayın bir üzerinde olmayan odaklanabilir eleman , girdiği :active(odak olmadan).
4. Ne zaman tıklayın bir üzerinde odaklanabilir elemanı girdiği :active:focus(aktif ve eş zamanlı olarak odak).

Misal:

<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;
}

Sayfa yüklendiğinde her ikisi de 1. durumdadır. Sekme tuşuna bastığınızda ikinci bölmeyi odaklayacak ve durum 2'yi sergileyeceksiniz. İlk div'i tıkladığınızda 3. vakayı görüyorsunuz. İkinci div'ı tıkladığınızda 4. vakayı görüyorsunuz .

Bir öğenin odaklanabilir olup olmadığı başka bir sorudur . Çoğu varsayılan olarak değildir. Ama, varsaymak güvenlidir <a>, <input>, <textarea>varsayılan olarak odaklanabilir.

: odak, bir elemanın girişi kabul edebildiği durumdur - giriş kutusundaki imleç veya sekmeli bir bağlantı.

: active öğesi, bir öğenin kullanıcı tarafından etkinleştirildiği zamandır - kullanıcının fare düğmesine basması ve serbest bırakması arasındaki süredir.

Aktif kullanıcı o noktayı etkinleştirdiğinde (fare tıklaması gibi, alandan alana sekme kullanırsak, aktif stilde herhangi bir işaret yoktur. Belki daha fazla zamana ihtiyaç duyarsanız, sadece o noktaya tıklamayı deneyin) nokta aktive edilir. Bunu dene :

<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"/>

Odak yalnızca klavye girişi ile verilebilir, ancak bir Öğe hem fare hem de klavye tarafından etkinleştirilebilir.

Kullanılacaksa: bir bağlantıya odaklanılırsa, stil kuralı yalnızca klavyede bir bottona basıldığında uygulanır.

"Odaklama" kullanıldığında klavye kullanıcılarına, fare kullanıcılarının fareyle üzerine geldiklerinde aldıkları etki aynı olur. Internet Explorer'da aynı etkiyi elde etmek için "etkin" gerekir.

Gerçek şu ki, bu durumlar tüm kullanıcılar için olması gerektiği gibi çalışmıyor. Üç seçicinin tümünü kullanmamak, fiziksel olarak fare kullanamayan birçok klavye kullanıcısı için erişilebilirlik sorunları oluşturur. Sizi #nomouse yarışmasına davet ediyorum (nomouse dot org).