Com os recursos de mídia de preferência do usuário, você pode estilizar experiências na Web de acordo com as preferências e necessidades específicas do usuário. Em outras palavras, os recursos de mídia de preferência permitem que você adapte as experiências do usuário às expectativas dele.
Para melhorar a experiência do usuário no seu site, siga estas três etapas:
- Descubra as possibilidades. Conheça todos os recursos de mídia de preferências do usuário.
- Estilize suas experiências na Web. Implemente, por exemplo, mudanças de cor, layout e tamanho do elemento com base nas preferências.
- Teste a interface. No DevTools, emule as preferências e teste o comportamento do site.
O DevTools oferece suporte a várias opções de emulação. Para evitar a busca e o ajuste das configurações do sistema e do navegador, todas as opções de emulação ficam em um só lugar, na guia Renderização do DevTools.
As opções de emulação das preferências do usuário incluem, entre outras:
prefers-color scheme: esquema de cores claras ou escurasprefers-contrast: contraste menor ou maiorprefers-reduced-motion: minimize ou não o movimento.prefers-reduced-data: consomem menos tráfego ou não
Para conferir uma lista abrangente de todas as opções de emulação, consulte Emular recursos de mídia CSS.
Para descobrir mais efeitos que você pode aplicar usando a guia Renderização, consulte a Visão geral da guia "Renderização".
Além disso, com o DevTools, seus recursos de teste não se limitam ao único dispositivo em que você está trabalhando. Simular dispositivos móveis com o Device Mode.