CSS özel medya sorguları duyarlı tasarımda yeni imkanlar sunuyor
Öne çıkanlar
- Firefox 148, @custom-media kuralını deneysel bir ayar arkasında kullanıma sundu.
- Chrome ve Safari henüz @custom-media kuralını varsayılan olarak desteklemiyor.
- Geliştiriciler geniş tarayıcı desteği sağlanana kadar konteyner stil sorgularını alternatif olarak kullanabiliyor.
Firefox 148 sürümüyle birlikte deneysel bayrak arkasında kullanıma sunulan @custom-media kuralı, CSS ortamında medya sorgularının değişkenler gibi yeniden kullanılmasını sağlıyor. Bu özellik, ekran boyutu, girdi yöntemleri ve ekran yetenekleri gibi karmaşık koşulların tek bir isim altında toplanarak CSS dosyalarında tekrar tekrar çağrılmasına imkan tanıyor. Geliştiriciler bu sayede uzun ve karmaşık koşul zincirlerini merkezi bir noktadan yönetebiliyor.
Ekran boyutlarının cihaz türünü belirlemede yetersiz kalması nedeniyle girdi mekanizmalarının tespiti giderek önem kazanıyor. Fare, dokunmatik ekran, dijital kalem veya yön tuşları gibi birincil donanım türleri, pointer ve hover özellikleri birleştirilerek özel medya kurallarıyla tanımlanabiliyor. Aynı mantık, 360 pikselden başlayan ekran genişlikleri veya P3 renk gamutu ile yüksek dinamik aralık gerektiren gerçek HDR ekranların tespiti için de kullanılabiliyor.
Özelliğin henüz tarayıcıların tamamında varsayılan olarak desteklenmemesi nedeniyle geliştiriciler geçici çözümlere yöneliyor. Firefox deneysel bir bayrak sunarken Chrome prototip aşamasında bulunuyor, Safari tarafında ise henüz somut bir adım yer almıyor. Yaygın destek sağlanana kadar geliştiriciler benzer işlevleri konteyner stil sorguları (container style queries) veya PostCSS eklentileri aracılığıyla projelerine entegre edebiliyor.
Bu özet yapay zekâ ile hazırlanmıştır; ayrıntılar ve doğrulama için orijinal kaynağa başvurun.