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ı