Emulasi fitur media CSS

Sofia Emelianova
Sofia Emelianova
GitHub

Emulasikan berbagai fitur media CSS dengan referensi opsi emulasi ini di tab Rendering.

Emulasikan fitur media CSS prefers-color-scheme

Fitur media CSS prefers-color-scheme menunjukkan apakah pengguna lebih memilih skema warna terang atau gelap.

Untuk mengemulasi kondisi ini:

  1. Di halaman prefers-color-scheme, buka tab Rendering.

  2. Di bagian Emulasikan fitur media CSS prefers-color-scheme, pilih salah satu opsi berikut dari menu drop-down:

    • Tidak ada emulasi
    • prefers-color-scheme:light
    • prefers-color-scheme:dark

  3. Muat ulang halaman. Contoh:

Diemulasikan lebih memilih-warna-skema:gelap

Emulasikan jenis media CSS (Aktifkan pratinjau cetak)

Kueri media cetak mengontrol tampilan halaman Anda saat dicetak.

Untuk memaksa halaman Anda ke mode pratinjau cetak:

  1. Buka tab Rendering dan di bagian Emulate CSS media type, pilih print.

    Mode pratinjau cetak

  2. Dari sini, Anda dapat melihat dan mengubah CSS, seperti halaman web lainnya. Lihat Memulai Melihat dan Mengubah CSS.

Emulasikan fitur media CSS forced-colors

Fitur media CSS forced-colors menunjukkan apakah agen pengguna mengaktifkan mode warna paksa. Contoh mode warna yang dipaksakan adalah Windows High Contrast.

Untuk mengemulasi kondisi ini:

  1. Buka tab Rendering.

  2. Di bagian Emulate CSS media feature forced-colors, pilih salah satu dari opsi berikut dari menu drop-down:

    • Tidak ada emulasi
    • forced-colors:active
    • forced-colors:none

Dengan forced-colors:active yang diemulasi:

forced-colors:active

Emulasikan fitur media CSS prefers-contrast

Fitur media CSS prefers-contrast menunjukkan apakah pengguna meminta konten web ditampilkan dengan nilai kontras yang lebih tinggi, lebih rendah, atau spesifik.

Untuk mengemulasi kondisi ini:

  1. Buka tab Rendering.

  2. Di bagian Emulate CSS media feature prefers-contrast, pilih salah satu dari opsi berikut dari menu drop-down:

    • Tidak ada emulasi
    • prefers-contrast:more
    • prefers-contrast:less
    • prefers-contrast:custom

Emulasikan fitur media CSS prefers-reduced-motion

Fitur media CSS prefers-reduced-motion menunjukkan apakah pengguna telah meminta untuk meminimalkan jumlah gerakan di halaman.

Untuk mengemulasi kondisi ini:

  1. Buka tab Rendering di demo ini lalu coba scroll untuk melihat berbagai animasi.
  2. Di bagian Emulasikan fitur media CSS prefers-reduced-motion, pilih prefers-reduced-motion:reduce.
  3. Coba scroll lagi.

Emulasikan fitur media CSS prefers-reduced-transparency

Fitur media CSS prefers-reduced-transparency menunjukkan apakah pengguna meminta untuk mengurangi efek lapisan transparan atau buram yang digunakan di perangkat.

Fitur prefers-reduced-transparency tersedia dari Chrome 118 dan memungkinkan Anda menyesuaikan konten web dengan preferensi yang dipilih pengguna untuk mengurangi transparansi di OS, seperti setelan Mengurangi transparansi di macOS.

Untuk mengemulasi kondisi ini:

  1. Buka tab Rendering.
  2. Di bagian Emulasikan fitur media CSS prefers-reduced-transparency, pilih prefers-reduced-transparency: reduce.
  3. Periksa apakah halaman ditampilkan dengan benar.

Emulasikan fitur media CSS color-gamut

Fitur media CSS color-gamut menunjukkan rentang warna yang didukung agen pengguna dan perangkat output.

Untuk mengemulasi kondisi ini:

  1. Buka tab Rendering.

  2. Di bagian Emulate CSS media feature color-gamut, pilih salah satu dari opsi berikut dari menu drop-down:

    • Tidak ada emulasi
    • color-gamut:srgb—sekitar gamut sRGB atau lebih
    • color-gamut:p3—kira-kira gamut yang ditentukan dalam Ruang Warna Display P3 atau lebih
    • color-gamut:rec2020—kira-kira gamut yang ditentukan dalam Rec. 2020 atau lebih