Dentro del apartado de media queries disponemos de una mecánica para detectar ciertas preferencias de usuario, o lo que es lo mismo, si el usuario ha indicado algunas preferencias por ciertos detalles en su dispositivo, sistema operativo o navegador que utiliza.
| Tipo de preferencia | Valores | Detecta si el usuario tiene preferencia por... |
|---|---|---|
prefers-color-scheme |
dark | light | ...utilizar un esquema de colores oscuro o claro. |
prefers-reduced-motion |
reduce | no-preference | ...evitar animaciones o transiciones. |
prefers-reduced-data |
reduce | no-preference | ...evitar descargas de arhivos pesados. |
Echemos un vistazo detenidamente a cada una de ellas:
Dark mode / Light mode
Por ejemplo, una de las características más recurrentes en interfaces de usuario es la posibilidad de elegir un dark mode o dark theme, 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 actuar en consecuencia. Los valores que es posible indicar son light o dark:
@media (prefers-color-scheme: dark) {
:root {
--background-color: #333;
--foreground-color: #eee;
}
}
@media (prefers-color-scheme: light) {
:root {
--background-color: #eee;
--foreground-color: #111;
}
}
body {
background-color: var(--background-color);
color: var(--foreground-color);
}El soporte de dicha propiedad es bastante bueno en la actualidad, incluso en dispositivos móviles, por lo que se puede utilizar con seguridad.
Movimiento reducido
Las interfaces modernas en la actualidad suelen 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:
@media (prefers-reduced-motion: reduce) {
:root {
--preferred-animation: soft;
}
}
.animated {
animation: var(--preferred-animation, hard) 2s linear infinite;
}En el ejemplo anterior, utilizamos la variable --preferred-animation para seleccionar el tipo de animación preferida. Por defecto, se utilizará hard, pero en el caso de tener esta característica activada, la animación utilizada será soft. De la misma forma, también podemos utilizar la propiedad animation-name a none, para desactivar las animaciones por completo.
El soporte de esta característica también es bastante bueno, por lo que puede ser utilizado de forma segura:
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 un ancho de banda límitado.
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 gradientes o colores sólidos en lugar de imágenes.
@media (prefers-reduced-data: reduce) {
:root {
--preferred-background: linear-gradient(120deg, steelblue, blue, black);
}
}
body {
background: var(--preferred-background, url(/assets/background.png));
}Desgraciadamente, esta característica no tiene soporte aún en los navegadores. Habrá que mantenerse a la espera de que los navegadores comiencen a implementarla.
