Emulasi fitur media CSS

Sofia Emelianova

Emulasi berbagai fitur media CSS dengan referensi opsi emulasi ini pada tab Rendering.

Emulasikan fitur media CSS prefers-color-scheme

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

Untuk mengemulasi kondisi ini:

1. Di halaman prefers-color-skema, 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. refresh Muat ulang halaman. Contoh:

Emulasi jenis media CSS (Aktifkan pratinjau cetak)

Kueri media cetak mengontrol tampilan halaman Anda saat dicetak.

Untuk memaksa halaman Anda beralih ke mode pratinjau cetak:

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

   

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 paksa adalah Windows High Contrast.

Untuk mengemulasi kondisi ini:

1. Buka tab Rendering.

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

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

Dengan forced-colors:active yang diemulasi:

Emulasikan fitur media CSS prefers-contrast

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

Untuk mengemulasi kondisi ini:

1. Buka tab Rendering.

2. Di bagian Emulasikan fitur media CSS prefers-contrast, pilih salah satu 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 pada demo ini dan 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 transparan yang digunakan pada perangkat.

Fitur prefers-reduced-transparency tersedia mulai Chrome 118 dan memungkinkan Anda menyesuaikan konten web ke preferensi yang dipilih pengguna untuk mengurangi transparansi di OS, seperti setelan Kurangi 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 Anda 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 Emulasikan fitur media CSS color-gamut, pilih salah satu 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 Layar P3 atau lebih
   • color-gamut:rec2020—sekitar gamut yang ditentukan dalam Rec. 2020 atau lebih