CSS medya sorguları CSS3’ün bir parçası olarak ortaya çıktı. Cihaza veya cihazın özelliklerine göre CSS’nizi değiştirmenize izin vermektedir. Sayfanızın görünümünü ekranınızın genişliğine göre ayarlamak için muhtemelen bunları zaten kullanıyorsunuz. Bununla birlikte, genellikle göz ardı edilen başka birçok fonksiyonu vardır.
Tipik bir medya sorgusu şuna benzer:
@media screen and (min-width: 1200px){
...
}Bununla birlikte, CSS’nin 1200px veya daha büyük bir ekranda görüntülenip görüntülenmeyeceğini kontrol etmekten çok daha fazlasını yapabilirsiniz.
Sayfanın yazdırılıp yazdırılmadığını da görebilirsiniz:
@media print{
// Yazıcı çıktısı için optimize.
}Pencere yönünü(oryantasyonu) kontrol edebilirsiniz:
@media (orientation: landscape){
// Ekranı yatay olarak çevrilmiş cihaz için optimize.
}Cihazın hover/üzerine gelme desteğini kontrol edebilirsiniz:
@media hover{
// :hover izin veren cihaza göre optize.
}Cihazın üzerine gelebilen bir giriş mekanizmasına sahip olup olmadığını bile kontrol edebilirsiniz:
@media (any-hover: hover){
// hover CSS optimize.
}
@media (any-hover: none){
// Hover yok optimize.
}Telefon desteği için bir başka harika medya sorgusu, bir aygıtta bir işaretçinin olup olmadığını ve işaretçinin ne kadar iyi olduğunu söylemenizi sağlayan herhangi bir işaretçi olabilir:
@media (any-pointer: fine){
// Ufak işaretçi.
}
@media (any-pointer: coarse){
// büyük işaretçi.
}Web olgunlaştıkça, web’in tüm kullanıcılara hitap etmesi gerektiğini gördük. Medya sorguları bunu yapmanın harika bir yoludur. Kullanıcı deneyiminizi iyileştirmenin bazı ek yolları aşağıda verilmiştir.
Harekete duyarlı kullanıcılar bilgisayarlarında bunu devre dışı bırakabilir:
@media(prefers-reduced-motion: reduce){
// dikkat dağıtıcı animasyonları engelle.
}Ve son olarak, tarayıcıda JavaScript etkin olup olmadığını bile görebilirsiniz:
@media(scripting: none){
// JavaScript kapalı.
}Gördüğünüz gibi, muhtemelen varlığından haberdar olmadığınız birçok harika medya sorgusu var. Umarım bunları bir sonraki projenizde kullanabileceksiniz. Beni Twitter’dan takip edebilir ve Linkedin’den bağlantı olarak ekleyebilirsiniz.
Kaynaklar: