Focus durumları

:focus ve :focus-visible ile odak stillerini öğrenirsin.

:focus sözde sınıfı

Bir kullanıcı bir input'a tıklayınca veya Tab ile ona geçince o alan odaklanmış (focused) olur. CSS'te :focus sözde sınıfı bu anı yakalar.

Odaklanan alanın görünümünü değiştirerek kullanıcıya nerede olduğunu gösterirsin. Yaygın bir ayar: outline: 2px solid #2563eb;. Tarayıcının çizdiği varsayılan çerçeveyi değiştirmek yerine ona eşlik eden açık bir çerçeve ekler.

:focus-visible farkı

Bazen odak çerçevesi fareyle tıklamada istenmez; yalnızca klavye ile gezinirken görünmelidir. :focus-visible sözde sınıfı bu ikisini birbirinden ayırır.

Tarayıcı, klavye ile odaklanılırsa :focus-visible stillerini uygular; fareyle tıklanırsa yalnızca :focus stillerini. Böylece fare kullanıcı gereksiz çerçevelerden rahatsız olmaz; klavye kullanıcısı ise çerçeveyi her zaman görür.

Erişilebilir odak

Odak çerçevesi yalnızca güzellik değil, erişilebilirlik gereğidir. Klavyeyle gezinen, ekran okuyucu kullanan veya görme zorluğu çeken kullanıcılar bu çerçeveye bakar.

Bu yüzden outline: none yazıp onu kaldırmak tehlikelidir. Kaldırırsan yerine mutlaka görünür bir alternatif koymalısın: kalın border, alt çizgi ya da belirgin arka plan. Aksi halde form, klavye kullanıcısına kapalı kalır.

Uygulama İki odak çerçevesi yaz

İki bildirim bloğu yaz. input:focus için: outline: 2px solid #2563eb;. input:focus-visible için: outline: 3px solid #2563eb;.

Örnek çözümü göster

iki seçici aç; her birine kendi outline bildirimini koy.
Örnek çözüm:
input:focus {
  outline: 2px solid #2563eb;
}
input:focus-visible {
  outline: 3px solid #2563eb;
}

Kendini test et

:focus-visible ne zaman devreye girer?
- Yalnızca klavye ile odaklanılırsa
- Yalnızca fareyle tıklanırsa
- Her odaklanışta, koşulsuz
- Yalnızca form gönderilince
Cevabı göster

Yalnızca klavye ile odaklanılırsa — Doğru! :focus-visible klavye odağını ayırır; fare kullanıcısını rahatsız etmez.

input:focus'a çerçeve ver

input:focus {
  outline: ____;
}

Cevabı göster

input:focus {
  outline: 2px solid #2563eb;
}

Odak kavramlarını eşleştir

:focus

her odaklanışta
:focus-visible

klavye ile odak
outline

odak çerçevesi
erişilebilirlik

klavye kullanıcısı

Sıradaki ders: Button stilleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler