Geliştirici Araçları İpuçları: Geliştirici Araçları ile CSS kullanıcı tercihi medya özelliklerini emüle etme

Sofia Emelianova
Sofia Emelianova

Kullanıcı tercihi medya özellikleri, web deneyimlerini kullanıcının özel tercihlerine ve ihtiyaçlarına uygun şekilde şekillendirmenize olanak tanır. Diğer bir deyişle, tercih medya özellikleri kullanıcı deneyiminizi, kullanıcılarınızın beklentilerine göre uyarlamanıza olanak tanır.

Aşağıdaki üç adımı uygulayarak web sitenizin kullanıcı deneyimini geliştirebilirsiniz:

  1. Olasılıkları keşfedin. Tüm kullanıcı tercihi medya özelliklerini öğrenin.
  2. Web deneyimlerinizin stilini belirleyin. Örneğin, tercihlere dayalı renk, düzen ve öğe boyutu değişiklikleri uygulayın.
  3. Kullanıcı arayüzünü test edin. DevTools'da tercihleri emüle edin ve web sitenizin nasıl davrandığını test edin.

Geliştirici Araçları, çeşitli emülasyon seçeneklerini destekler. Tüm emülasyon seçenekleri, sistem ve tarayıcı ayarlarını arayıp belirlemekten kaçınmanıza yardımcı olması için tek bir yerde, Geliştirici Araçları'nda Oluşturma sekmesinin altında bulunur.

Oluşturma sekmesi.

Kullanıcı tercihlerinin emülasyon seçenekleri aşağıdakileri içerir ancak bunlarla sınırlı değildir:

  • prefers-color scheme: Açık veya koyu renk şeması
  • prefers-contrast: daha düşük veya daha yüksek kontrast
  • prefers-reduced-motion: Hareketi en aza indirin veya en aza indirin
  • prefers-reduced-data: Daha az trafik kullanın veya kullanmayın

Tüm emülasyon seçeneklerinin kapsamlı listesi için CSS medya özelliklerini emüle etme konusuna bakın.

Oluşturma sekmesini kullanarak uygulayabileceğiniz daha fazla efekt keşfetmek için Oluşturma sekmesine genel bakış konusuna bakın.

Ayrıca Geliştirici Araçları sayesinde test özellikleriniz, üzerinde çalıştığınız tek cihazla sınırlı değildir. Cihaz Modu ile mobil cihazları simüle edebilirsiniz.