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

Tarayıcıların bazı özellikleri bazı projelerimizde sorunlara neden olabiliyor. Bunlardan birisi de tarayıcıların dil hatalarını algılayıp sorunlu gördüklerinin altını çizmesi.

Bu özelliği kapatma kodunun olduğunu bilmiyordum. Dün araştırınca kapatmak için bir HTML özniteliği olduğunu öğrendim.

Bir örnek yapalım. İlgili paragrafa fare imleci ile tıkladığımızda ilk paragrafta hataları gösterirken ikinci pragrafta göstermiyor.

Çok basit bir öznitelik eklemesi ile yapabiliyoruz bu işi spellcheck="true" kontrolü aktifleştiriyor. spellcheck="flase" pasifleştiriyor.

ìnput ve textareagibi giriş yapılan alanlarda uygulandığı gibi. contenteditable özniteliği uygulanmış alanlarda da çalışıyor.

Tarayıcı desteği de iyi. Tüm tarayıcılar destekliyor. Benim testlerimde Firefox tüm alanlarda false gibi davranıyor.

Kaynaklar

Çalıştığım projede(vault.live) animated.css kütüphanesi kullanılıyor. Bir sorun ile kaşılaştık. animasyon uygulanan kutularda açılan menüler diğer kutuların altında kalıyordu.

Bir arama sonucu stackoverflow.com’da cevabını buldum.

.animated {
	animation-duration: 1s;
	animation-fill-mode: both;
}

animation-fill-mode‘un forwards değeri ve bu değeri kapsayan both değerlerinin tanımlandığı durumlarda sorun oluyor. initial olarak tanımlamak sorunu giderdi.

.animated {
	animation-duration: 1s;
	animation-fill-mode: initial;
}

Benzer bir sorunla karşılaşırsanız aklınızda oldun.

Sağlıcakla kalın.

Kaynak