Fitur media preferensi pengguna memberi Anda kemampuan untuk menata gaya pengalaman web yang sesuai dengan preferensi dan kebutuhan spesifik pengguna. Dengan kata lain, fitur media preferensi memungkinkan Anda menyesuaikan pengalaman pengguna dengan harapan pengguna.
Anda dapat meningkatkan pengalaman pengguna situs web Anda dengan melakukan tiga langkah berikut:
- Temukan berbagai kemungkinan. Pelajari semua fitur media preferensi pengguna.
- Mengatur gaya pengalaman web Anda. Implementasikan, misalnya, perubahan warna, tata letak, dan ukuran elemen berdasarkan preferensi.
- Menguji UI. Di DevTools, emulasikan preferensi dan uji perilaku situs Anda.
DevTools mendukung berbagai opsi emulasi. Untuk membantu Anda menghindari penelusuran dan penyesuaian setelan sistem dan browser, semua opsi emulasi berada di satu tempat, yaitu di bawah tab Rendering di DevTools.
Opsi emulasi preferensi pengguna mencakup, tetapi tidak terbatas pada:
prefers-color scheme—skema warna terang atau gelapprefers-contrast—kontras lebih rendah atau lebih tinggiprefers-reduced-motion—meminimalkan gerakan atau tidakprefers-reduced-data—menghabiskan lebih sedikit lalu lintas atau tidak
Untuk daftar lengkap semua opsi emulasi, lihat Mengemulasi fitur media CSS.
Untuk menemukan efek lainnya yang dapat Anda terapkan menggunakan tab Rendering, lihat Ringkasan tab Rendering.
Selain itu, dengan DevTools, kemampuan pengujian Anda tidak terbatas pada satu perangkat yang sedang Anda kerjakan. Anda dapat Menyimulasikan perangkat seluler dengan Mode Perangkat.