Erişilebilirlik önemli bir konu her ne kadar bizim memlekette önemsenmese (ben de dahil) de. Erişilebilir web siteleri hazırlarken genelde :focus sözde sınıfı tanımlarından yararlanıyoruz. Tabi zamanla bu tanımın yetersiz kaldığını gören W3C CSS ekibi bu tanımı destekleyecek ve özelliklerini paylaşacak diğer tanımlar çıkardılar. Daha önce focus-visible tanımından bahsetmiştim. Bu makalede de bir diğer odaklanma tanımı olan :focus-within tanımından bahsedeceğim.

:focus-within tanımı odaklanılmış çocuk(child) ögeye sahip olan ebeveyne (parent) tanımlama yapmamızı sağlayan bir ebeveyn(parent) seçicidir.

Her ne kadar ebeveyn seçici olarak :has tanımı akıllara geliyorsa da :focus-withinde bir ebeveyn seçicidir.

Konuya dair örnekler hep aynı ancak anlaşılması bakımından bilgilendirici bir örnek olduğu için ben de aynı örneği vereceğim. Forum alanı içindeki <input>‘lara odaklanıldığında tüm form alanını gazinoya (Er gazinosu) çeviren bir kod yazalım. :)

Kodda görüldüğü gibi input alanına odaklandığımızda input’un ebeveyni olan form alanının ardalan rengini değiştirdik.

form:focus-within {
  background-color: var(--focus-bg-color);
  box-shadow: inset 0 0 60px whitesmoke, inset 20px 0 80px #f0f,
    inset -20px 0 80px #0ff, inset 20px 0 300px #f0f, inset -20px 0 300px #0ff,
    0 0 50px #fff, -10px 0 80px #f0f, 10px 0 80px #0ff;
}

David Walsh bu özelliği anlatırken :hover sözde sınıfı klavye ve ekran okuyucularda çalışmıyor onlar için :hoveryerine üretilmiş bir sözde sınıf demiş. Aşağıdaki tablo örneği bu benzetmeyi doğruluyor. :hoverın tüm kullanıldığı yerleri kapsar mı bilemedim.

2007’de yazdığım makaledeki tabloya :focus-within ekledimCSS ile Tabloları şekillendirmek

tbody tr:hover td,
tbody tr:focus-within td {
  background: #333;
  color: #fff;
}

Şu eklemede görüldüğü gibi :hover ile satır renklendirme görünümünü :focus-within ile tabla gezerken de sağlamış olduk.

Bir başka örnek; hamburger menü örneği. Daha önceden bu işi :checked sözde sınıfı yardımı ile yapıyorduk. :focus-within sözde sınıfı daha az eleman ile yapmakta güzel.

Yukarıdaki örnekte işin pük noktası

nav:focus-within .dl-menu {
  transform: none;
}

Bu kısımda nav içindeki bir elemana odaklanıldığında yine nav içinde bulunan menüyü aç diyoruz. Aynı şekilde menü arkasındaki bg içinde benzer bir gizle göster kodu yazıyoruz.

Aslında bu tip işler için tasarlanmayan :focus-within sözde sınıfını bu ihtiyaçlarımız için de kullanabilecek olmamız güzel.

Tarayıcı desteği %98.5 seviyesinde.

Kalın sağlıcakla.

Kaynaklar

Dün twitter’da aşağıdaki konuyu tartışırken

Konu Uğur‘un da cevabıyla dosya yükleme elemanına geldi.

Ben de çözüm için ::file-selector-button pseudo elemanından bahsettim. Uğur tam ikna olmadı. Bence tam olmasa da çözüm olması güzel. :) Bu konuyu yazayım da bir yerde not olarak kalsın dedim.

Dosya yükleme butonuna stil verme

Dosya upload işini görmek için; input elementine file özniteliği vermemiz yeterli.

<input type="file" />

Bu kadar kolay. Ancak buradaki sorunumuz bu tanım ile gelen buton ve yazıya müdahele edip stillendiremiyorduk. Standart şeklideki kodumuz aşağıdaki gibi görünüyor.

Böyle olunca bu butonu görünmez yapıp kendi istediğimiz stili uyguluyorduk.

