:focus-visible
(Aynı zamanda “Odak-Belirtilen” sözde sınıfı olarak da bilinir) sözde sınıfı stil öğeleri buna bir yerli CSS yoludur:
- Mısın odak
- Odağı göstermek için görünür bir göstergeye ihtiyacınız var (buna daha sonra değineceğiz)
:focus-visible
şuna benzer şekilde kullanılır :focus
: şu anda odakta olan öğeye dikkat çekmek için.
.element:focus-visible ( background-color: pink; /* Something to get the user's attention */ )
:focus-visible
CSS4 Seçiciler çalışma taslağının bir parçasıdır. Mozilla, benimsenmeden önce :-moz-focusring
, işlevselliği Firefox'a resmi bir spesifikasyonun önüne getirmek için sözde sınıfı tanıttı .
Neden ihtiyacımız var: odak-görünür mü?
:focus
Bunu zaten yapmıyor mu ? Evet, ama sorunlar var. En net örnek, bazı JavaScript'i çalıştıran bir düğmedir. Görüntüler arasında geçiş yapmak için düğmeler içeren bir görüntü karuseli düşünün. Diyelim ki tabindex
düğmelere bir klavye ile seçilebilmeleri için bir eklediniz , ancak karuseli farenizle test etmeye gittiğinizde, muhteşem düğmenizin etrafında şu ana hatları görüyorsunuz:
Bunu yapmak isteyeceğinizden değil (erişilebilirlik endişeleri için), ama bundan nasıl kurtulacaksınız? :focus
Sözde sınıfı ayarlayarak :
.next-image-button:focus ( outline: none; )
Artık düğmeniz odakta harika görünüyor, ancak bir kullanıcı düğmenize fare olmadan değil klavye yerine sekme geldiğinde ne olur? Nerede sektiklerini göremiyorlar! Bu bir sorun çünkü artık hangi düğmenin klavye eylemlerine odaklandığını anlamanın bir yolu yok:
Mavi odak çerçevesini kaldırıp yine de site tasarımıyla daha uyumlu bir odak göstermenin bir yolu var mı? Elbette, sayesinde pastanızı alıp yiyebilirsiniz :focus-visible
!
:focus-visible
Yalnızca kullanıcının odak noktasının nerede olduğunu görmesine yardımcı olacak görsel bir gösterge istediğinizde geçerlidir. Diğer bir deyişle, taslağı :focus
can gibi gizleyemez . (Tasarımla harmanlayarak olabilirdi, ama her neyse.) İkisinin bu anlamda birlikte kullanılması gerekiyor. Düğmemize bir tane ekleyelim:
.next-image-button:focus ( outline: none; ) .next-image-button:focus-visible ( outline: 3px solid blanchedalmond; /* That'll show 'em */ )
Şimdi, tuşa gitmek için klavye kullanıldığında, odağın görsel bir göstergesi olacaktır:
Tarayıcılar bir şeyin odağın görünür olduğunu nasıl belirler?
Tarayıcılara, bu sözde seçicinin belirli bir öğeye kendi buluşsal yöntemlerini kullanarak ne zaman uygulanması gerektiğini belirlemek için biraz alan verilir. Önce CSS4 çalışma taslağına bakalım, sonra onu parçalamaya çalışacağız. Spesifikasyonlardan:
- Bir kullanıcı her zaman görünür bir odak göstergesini görmek için bir tercih belirtmişse (bir sistem tercihi veya bir tarayıcı ayarı gibi), kullanıcı aracısı bunu şunlara sahip olmalıdır: odak-görünür her zaman etkin öğeyle diğerlerinden bağımsız olarak eşleşir faktörler. (Kullanıcı aracısının yazar stillerine bakılmaksızın kendi odak göstergesini göstermesi başka bir seçenek olabilir.)
- Klavye girişini destekleyen herhangi bir öğe (bir giriş öğesi veya fiziksel bir klavye yoksa odakta gösterilecek bir sanal klavyeyi tetikleyebilecek diğer öğeler gibi) her zaman eşleşmelidir: odaklandığında odak görünür.
- Kullanıcı klavye aracılığıyla sayfayla etkileşime girerse, şu anda odaklanılan öğe eşleşmelidir: odak-görünür (yani klavye kullanımı, bu sözde sınıfın eşleşip eşleşmediğini değiştirebilir: odağı etkilemese bile).
- Kullanıcı, bir işaretleme cihazı aracılığıyla sayfayla etkileşime girerse, odak, kullanıcı girişini desteklemeyen yeni bir öğeye taşınırsa, yeni odaklanan öğe eşleşmemelidir: odak görülebilir.
- Etkin öğe eşleşirse: odak görünür ve bir komut dosyası odağın başka bir yere taşınmasına neden olursa, yeni odaklanan öğe eşleşmelidir: odak görünür.
- Tersine, eğer aktif öğe eşleşmezse: odak görünür ve bir komut dosyası odağın başka bir yere taşınmasına neden olursa, yeni odaklanan öğe eşleşmemelidir: odak görünür.
Bu biraz soyutsa, işte bir yorum:
Durum | Focus-görünür geçerli mi? |
---|---|
Kullanıcı, odağın her zaman bir ayar aracılığıyla görünür olmasını istediklerini söylüyor | Evet |
Bir öğenin çalışması için klavyeye ihtiyacı vardır (metin gibi) | Evet |
Kullanıcı bir klavye ile geziniyor | Evet |
Kullanıcı bir işaretleme cihazıyla geziniyor (dokunmatik ekranda fare veya parmak gibi) | Hayır |
Bir komut dosyası, odağın bir :focus-visible öğeden başka bir öğeye taşınmasına neden olur | Evet |
Bir komut dosyası, odağın :focus-visible öğe olmayan bir öğeden başka bir öğeye geçmesine neden olur | Hayır |
Tekrar etmekte fayda var: Bunlar yönergelerdir ve tarayıcılar, neyin seçileceği konusunda kendi kararlarını verebilirler :focus-visible
. Açıkça klavye gezinme durumunun öngörülebilir bir şekilde ele alınacağını bekleyebiliriz, ancak tarayıcılar, diğer herhangi bir özellik gibi belirlemeyi kendileri yapma yeteneğine sahiptir.
Tarayıcı desteği
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
Krom | Firefox | IE | Kenar | Safari |
---|---|---|---|---|
86 | 4 * | Hayır | 86 | Hayır |
Mobil / Tablet
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
88 | 85 | 81 | Hayır |
Ek bilgi
- CSS Seçiciler 4 Spesifikasyon
- Bugzilla Bilet # 1445482
- WebKit Bilet # 185859
- WICG
:focus-visible
polyfill açıklaması - Patrick H. Lauke açıklaması ve kullanımı
:focus-visible
- Odak Durumlarına Odaklanma
İlgili seçiciler
15 Şubat 2021'de Almanak: odak
textarea:focus ( background: pink; )
: görünür odak Chris Coyier