Daha önce bu konuda bir yazı yazmıştım. CSS İle Özel Kaydırma Çubuğu Yapmak O yazıda yazdığım özelliğin Firefox desteği yoktu, Internet Explorer’un kısıtılı desteği vardı. Şimdi Firefox yeni sürümüyle (64) birlikte standartlara da giren yeni kaydırma çubuğu özelliklerini destekliyor.

Çok güzel haber ancak daha yetenekli ::-webkit-scrollbar özellikleri varken niye daha yeteneksiz kaydırma çubuğu özellikleri standartlaştı anlayabilmiş değilim. Standartlara girmiş olması bu yönde gelişmeler olacağını gösteriyor. “CSS Scrollbars Module Level 1” ismiyle standartlaştı. Yani daha 1. seviye muhtemelen 2. veya 3. seviyede ::-webkit-scrollbar yeteneklerine kavuşur.

Peki standartta neler var?

İki temel özellik var. scrollbar-color ve scrollbar-width

scrollbar-color

Kaydırma çubuğu tutamacı ve yolunun rengini belirlediğimiz özellik.

Yapısı : scrollbar-color: [ deger ]
Aldığı Değerler : auto | dark | light | renk{2}
Başlangıç değeri: auto
Uygulanabilen elementler: overflow uygulanan tüm elemanlar
Kalıtsallık: Var

Bu özellik iki renk değeri alıyor birinci renk kaydırma çubuğu tutamacının rengi ikinci renk ise kaydırma çubuğu yolunun rengini tanımlıyor.

Mozilla’nın verdiği örneği inceleyelim. Örnek şu an sadece Firefox 64 sürümünde görünüyor.

ilk renk mor (rebeccapurple) kaydırma çubuğu tutamacının rengi ikinci renk yeşil (green) kaydırma çubuğu yolunun rengidir.

Diğer değerleri (dark ve light) denediğimde çalışmadı.

scrollbar-width

Bu özellik kaydırma çubuğu kalınlığını belirlememizi sağlıyor.

Yapısı : scrollbar-width: [ deger ]
Aldığı Değerler : auto | thin | none | değer
Başlangıç değeri: auto
Uygulanabilen elementler: overflow uygulanan tüm elemanlar
Kalıtsallık: Yok

auto, thin ve none değerleri çalışırken elle verdiğim değerleri uygulamadı Firefox. Tarayıcının böyle bir hatası olabilir.

Sonuç

Kaydırma çubuğu özelliştirme konusunda ::-webkit-scrollbar özellikleri ve bu standardı kullanarak neredeyse tüm tarayıcıların desteğini sağlamış olduk. (IE11 ve Edge bittiğine göre)

Bence yetersiz ama güzel bir gelişme. Takipteyiz W3C :)

Kaynaklar

Sayfa planlama sihirbazı grid-template-areas

CSS Izgara ile sihirbazlık yapıyoruz. grid-template-areas ve grid-area özelliklerini açıklıyoruz. Devamını oku

SVG ikonlarımıza gölge vermek

05 April 2019 tarihinde yayınlandı.