Optimiza y realiza ajustes para los usuarios que prefieren una IU opaca.
A partir de Chrome 118, está disponible la nueva función de consultas de medios prefers-reduced-transparency de CSS Media Queries 5. Las interfaces no opacas pueden causar dolores de cabeza o ser una lucha visual para varios tipos de deficiencias visuales. Es por eso que Windows, macOS y iOS tienen preferencias del sistema que pueden reducir o quitar la transparencia de la IU.
Con esta nueva consulta de medios en el navegador, CSS puede adaptar la interfaz para los usuarios que especifiquen un deseo de menor transparencia:
.example {
--opacity: .5;
background: hsl(200 100% 50% / var(--opacity));
@media (prefers-reduced-transparency: reduce) {
--opacity: .95;
}
}
En el ejemplo de código anterior, una variable de CSS conserva un valor de opacidad en 50%, que luego se usa con HSL para crear un fondo azul semitransparente. La consulta de medios anidada verifica si el usuario prefiere una transparencia reducida y, cuando es verdadero, ajusta la variable de opacidad a 95%, un valor de opacidad casi opaco.
Esta consulta de medios se adapta bien a las otras consultas de medios de preferencias, lo que permite a los diseñadores y desarrolladores ser creativos y, al mismo tiempo, ajustarse para los usuarios. Puedes pensar en estas consultas de medios como una silla en un auto que ajusta automáticamente la posición según el usuario; cuando un usuario visita tu sitio web, se ajusta automáticamente sin que lo pregunte. Es genial.
Casos de uso para reducir la transparencia
Las siguientes secciones se dedicarán a mostrar momentos y oportunidades para reducir la transparencia de maneras significativas.
Subtítulos semitransparentes en las imágenes
Es bastante común superponer una imagen o una miniatura de video con una leyenda o un resumen semitransparente. En el siguiente ejemplo, se muestra una forma de manejar una preferencia por una transparencia reducida. La superposición se quita por completo y el mismo contenido de los subtítulos se muestra debajo de la imagen en lugar de superponerse.
Modales, notificaciones y ventanas emergentes transparentes
Otra forma en que los elementos de la IU se superponen al contenido, lo que a menudo significa que hay elementos de opacidad, es mediante modales, notificaciones y ventanas emergentes. En estos casos, aumentar la opacidad puede respetar la preferencia del usuario y, al mismo tiempo, permitir que se vea una sutil cantidad de color detrás de la superposición.
.card {
background: hsl(none none 100% / 20%);
@media (prefers-reduced-transparency: reduce) {
background: hsl(none none 0% / 80%);
}
}
Cristal esmerilado adaptable
Otro estilo popular de superposición de imágenes es el vidrio esmerilado. En el siguiente ejemplo, la imagen detrás de la leyenda es un reflejo espejado de la imagen del producto. Esto tiene algunas ventajas: la imagen no se recorta y la preferencia clara u oscura se puede ver un poco más en el resultado final.
.adaptive-glass {
--glass-lightness: 100%;
--glass-alpha: 50%;
background: hsl(0 0% var(--glass-lightness) / var(--glass-alpha));
backdrop-filter: blur(40px);
@media (prefers-color-scheme: dark) {
--glass-lightness: 0%;
}
@media (prefers-reduced-transparency: reduce) {
--glass-alpha: 85%;
}
}
Encabezado hero
Un elemento común de la página principal tiene un mensaje en negrita que se superpone a un video que se repite indefinidamente o a una imagen animada. En el siguiente ejemplo, se muestra una superposición de gradiente semitransparente colorida y una imagen de fondo con animación infinita. Si bien esto puede atraer a muchos ojos, también generará problemas para muchos, debido al bajo contraste con la transparencia y el movimiento que no se pueden controlar.
Esto se puede solucionar con dos consultas de medios de CSS: prefers-reduced-motion y prefers-reduced-transparency. Dentro de la consulta de medios con movimiento reducido, puedes aplicar la animación infinita solo si el usuario tiene "no preferencia" por el movimiento reducido, lo que le indica al código que está bien que este usuario tenga movimiento.
Además, con la consulta de medios de transparencia reducida, puedes disminuir la opacidad para que el color de la superposición sea de casi un 100%. Ahora el mensaje se puede leer fácilmente sin distracciones de movimiento ni contrastes problemáticos.
Combina toda la información para implementar un estilo de IU creativo, a la vez que te aseguras de que el público objetivo pueda leerlo y recibir el mensaje.
.Hero img {
@media (prefers-reduced-motion: no-preference) {
animation: zoom 30s ease infinite;
}
}
.Hero .overlay {
background: hsl(none none 0% / 95%);
@media (prefers-reduced-transparency: no-preference) {
background: linear-gradient(
to top right in oklab,
oklch(40% 0.3 340 / 70%),
oklch(40% 0.4 200 / 70%)
);
}
}
Perspectivas aditivas frente a sustractivas sobre las preferencias de los usuarios
En el ejemplo anterior, no se revisaron estas preferencias del usuario para determinar su preferencia reducida. En cambio, no se verifica ninguna preferencia.
@media (prefers-reduced-transparency: no-preference) {
…
}
Los desarrolladores y diseñadores suelen "respaldar" la experiencia del usuario en función de estas preferencias, en una mentalidad sustractiva. Esto se manifiesta en las consultas de medios como una verificación de "reduce", momento en el que se quita algo de la IU. En el ejemplo, se muestra una mentalidad aditiva, en la que se agregan movimiento y transparencia si el usuario está de acuerdo.
Este enfoque te ayuda a pensar en una experiencia de referencia saludable que sea sólida por sí sola. Luego, si está bien con el usuario, agrégalo a la experiencia.
Herramientas para desarrolladores
Las Herramientas para desarrolladores de Chrome pueden emular esta preferencia para lograr una transparencia reducida (y mucho más) en la pestaña Renderización. En el siguiente video, se muestra cómo activar o desactivar las consultas de medios prefers-color-scheme y prefers-reduced-transparency para mostrar las variantes claras, oscuras, transparentes y con menor transparencia de la tarjeta de vidrio esmerilado.