CSS Preferencias de usuario
Cuando trabajamos con las medias queries no solo es para adaptar estilos a diferentes tamaños de pantalla, estas también nos permiten tener en cuenta las preferencias del usuario definidas en su sistema operativo o navegador. Estas reglas especiales con @media nos permiten personalizar la experiencia según condiciones como el modo oscuro, la reducción de movimiento o el contraste elevado, respetando así las necesidades o gustos del usuario.
Veamos algunas reglas de preferencias de usuario que existen:
Preferencia (@media) | Valores posibles | Descripción |
|---|---|---|
prefers-color-scheme | light / dark | Detecta si el usuario prefiere una interfaz clara o en modo oscuro. |
prefers-reduced-motion | reduce / no-preference | Indica si el usuario prefiere reducir animaciones y transiciones para evitar molestias. |
prefers-reduced-transparency | reduce / no-preference | Sugerencia del usuario para reducir efectos de transparencia (limitado soporte). |
prefers-contrast | no-preference / high / low / more / less | Detecta si el usuario solicita mayor o menor contraste en la interfaz. |
inverted-colors (obsoleto) | none / inverted | Indica si los colores están invertidos a nivel del sistema (poco soporte, reemplazado). |
forced-colors | none / active | Detecta si el sistema fuerza una paleta de colores específica (útil para alto contraste). |
prefers-reduced-data | reduce / no-preference | Indica si el usuario desea limitar el uso de datos, útil para imágenes pesadas o video. |
update | none / slow / fast | Indica la frecuencia con la que el dispositivo puede actualizar visualmente la pantalla. |
dynamic-range | standard / high | Indica si el usuario tiene un dispositivo que soporta alto rango dinámico (HDR). |
Dark mode / Light mode
Una de las características más recurrentes en interfaces de usuario es la posibilidad de elegir un dark mode o light mode, es decir, un sistema que permita al usuario seleccionar un tema claro (generalmente con fondo blanco) o un tema oscuro (generalmente con fondo negro).
Aunque podemos hacer esto de forma manual, existe una regla @media especial denominada prefers-color-scheme donde podemos detectar si el usuario tiene preferencia por uno de estos dos valores (establecido en las opciones del sistema operativo) y ofrecer un tema con un esquema de colores apropiado.
Las reglas de preferencias de usuario se utilizan como una media query normal, indicando el valor en cuestión y aplicándole estilos CSS. A continuación, observa este ejemplo donde adaptamos los estilos de una página web según la preferencia del usuario para el modo oscuro.
1
2
3
4
5
6
7
8
9
10
11
@media (prefers-color-scheme: dark) {
:root {
--foreground-color: white;
--background-color: black;
}
}
body {
background: var(--background-color, white);
color: var(--foreground-color, black);
}
Como puedes observar, hemos establecido para toda la página, con la pseudoclase :root, las variables CSS --foreground-color y --background-color sólo para aquellos usuarios que tengan establecido esta preferencia en su sistema operativo.
Función light-dark()
Si buscas algo más rápido y práctico, tienes la función light-dark(). Esta función nos permite indicar rápidamente dos valores como parámetro y establecerá el que corresponda dependiendo de la preferencia del usuario:
1
2
3
4
body {
background: light-dark(white, black);
color: light-dark(black, white);
}
Movimiento reducido
Las interfaces modernas en la actualidad sueles apostar por diseños con animaciones y transiciones que hacen más agradables los cambios de estado y acciones específicas en una web. Sin embargo, por cuestiones de accesibilidad estas animaciones también pueden suponer molestias a usuarios que son especialmente sensibles a este tipo de estímulos.
En CSS tenemos una característica que permite notificar al desarrollador web si un usuario ha elegido en su sistema que prefiere eliminar o desactivar este tipo de animaciones o transiciones, mediante prefers-reduced-motion, la cuál tiene los valores no-preference o reduce:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@media (prefers-reduced-motion: reduce) {
:root {
--animation-timing: 0s;
}
}
.button {
box-shadow: 0 0 10px 5px #000a inset;
background: red;
border-radius: 5px;
transition: transform var(--animation-timing, 2s);
}
.button:hover {
transform: scale(1.1);
}
Ancho de banda reducido
De la misma forma que en ejemplos anteriores, el usuario puede preferir usar su ancho de banda disponible de forma reducida, evitando así descargas que consuman gran cantidad de datos, con su correspondiente gasto que en ciertas situaciones puede ser limitado.
La característica prefers-reduced-data nos permite recuperar del sistema o navegador del usuario la opción reduce o no-preference para saber que preferencia tiene seleccionada. De esta forma podemos crear estilos donde se establezcan imágenes de bajo tamaño, o incluso utilizar fondos con gradientes o colores sólidos en lugar de imágenes.
1
2
3
4
5
6
7
8
9
@media(prefers-reduced-data: reduce) {
:root {
--preferred-background: linear-gradient(120deg, steelblue, blue, black);
}
body {
background: var(--preferred-background, url(/assets/background.png));
}
}
Efectos de transparencia reducidas
De la misma forma que las preferencias anteriores, podemos indicar en nuestro sistema que preferimos interfaces de usuario donde no se utilicen transparencias o elementos traslúcidos, ya que muchas veces dificultan la visión o lectura, y puede resultar molestoso.
Con esta media query, deberíamos poder modificar la opacidad de los elementos para retirar la opacidad. Como los ejemplos anteriores, se recomienda el uso de variables para que sea más sencillo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@media (prefers-reduced-transparency: reduce) {
:root {
--opacity: 100%;
}
body {
background: linear-gradient(200deg, black, peru, hotpink);
}
.container {
background: rgb(0% 0% 100% / var(--opacity, 15%));
padding: 0.5rem 2rem;
}
}
Adaptar nuestros estilos a las preferencias del usuario no solo es una buena práctica, se trata de ser más empáticos con los usuarios. La accesibilidad no se trata solo de cumplir reglas, sino de construir experiencias que se sientan cómodas, inclusivas y pensadas para todos. Pequeños gestos, como respetar el modo oscuro o reducir las animaciones, pueden marcar una gran diferencia en la experiencia de quien visita nuestro sitio.