CSS medya özellikleri emülasyonu

Sofia Emelianova

Oluşturma sekmesindeki emülasyon seçeneklerini bu referansıyla çeşitli CSS medya özellikleri emülasyonu yapın.

CSS prefers-color-scheme medya özelliği emülasyonu

prefers-color-scheme CSS medya özelliği, kullanıcının açık renk mi yoksa koyu renk şeması mı tercih ettiğini gösterir.

Bu koşulu emüle etmek için:

1. prefers-color-scheme sayfasında, Oluşturma sekmesini açın.

2. CSS medya özelliği (prefers-color-scheme) emülasyonu bölümünde, açılır listeden aşağıdakilerden birini seçin:

   • Emülasyon yok
   • prefers-color-scheme:light
   • prefers-color-scheme:dark

3. refresh Sayfayı yeniden yükleyin. Örneğin:

CSS medya türü emülasyonu (Yazdırma önizlemeyi etkinleştir)

Yazdırma medya sorgusu, yazdırıldığında sayfanızın nasıl görüneceğini kontrol eder.

Sayfanızı baskı önizleme moduna zorlamak için:

1. Oluşturma sekmesini açın ve CSS ortam türü emülasyonu altında Yazdır'ı seçin.

   

2. Buradan, diğer tüm web sayfalarında olduğu gibi CSS'nizi de görüntüleyebilir ve değiştirebilirsiniz. CSS'yi Görüntüleme ve Değiştirmeye Başlama konusuna bakın.

CSS forced-colors medya özelliği emülasyonu

forced-colors CSS medya özelliği, kullanıcı aracısının zorunlu renkler modunu etkinleştirip etkinleştirmediğini gösterir. Zorunlu renkler moduna örnek olarak Windows Yüksek Kontrast verilebilir.

Bu koşulu emüle etmek için:

1. Oluşturma sekmesini açın.

2. CSS medya özelliği (forced-colors) emülasyonu bölümünde, açılır listeden aşağıdakilerden birini seçin:

   • Emülasyon yok
   • forced-colors:active
   • forced-colors:none

forced-colors:active emülasyonuyla:

CSS prefers-contrast medya özelliği emülasyonu

prefers-contrast CSS medya özelliği, kullanıcının web içeriğinin daha yüksek, daha düşük veya belirli bir kontrast değeriyle sunulmasını isteyip istemediğini belirtir.

Bu koşulu emüle etmek için:

1. Oluşturma sekmesini açın.

2. CSS medya özelliği (prefers-contrast) emülasyonu bölümünde, açılır listeden aşağıdakilerden birini seçin:

   • Emülasyon yok
   • prefers-contrast:more
   • prefers-contrast:less
   • prefers-contrast:custom

CSS prefers-reduced-motion medya özelliği emülasyonu

prefers-reduced-motion CSS medya özelliği, kullanıcının sayfadaki hareket miktarını en aza indirmek için istekte bulunup bulunmadığını gösterir.

Bu koşulu emüle etmek için:

1. Bu demoda Oluşturma sekmesini açın ve çeşitli animasyonları görmek için sayfayı kaydırmayı deneyin.
2. CSS medya özelliği (prefers-reduced-motion) emülasyonu bölümünde prefers-reduced-motion:reduce seçeneğini belirleyin.
3. Kaydırma işlemini tekrar deneyin.

CSS prefers-reduced-transparency medya özelliği emülasyonu

prefers-reduced-transparency CSS medya özelliği, kullanıcının cihazda kullanılan şeffaf veya yarı saydam katman efektlerini azaltmak isteyip istemediğini gösterir.

prefers-reduced-transparency özelliği Chrome 118'de kullanılabilir ve OS'de daha az şeffaflık sağlamak için web içeriğini kullanıcının seçtiği tercihe göre uyarlamanıza olanak tanır (ör. macOS'teki Saydamlığı azalt ayarı).

Bu koşulu emüle etmek için:

1. Oluşturma sekmesini açın.
2. CSS medya özelliği (prefers-reduced-transparency) emülasyonu bölümünde prefers-reduced-transparency: reduce seçeneğini belirleyin.
3. Sayfanızın düzgün görüntülenip görüntülenmediğini kontrol edin.

CSS color-gamut medya özelliği emülasyonu

color-gamut CSS medya özelliği, kullanıcı aracısının ve çıkış cihazının hangi renk aralığını desteklediğini gösterir.

Bu koşulu emüle etmek için:

1. Oluşturma sekmesini açın.

2. CSS medya özelliği (color-gamut) emülasyonu bölümünde, açılır listeden aşağıdakilerden birini seçin:

   • Emülasyon yok
   • color-gamut:srgb: Yaklaşık sRGB veya daha fazla gam
   • color-gamut:p3: Display P3 Renk Alanı veya daha fazla alanda belirtilen yaklaşık aralık.
   • color-gamut:rec2020: Yaklaşık Rec. 2020 veya sonraki sürümlerde belirtilen gama yakındır