Sugerencias para Herramientas para desarrolladores: Cómo emular las funciones de medios de preferencias del usuario de CSS con Herramientas para desarrolladores

Sofia Emelianova
Sofia Emelianova

Las funciones multimedia de preferencias del usuario te permiten diseñar experiencias web que se alineen con las preferencias y necesidades específicas del usuario. En otras palabras, las funciones multimedia de preferencias te permiten adaptar las experiencias del usuario a sus expectativas.

Para mejorar la experiencia del usuario en tu sitio web, sigue estos tres pasos:

  1. Descubre las posibilidades. Conoce todas las funciones multimedia de preferencias de los usuarios.
  2. Aplica diseño a tus experiencias web. Implementa, por ejemplo, cambios en el color, el diseño y el tamaño de los elementos según las preferencias.
  3. Prueba la IU. En DevTools, emula las preferencias y prueba el comportamiento de tu sitio web.

Herramientas para desarrolladores admite una variedad de opciones de emulación. Para ayudarte a evitar buscar y ajustar la configuración del sistema y el navegador, todas las opciones de emulación residen en un solo lugar: en la pestaña Renderización de Herramientas para desarrolladores.

La pestaña Renderización.

Las opciones de emulación de las preferencias del usuario incluyen, entre otras:

  • prefers-color scheme: Esquema de colores claro u oscuro
  • prefers-contrast: Contraste menor o mayor
  • prefers-reduced-motion: minimiza el movimiento o no.
  • prefers-reduced-data: Consumir menos tráfico o no

Para obtener una lista completa de todas las opciones de emulación, consulta Emula funciones multimedia de CSS.

Para descubrir más efectos que puedes aplicar con la pestaña Renderización, consulta la Descripción general de la pestaña Renderización.

Además, con Herramientas para desarrolladores, tus capacidades de prueba no se limitan al dispositivo único en el que estés trabajando. Puede simular dispositivos móviles con Device Mode.