- Konu sahibi
- #1
CSS’te
Focus, yalnızca görsel bir durum değildir; klavye kullanıcılarının sayfada hangi öğenin seçili olduğunu anlamasını sağlar. Bu nedenle varsayılan odak göstergesini tamamen kaldırmak yerine, yeterince belirgin bir özel görünüm vermek gerekir.
Aşağıdaki dosyayı
Sayfa açıkken Tab ile düğmeye gelin; mavi odak çerçevesi görünmelidir. Fare tıklamasının düğmeye odak vermesi tarayıcı ve işletim sistemine göre değişebilir; klavye denemesini esas alın. Çerçeve görünmüyorsa CSS dosyasının veya
Bu örnekte
İhtiyaca göre seçiciyi seçin:
Genel bir tasarım için
Varsayılan outline’ı kaldırmak:
Yalnızca
Yanlış öğeyi seçmek:
Odak ile seçili durumu karıştırmak:
Hayır. Bağlantılar, düğmeler, özel klavye bileşenleri ve odaklanabilir diğer etkileşimli öğeler için de kullanılır. Odaklanamayan sıradan bir
:focus, klavye, fare, dokunmatik giriş veya başka bir yöntemle o anda kullanıcı etkileşimine hazır olan öğenin stilini seçen sözde sınıftır. En sık form alanlarında, düğmelerde ve bağlantılarda kullanılır. Örneğin bir kullanıcı Tab tuşuyla bir bağlantıya geldiğinde, bağlantıya :focus ile verilen kenarlık veya arka plan görünür.Focus, yalnızca görsel bir durum değildir; klavye kullanıcılarının sayfada hangi öğenin seçili olduğunu anlamasını sağlar. Bu nedenle varsayılan odak göstergesini tamamen kaldırmak yerine, yeterince belirgin bir özel görünüm vermek gerekir.
En küçük çalışır örnek
Aşağıdaki dosyayı
focus.html adıyla kaydedip tarayıcıda açın:
Kod:
<button class="action-button" type="button">Kaydet</button>
<style>
.action-button {
padding: 0.6rem 1rem;
border: 1px solid #555;
border-radius: 4px;
background: white;
color: #111;
}
.action-button:focus {
outline: 3px solid #1769aa;
outline-offset: 3px;
}
</style>Sayfa açıkken Tab ile düğmeye gelin; mavi odak çerçevesi görünmelidir. Fare tıklamasının düğmeye odak vermesi tarayıcı ve işletim sistemine göre değişebilir; klavye denemesini esas alın. Çerçeve görünmüyorsa CSS dosyasının veya
style bloğunun gerçekten yüklendiğini, seçicinin sınıf adıyla eşleştiğini ve tarayıcıda başka bir kuralın outline değerini ezmediğini kontrol edin.Bu örnekte
outline kullanılması, öğenin sayfa düzenindeki boyutunu değiştirmeden odak göstergesi ekler. outline: none veya outline: 0 kullanmak çerçeveyi kaldırır; yerine açıkça görülebilen başka bir gösterge eklenmeden bunu yapmak klavye gezinmesini zorlaştırır.Hangi focus seçicisi kullanılmalı?
İhtiyaca göre seçiciyi seçin:
| Seçici | Ne zaman çalışır? | Tipik kullanım |
|---|---|---|
:focus | Öğe odaklandığı her durumda | Genel ve uyumlu odak stili |
:focus-visible | Tarayıcı odak göstergesinin özellikle görünür olması gerektiğine karar verdiğinde | Klavye odaklanmasını fare tıklamasından ayırmak |
:focus-within | Öğenin kendisi veya içindeki bir öğe odaklandığında | Form grubunu ya da menü kapsayıcısını vurgulamak |
Genel bir tasarım için
:focus-visible tercih edilebilir; ancak odak stilinin her odaklanma yönteminde görünmesi gerekiyorsa :focus kullanın. Örneğin:
Kod:
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 3px solid #1769aa;
outline-offset: 3px;
}Uygularken dikkat edilecek noktalar
- Etkileşime açık öğeleri, özellikle
button,a,input,selectvetextareaöğelerini klavye ile Tab tuşuyla sırayla test edin. - Odak göstergesini arka plandan ve öğenin kendi renginden ayırt edilebilecek şekilde tasarlayın. Yalnızca renk değişimine güvenmek yerine
outline, kenarlık veya belirgin bir arka plan kullanın. - Odaklanan öğenin çevresindeki çerçevenin üstü, altı veya yanındaki içerik tarafından kesilmediğini kontrol edin. Gerekirse kapsayıcının
overflowdavranışını ve boşluklarını düzenleyin. - Özel bileşenlerde odak stilini yalnızca kapsayıcıya değil, gerçekten klavye odağını alan öğeye uygulayın. Grup da vurgulanacaksa buna ek olarak
:focus-withinkullanın. - Fareyle tıklayın, Tab ile gezin ve form alanlarına yazı girin. Bir yöntemde görünmeyen gösterge varsa seçtiğiniz
:focusveya:focus-visibledavranışını yeniden değerlendirin.
Sık yapılan hatalar
Varsayılan outline’ı kaldırmak:
outline: none yazıp yerine alternatif vermemek, odaklanan öğeyi görünmez hâle getirir.Yalnızca
:hover tasarlamak: Fareyle üzerine gelme durumu klavye odağının yerini tutmaz. Aynı etkileşimli öğeler için ayrıca focus stili tanımlayın.Yanlış öğeyi seçmek:
.menu:focus yalnızca menü kapsayıcısı odaklanabiliyorsa etkili olur. İçindeki bağlantı odaklanıyorsa .menu:focus-within veya bağlantının kendisi için a:focus gerekir.Odak ile seçili durumu karıştırmak:
:focus, öğenin o anda giriş odağında olduğunu belirtir. Bir sekmenin kalıcı olarak aktif olması veya bir seçeneğin işaretli bulunması için ayrıca uygun HTML durumu ve ayrı CSS kullanın.Kaynaklar
Sık sorulan sorular
Focus yalnızca form alanlarında mı kullanılır?
Hayır. Bağlantılar, düğmeler, özel klavye bileşenleri ve odaklanabilir diğer etkileşimli öğeler için de kullanılır. Odaklanamayan sıradan bir
div üzerinde stil tanımlamak tek başına onu klavye ile erişilebilir yapmaz.Focus stilim neden tıklamadan sonra da görünüyor?
:focus tüm odaklanma yöntemlerini kapsar; fare tıklaması da odağı öğeye taşıyabilir. Tarayıcının odak göstergesi gereken durumları ayırmasını istiyorsanız :focus-visible kullanmayı değerlendirin. Bu, yalnızca klavye kontrolü değildir; metin alanına fareyle odaklanınca da eşleşebilir.