scroll-behavior

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
  • webkit
  • standart
  • 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ış.

Data on support for the css-scroll-behavior feature across the major browsers from caniuse.com

Kalın sağlıcakla.

Kaynaklar

Read more

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı

Bir önceki yazımda bahsettiğim gibi CSS'in yeni özelliklerinin bazıları çığır açan özellikler, bazıları kulllanıcı deneyimini iyileştirme yönünde özellikler bazıları da lightdark() fonksiyonu gibi yazım kolaylığı sağlayan özellikler. lightdark() fonksiyonu mevcut uyumlu web yazımındaki büyük sorun olan aşağıdaki kullanımı daha anlaşılır ve düzenli hale getirmeye yarıyor. :root { color-scheme: light

By Fatih Hayrioğlu