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:
- Di halaman prefers-color-skema, buka tab Rendering.
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
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:
Buka tab Rendering dan di bagian Emmulate CSS media type, pilih print.
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:
- Buka tab Rendering.
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:
- Buka tab Rendering.
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:
- Buka tab Rendering pada demo ini dan coba scroll untuk melihat berbagai animasi.
- Di bagian Emulasikan fitur media CSS
prefers-reduced-motion
, pilihprefers-reduced-motion:reduce
. - 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:
- Buka tab Rendering.
- Di bagian Emulasikan fitur media CSS
prefers-reduced-transparency
, pilihprefers-reduced-transparency: reduce
. - 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:
- Buka tab Rendering.
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 lebihcolor-gamut:p3
—kira-kira gamut yang ditentukan dalam Ruang Warna Layar P3 atau lebihcolor-gamut:rec2020
—sekitar gamut yang ditentukan dalam Rec. 2020 atau lebih