Os recursos de mídia de preferência do usuário permitem que você crie experiências da Web alinhadas às preferências e necessidades específicas do usuário. Em outras palavras, os recursos de mídia de preferência permitem adaptar as experiências dos usuários às expectativas deles.
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ência do usuário.
- Dê estilo às 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.
As DevTools oferecem suporte a várias opções de emulação. Para evitar a pesquisa e o ajuste das configurações do sistema e do navegador, todas as opções de emulação estão em um só lugar, na guia Renderização nas Ferramentas do desenvolvedor.
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 mais baixo ou mais altoprefers-reduced-motion: minimiza o movimento ou nãoprefers-reduced-data: consome menos tráfego ou não
Para uma lista completa de todas as opções de emulação, consulte Emulação de recursos de mídia CSS.
Para descobrir mais efeitos que podem ser aplicados usando a guia Renderização, consulte a Visão geral da guia "Renderização".
Além disso, com as Ferramentas do desenvolvedor, seus recursos de teste não são limitados ao dispositivo em que você está trabalhando. Você pode simular dispositivos móveis com o Modo dispositivo.