Medya Sorgularında Hata Ayıklama: Bir Geliştirme Araçları İstek Listesi

Faydalı Alternatif Metin Yazma

bu 5. Düzey Medya Sorguları belirtimi bize CSS dosyamızdan bir sürü farklı kullanıcı tercihini algılama ve buna göre stiller sunma yeteneği getiriyor. Spesifikasyon içindeki çeşitli medya sorguları için mevcut destek karışıktır, ancak halihazırda yaygın desteğe sahip olan ve şu anda kullanımı güvenli olan bazıları vardır. Örneğin, bir kullanıcının sistem tercihlerinin karanlık moda ayarlanıp ayarlanmadığını şu komutu kullanarak tespit edebiliriz: prefers-color-scheme medya sorgusu:

@media (prefers-color-scheme: dark) {
/* Styles */
}

Veya hareket tutması veya vestibüler rahatsızlıklardan muzdarip kullanıcılar için animasyonları kısıtlayarak sitelerimizi daha kapsayıcı hale getirmek ve sistem tercihlerini buna göre değiştirmek için azaltılmış hareket tercihini tespit edin.

@media (prefers-reduced-motion: reduce) {
/* Styles */
}

Mac’te şuraya giderek azaltılmış hareketi etkinleştirebilirsiniz: Sistem Tercihleri ​​> Erişilebilirlik ve “Azaltılmış hareket” seçeneğini seçin.

İşte çok sevdiğim daha az bilinen bir medya sorgusu:

@media (hover: hover) {
/* Styles */
}

Bu, kullanıcının birincil işaretleme cihazının sayfada gezinme yeteneğini algılar. Bunu, mevcut web sitemin yeniden tasarımında, fare olmayan kullanıcılara veya dokunmatik ekranlı cihazlarla gezinenlere biraz farklı stiller sunmak için kullanıyorum.

Medya sorgularında hata ayıklama

Algılanacak kullanıcı tercihlerinin sayısı arttıkça, web sitemizin farklı ekran boyutlarında farklı görüneceğini düşünmek zorunda değiliz. Kullanıcıya nasıl göründüğünün bir dizi tercihe bağlı olabileceği düşünülebilir.

Sistem düzeyinde ayarlarımızı tekrar tekrar değiştirerek sitelerimizi test etmek zorunda kalmak yerine, tarayıcı geliştirme araçlarının çeşitli kullanıcı tercihlerini açıp kapatabilmesi harika olurdu. Firefox kısa süre önce geliştirme araçlarına bir karanlık mod geçişi ekledi. Bunu müfettişteki ‘Kurallar’ panelinin altında bulabilirsiniz — bu sitede açık ve koyu modu arasında geçiş yapmayı deneyin ve eylem halinde olduğunu görün!

Yukarıdaki özellikler için de benzer bir şey görmeyi çok isterim ve hatta özellik sorguları — bu, CSS dosyamızdaki tarayıcı desteğini test etmemize ve söz konusu özelliği desteklemeyen tarayıcılar için yedek stiller sağlamamıza olanak tanır. Bir web sitesinin sahip olabileceği tüm olası görünümleri test etmeyi kesinlikle çok daha kolay hale getirecektir! Gerçek şu ki, insanların web’e göz atabileceği pek çok farklı yol vardır ve sitenizin görünüşünün büyük ölçüde değişiklik gösterme olasılığı yüksektir. Sağlam bir başlangıç ​​noktası, esnek, anlamsal HTML ile derlemek ve oradan gitmektir.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.