Creación de sitios web con datos reducidos de preferencias

Alerta de spoiler: todavía no hay soporte para ello. Pero está definido en la especificación Media Queries Nivel 5 que incluye otras características de preferencia de usuario recientes, pero más familiares, como prefers-color-schemey prefers-reduced-motion.

El blog de Polypane profundiza increíblemente en prefers-reduced-data, especialmente en algo que aún tenemos que ver en la naturaleza. En realidad, eso es lo que hace que el equipo de Polypane sea una voz ideal en el tema. Su producto es un navegador que puede emular la función detrás de una bandera de Chromium.

Al mismo tiempo, vale la pena señalar que la especificación señala dos problemas potenciales importantes con esta característica en su estado actual:

• Puede ser una fuente no deseada de toma de huellas dactilares, con un sesgo hacia los ingresos bajos y con datos limitados.
• Esta característica es un borrador inicial y CSS-WG no la considera lista para su envío en producción.

Pero eso no quiere decir que no podamos empezar a familiarizarnos con él. Así es como funciona:

@media (prefers-reduced-data: reduce) {  /* Stuff for reduced data preferences */}@media (prefers-reduced-data: no-preference) {  /* Stuff for no data preferences */}

Lo que aprecio de esta publicación es la gran cantidad de posibles casos de uso que enumera. Permítanme resumir:

• Cargar fuentes condicionalmente. Como en, haga una @font-facedeclaración y luego llame a la fuente en el cuerpo, una vez para que los usuarios no-preferenceobtengan la fuente personalizada y nuevamente para que los usuarios reducedobtengan una pila más liviana.
• Imágenes de fondo. ¿Alguna vez ha usado una imagen de presentación gigante como fondo para algún componente de héroe de ancho completo? Tal vez eso pueda servir solo para las personas que sí lo tienen, no-preferencemientras que los que reducedsí lo tienen obtienen una variación más pequeña o ninguna imagen.
• Imágenes más pequeñas en HTML. Esto es inteligente porque recuerda que tenemos el mediaatributo del sourceelemento. Por lo tanto, podemos indicar a los navegadores que utilicen ciertas imágenes cuando trabajen con picture, al estilo: source media="(prefers-reduced-data: reduce)" /.
• Precarga condicionalmente y reproduce videos automáticamente. Así como podemos trabajar con esta característica en HTML, también podemos usarla en JavaScript, usando window.matchMedia('(prefers-reduced-data: no-preference)').matchespara configurar autoplayatributos preloaden un video según las preferencias de datos.
• Deshazte del desplazamiento infinito. En general, descartaría este patrón en primer lugar, pero ciertamente podemos desactivarlo para que los usuarios que prefieren datos reducidos no se vean obligados a recibir más contenido (y, por lo tanto, más datos) simplemente al llegar al final de una página.

¡Esa no es una lista definitiva de ideas, por supuesto! Hablamos todo el tiempo sobre ofrecer los activos adecuados a las personas adecuadas en el momento adecuado y esta función de medios es una gran herramienta para ayudarnos a hacerlo en determinados contextos. Piensa también en:

• Proporcionar versiones de baja resolución de los recursos descargados (por ejemplo, archivos PDF)
• Vincular a ciertos sitios o páginas que tienen muchas experiencias.
• Cargar condicionalmente scripts completos, hojas de estilo o bibliotecas según las preferencias
• Probablemente un trillón de cosas más y más inteligentes…

Y este consejo es de oro:

Por ejemplo prefers-reduced-motion, es bueno pensar en la prefers-reduced-data: reduceopción como la opción predeterminada: las personas obtienen una experiencia ágil y rápida, y solo cuando lo indican no-preference, les enviamos más datos. De esa manera,más viejoLos navegadores que no admiten la consulta de medios obtienen la experiencia lean de forma predeterminada.

Si. El mismo tipo de idea que el diseño responsivo “primero en dispositivos móviles”: comenzando diseñando para datos reducidos y luego mejorar a medida que ampliamos.