Web sitenize mutlaka eklemeniz gereken 3 modern CSS özelliği

color-scheme

• Web sitesi karanlık modu desteklese bile kaydırma çubuğunun beyaz ve parlak görünmesi sorunu yaşanabilir
• color-scheme özelliğini dark light olarak ayarlamak, tarayıcıya sayfanın hem karanlık modu hem de aydınlık modu işleyebildiğini bildirir; böylece kaydırma çubuğu da koyu görünür
• Belgeye color-scheme uygulamak için meta etiketi kullanılabilir; bu da CSS yüklenmeden önce tarayıcının kullanıcının tercihlerini bilmesini sağlar
• prefers-color-scheme medya özelliğiyle birlikte kullanıldığında, kullanıcının tercihine göre değişecek kısımlar üzerinde tam kontrol sağlanabilir
• :has() seçicisi kullanılarak body üzerinde dark sınıfı olduğunda kök öğeye color-scheme özelliği uygulanabilir

text-wrap

• Başlık veya açıklamalarda satır sonları garip olabilir ve son satırda yalnızca tek bir kelime kalabilir
• text-wrap özelliğinde balance değeri kullanılarak web sitesindeki başlıklar daha dengeli hale getirilebilir
• Bu özellik tarayıcıdan bağımsızdır; modern ortamlarda iyi çalışırken eski ortamlarda da zarif biçimde geriye dönük uyumluluk sağlar

Scroll-margin

• Web sayfasında bağlantı hedefleri kullanıldığında, sabit başlık nedeniyle hedef öğenin gizlenmesi sorunu oluşabilir
• scroll-margin CSS özelliğinde scroll-margin-top değeri sabit başlığın yüksekliğine göre ayarlanarak bu sorun çözülebilir
• :is seçicisi kullanılarak h2, h3, h4 gibi birden fazla öğeye aynı işlem uygulanabilir; ex veya lh gibi birimler kullanılarak dinamik boşluklar ayarlanabilir

[amino014]

Bu gerçekten harika bir ipucu, teşekkürler.

[arfwene]

Kaydırma çubuğu güzelmiş

[xguru]

Beyaz kaydırma çubuğu oldukça göze batıyor. GeekNews'e de dark/light olarak hemen uyguladım. Kolay bir yöntem varmış.

[kuroneko]

Naver ile karşılaştırınca fark epey büyük. Naver’in bile yapamadığını (?) GeekNews başarmış...!