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
4 yorum
Bu gerçekten harika bir ipucu, teşekkürler.
Kaydırma çubuğu güzelmiş
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ış.
Naver ile karşılaştırınca fark epey büyük. Naver’in bile yapamadığını (?) GeekNews başarmış...!