CSS medya özellikleri emülasyonu

Sofia Emelianova
Sofia Emelianova
GitHub

Oluşturma sekmesindeki emülasyon seçenekleri referansıyla çeşitli CSS medya özelliklerini taklit 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. Sayfayı yeniden yükleyin. Örneğin:

Emulated prefers-color-scheme:dark

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ünü taklit et bölümünde basılı'yı seçin.

    Baskı önizleme modu

  2. Buradan, diğer web sayfalarında olduğu gibi CSS'nizi 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 renk modu örneği olarak Windows Yüksek Kontrast verilebilir.

Bu durumu taklit etmek için:

  1. Oluşturma sekmesini açın.

  2. CSS medya özelliğini taklit et forced-colors 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 taklit edildiğinde:

forced-colors:active

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 gösterir.

Bu durumu taklit etmek için:

  1. Oluşturma sekmesini açın.

  2. CSS medya özelliğini taklit et prefers-contrast 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 bir sayfadaki hareket miktarını en aza indirme isteğinde bulunup bulunmadığını belirtir.

Bu durumu taklit etmek için:

  1. Bu demoda Oluşturma sekmesini açın ve çeşitli animasyonları görmek için 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. Ekranı 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 azaltmasını isteyip istemediğini gösterir.

prefers-reduced-transparency özelliği Chrome 118'den itibaren kullanılabilir ve web içeriğini, işletim sisteminde azaltılmış şeffaflık için kullanıcı tarafından seçilen tercihe (ör. macOS'teki Şeffaflığı azalt ayarı) 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 belirtir.

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ı