CSS medya özellikleri emülasyonu

Sofia Emelianova

Oluşturma sekmesinde emülasyon seçeneklerini bu referansla kullanarak çeşitli CSS medya özelliklerini emüle edin.

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

prefers-color-scheme CSS medya özelliği, kullanıcının açık veya koyu renk şemasını tercih edip etmediğini gösterir.

Bu durumu taklit etmek için:

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

2. CSS medya özelliğini taklit et prefers-color-scheme 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ünü taklit et (Yazdırma önizlemeyi etkinleştir)

Baskı medyası sorgusu, sayfanızı yazdırdığınızda nasıl görüneceğini kontrol eder.

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

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

   

2. Buradan diğer 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ştirme Başlangıç Kılavuzu başlıklı makaleyi inceleyin.

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 belirtir. Zorunlu renkler moduna örnek olarak Windows Yüksek Kontrast verilebilir.

Bu durumu taklit etmek için:

1. Oluşturma sekmesini açın.

2. CSS emülasyonu medya özelliği forced-colors altında, 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 durumu taklit etmek için:

1. Oluşturma sekmesini açın.

2. CSS emülasyonu medya özelliği prefers-contrast altında, 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 bir sayfadaki hareket miktarını en aza indirme isteğinde bulunup bulunmadığını belirtir.

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

1. Bu demoda Oluşturma sekmesini açın ve çeşitli animasyonları görmek için ekranı kaydırmayı deneyin.
2. CSS prefers-reduced-motion medya özelliğini emülasyonla çalıştır bölümünde prefers-reduced-motion:reduce'ı seçin.
3. Tekrar kaydırmayı 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 azaltmayı isteyip istemediğini gösterir.

prefers-reduced-transparency özelliği, Chrome 118 sürümünden itibaren kullanıma sunulmuştur ve işletim sisteminde daha az şeffaflık sağlamak için web içeriğini (macOS'teki Şeffaflığı azalt ayarı gibi) kullanıcı tarafından belirlenen tercihe uyarlamanıza olanak tanır.

Bu durumu taklit etmek için:

1. Oluşturma sekmesini açın.
2. CSS prefers-reduced-transparency medya özelliğini emülasyonla çalıştır bölümünde prefers-reduced-transparency: reduce'ı seçin.
3. Sayfanızın doğru şekilde gösterilip gösterilmediğ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 durumu taklit etmek için:

1. Oluşturma sekmesini açın.

2. CSS medya özelliğini taklit et color-gamut bölümünde, açılır listeden aşağıdakilerden birini seçin:

   • Emülasyon yok
   • color-gamut:srgb: yaklaşık sRGB gamutu veya daha fazlası
   • color-gamut:p3: Yaklaşık olarak Display P3 Renk Alanı'nda belirtilen gamut veya daha fazlası
   • color-gamut:rec2020: Yaklaşık olarak Rec. 2020'de belirtilen gamut veya daha fazlası