CSS prefers-reduced-transparency

Realiza optimizaciones y ajustes para los usuarios que prefieren una IU opaca.

Adam Argyle

A partir de Chrome 118, la nueva función de consulta de medios prefers-reduced-transparency de CSS Media Queries 5 es disponibles. Las interfaces no opacas pueden causar dolores de cabeza o ser una lucha visual para varios tipos de deficiencias en la visión. Por eso, Windows, macOS y iOS tienen preferencias del sistema. que puede 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 especifica 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 contiene un valor de opacidad en 50%. que luego se usa con HSL para crear un fondo azul semitransparente. El una consulta de medios anidada verifica una preferencia del usuario para lo siguiente: transparencia reducida y, cuando es verdadero, ajusta la variable de opacidad a 95%, un valor de opacidad casi opaco.

Esta consulta de medios se ajusta bien a las otras consultas de medios preferidas, lo que permiten que los diseñadores y desarrolladores sean creativos y, al mismo tiempo, se ajusten a los usuarios. Puedes considerar estas consultas de medios como una silla en un automóvil que ajusta la posición para el usuario; cuando un usuario visita tu sitio web, se ajusta automáticamente a ellos sin que lo pidan. Genial.

Casos de uso para reducir la transparencia

Las próximas secciones se dedicarán a mostrar momentos y oportunidades para y reducir la transparencia de manera significativa.

Leyendas semitransparentes en las imágenes

Es bastante común superponer una imagen o miniatura de video con una leyenda o resumen semitransparente. En el siguiente ejemplo, se ilustra una manera para manejar una preferencia por la transparencia reducida. La superposición es completamente eliminado, y el mismo contenido de leyendas se muestra debajo de la imagen en lugar de se superponen.

Ventanas modales, notificaciones y ventanas emergentes transparentes

Otra forma en que los elementos de la IU se superponen con el contenido, lo que a menudo significa que los elementos de opacidad están presentes, es con modales, notificaciones y ventanas emergentes. En estos casos, potenciando la opacidad puede respetar las preferencias del usuario y al mismo tiempo permitir un sutil cantidad de color detrás de la superposición para ver a través de ella.

.card {
  background: hsl(none none 100% / 20%);

  @media (prefers-reduced-transparency: reduce) {
    background: hsl(none none 0% / 80%);
  }
}

Vidrio 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 espejo de la imagen del producto. Esta tiene un par de ventajas: la imagen no está recortada y el oscuro o claro preferencia puede surgir 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 superpuesto en un video que se repite indefinidamente o imagen animada. El siguiente ejemplo tiene un gradiente semitransparente colorido y una imagen de fondo con animación infinita. Si bien esto puede atraer muchos ojos, también causará problemas para muchos, debido al bajo contraste con y movimiento que no se pueden controlar.

Esto se puede solucionar con dos consultas de medios de CSS: prefers-reduced-motion y prefers-reduced-transparency. En la consulta de medios de movimiento reducido, puedes aplicar la animación infinita solo si el usuario no tiene preferencias por reducción movimiento, lo que le indica al código que está bien que el usuario tenga movimiento.

Además, con la consulta de medios de transparencia reducida, puedes disminuir el opacidad, por lo que el color de superposición es casi del 100%. Ahora, el mensaje se puede leer con facilidad. sin distracciones de movimiento ni contraste problemático.

Si combinas todos estos elementos, podrás implementar un diseño de IU creativo y, al mismo tiempo, asegurarte 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 del usuario

En el ejemplo anterior, no se verifican estas preferencias del usuario para sus preferencia, sino que no hay ninguna preferencia.

@media (prefers-reduced-transparency: no-preference) {
  …
}

Los desarrolladores y diseñadores suelen recurrir a "resguardos" la experiencia del usuario en función de estas preferencias, en una mentalidad sustractiva. Esto se manifiesta en las consultas de medios una comprobación para "reducir", en el que se quita algo de la IU. El ejemplo muestra una mentalidad aditiva, en la que el movimiento y la transparencia se agregan si el usuario está de acuerdo con él.

Este enfoque ayuda a pensar en una experiencia de referencia saludable robusta por sí sola. Luego, si está de acuerdo con el usuario, agrégalo a la experiencia.

Herramientas para desarrolladores

Las Herramientas para desarrolladores de Chrome pueden emular esta preferencia para reducir la transparencia (y más) en la pestaña Renderización. En el siguiente video, consulta cómo activar o desactivar prefers-color-scheme y prefers-reduced-transparency consultas de medios para mostrar la transparencia, clara, oscura, transparente y reducida de la tarjeta de cristal esmerilado.