Yakın zamanda gelen ::file-selector-button pseudo elemanı sayesinde artık butona stil verebiliyoruz.

Şurada gördüğüm bir örnek dosya yükleme örneğini yapayım dedim.

::file-selector-button pseudo elemanının tarayıcı desteği de gayet iyi.

Kullandığımız elemanların (şimdilerde daha sık kullandığımız adıyla komponent) HTML eleman olarak kodlamak bize birçok bakımdan avantaj sağlıyor. Tabi HTML elemanlarının bize yeterince stillerini değiştirme imkanı vermesi önemli yoksa yine alternatif çözüm yollarına başvurmak zorunda kalırız.

Kalın sağlıcakla.

Kaynaklar

Bir başka Safari bekleyen özellikte daha birlikteyiz. Şöyle bir avantajımız var ki Safari kullanıcıları sistemlerini ve dolayısıyla tarayıcılarını hızlı güncellediği için çok beklemiyoruz.

W3C geliştiricileri uzun süre scroll stili ve işlemleriyle alakalı gelişmelere uzak kaldı. Son yıllarda ise bu konuda olabildiğince iyi gelişmeler oldu. Gerek scroll stilini belirlemede gerekse scroll ile yapılan işlemlerde gayet güzel gelişmeler yaşıyoruz.

  • Scroll stillendirme işleri
  • Scroll davranışını kontol edebilme (overscroll-behavior)
  • Yumuşak scroll hareketi imkanı (scroll-behavior)
  • Belirli alanlara odaklı scroll geliştirme imkanı (scroll-snap)
  • En son scroll konumu zamanına göre işlemler yapabilme imkanı sağlayan (scroll-timeline)

Biz geliştiriciler şimdiye kadar scroll işlemlerimizi alternatif yöntemlerle çözüyorduk. Bu özellikler çıktıktan sonra artık standart ve basit bir şekilde scroll işlemlerimizi yabiliyoruz.

scroll-behavior özelliği sayfa içindeki bir alana bir bağlantı yaptığımızda kullanıcının o alana giderken scroll hareketinin nasıl gerçeleşmesi gerektiğini belirlememiz sağlar.

Yukarıdaki örnekte normal davranışı görebilirsiniz. Yukarıdaki linklere tıkladığımızda sayfa içi ilgili alana giderken direk herhangi bir scroll animasyonu olamadan gider. Aynı şekilde yukarı oka tıklayınca sayfanın en üstüne yine herhangibir scroll animasyonu olmadan gider.

Bu koda sadece bir satır CSS kodu ekleyerek

html {
  scroll-behavior: smooth;
}

ilgili alana scroll’un yumuşak bir şekilde gitmesini sağlayabiliyoruz.

Burada dikkat edilmesi gereken bir konu; eğer bu tanımın tüm sayfayı etkilemesini istiyorsak html elementine tanımlamak gerekiyor. Sadece bir kapsayıcının içinde uygulanmasını istiyorsak ilgili kapsayıcıya bu tanımı yapmamız yeterli.

Benzer şekilde yatay scroll işlerinde de bize yumuşak bir geçiş sağlıyor. Örneğin caraousel komponentini sadece CSS ile yapmak mümkün. Süper değil mi? Aha burda yapılmışı da var. Can I create Netflix’s video carousel with CSS only?

Javascript ile bu işi yapmak istediğimizde

window.scrollTo({
  top: 1000,
  behavior: 'smooth'
})

şeklinde tanımlama yapabiliyoruz.

Bu özelliğin erişilebilirlik kısmı da önemli. prefers-reduced-motion medya sorgusunda şöyle bir tanım yapmak

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

Animasyon istemeyen kullanıcılara zorla animasyon uygulamaktan kurtarır bizi.

Tarayıcı desteği konusunda gayet iyi nokta bu özellik. Tarayıcı desteği %95 seviyelerine ulaşmış.

Tarayıcı Desteği

Chrome explorer Firefox
+ + +

Mobil Tarayıcılar

Chrome Mobil Safari Samsung Internet
+ + +

Kalın sağlıcakla.

Kaynaklar