Encabezados de sugerencias de clientes para las funciones multimedia de preferencias de los usuarios

Un conjunto de encabezados de sugerencias del cliente permite que los sitios obtengan las preferencias de contenido multimedia del usuario de forma opcional en el momento de la solicitud, lo que permite que los servidores incorporen el CSS correcto por motivos de rendimiento.

François Beaufort
François Beaufort
GitHub
Thomas Steiner

Las consultas de medios CSS, y en particular las funciones de medios de preferencia del usuario, como prefers-color-scheme o prefers-reduced-motion, pueden tener un impacto significativo en la cantidad de CSS que debe entregar una página y en la experiencia que tendrá el usuario cuando se cargue la página.

Enfocándonos en prefers-color-scheme, pero destacando que el razonamiento también se aplica a otras funciones multimedia de preferencia del usuario, se recomienda no cargar CSS para el esquema de colores particular que no coincide en la ruta de renderización crítica y, en su lugar, cargar solo el CSS relevante en un principio. Una forma de hacerlo es a través de <link media>.

Sin embargo, los sitios con mucho tráfico, como la Búsqueda de Google, que desean respetar las funciones multimedia de preferencias del usuario, como prefers-color-scheme y ese CSS intercalado por razones de rendimiento, deben conocer el esquema de colores preferido (o cualquier otra función multimedia de preferencias del usuario, respectivamente), cuando lo solicitan, para que la carga útil de HTML inicial ya tenga el CSS correcto intercalado.

Además, y específicamente para prefers-color-scheme, los sitios deben evitar, de todas maneras, un destello de tema de color impreciso.

Los encabezados de sugerencia de cliente Sec-CH-Prefers-Color-Scheme y Sec-CH-Prefers-Reduced-Motion son el primero de una serie de encabezados de sugerencias de clientes de funciones multimedia de preferencias del usuario que tiene como objetivo resolver este problema.

Información general sobre las sugerencias de cliente

Las sugerencias de cliente HTTP definen un encabezado de respuesta Accept-CH que los servidores pueden usar para anunciar su uso de encabezados de solicitud para la negociación de contenido proactiva, que se conoce coloquialmente como sugerencias de cliente. La propuesta User Preference Media Features Client Hints Headers define un conjunto de sugerencias de clientes destinadas a transmitir las funciones multimedia de las preferencias del usuario. Estas sugerencias del cliente se nombran según la función de medios de preferencia del usuario correspondiente sobre la que informan. Por ejemplo, el esquema de colores preferido actualmente según prefers-color-scheme se informa a través de la sugerencia de cliente Sec-CH-Prefers-Color-Scheme con el nombre adecuado.

Información general sobre las sugerencias de clientes críticas

Es probable que las sugerencias para el cliente que se proponen en Encabezados de sugerencias para el cliente de las funciones multimedia de preferencias del usuario se usen más comúnmente como sugerencias para el cliente críticas. Las sugerencias de cliente críticas son aquellas que cambian de manera significativa el recurso resultante. Este recurso se debe recuperar de forma coherente en todas las cargas de página (incluida la carga de página inicial) para evitar cambios visibles para el usuario.

Sintaxis de la sugerencia del cliente

Las funciones de medios de preferencia del usuario consisten en un nombre (como prefers-reduced-motion) y valores permitidos (como no-preference o reduce). Cada campo de encabezado de sugerencia del cliente se representa como un objeto Encabezados estructurados para HTTP que contiene un elemento cuyo valor es una cadena. Por ejemplo, para indicar que el usuario prefiere un tema oscuro y un movimiento reducido, las sugerencias del cliente se ven como en el siguiente ejemplo.

GET / HTTP/2
Host: example.com
Sec-CH-Prefers-Color-Scheme: "dark"
Sec-CH-Prefers-Reduced-Motion: "reduce"

El equivalente en CSS de la información que se transmite en las sugerencias de cliente anteriores es @media (prefers-color-scheme: dark) {} y @media (prefers-reduced-motion: reduce) {}, respectivamente.

Lista completa de las sugerencias del cliente

La lista de las sugerencias de clientes se basa en las funciones multimedia de preferencias del usuario en Consultas de medios nivel 5.

Sugerencia del cliente Valores permitidos Función de contenido multimedia de preferencia del usuario correspondiente
Sec-CH-Prefers-Reduced-Motion no-preference, reduce prefers-reduced-motion
Sec-CH-Prefers-Reduced-Transparency no-preference, reduce prefers-reduced-transparency
Sec-CH-Prefers-Contrast no-preference, less, more, custom prefers-contrast
Sec-CH-Forced-Colors active, none forced-colors
Sec-CH-Prefers-Color-Scheme light, dark prefers-color-scheme
Sec-CH-Prefers-Reduced-Data no-preference, reduce prefers-reduced-data

Navegadores compatibles

El encabezado de sugerencia de cliente Sec-CH-Prefers-Color-Scheme es compatible con Chromium 93. El encabezado de sugerencia de cliente Sec-CH-Prefers-Reduced-Motion es compatible con Chromium 108. Los comentarios de otros proveedores, como WebKit y Mozilla, están pendientes.

Demostración de Sec-CH-Prefers-Color-Scheme

Prueba la demostración en Chromium 93 y observa cómo el CSS intercalado cambia según el esquema de colores preferido del usuario.

Sec-CH-Prefers-Color-Scheme: dark

Sec-CH-Prefers-Color-Scheme: light

Demostración de Sec-CH-Prefers-Reduced-Motion

Prueba la demostración en Chromium 108 y observa cómo el CSS intercalado cambia según las preferencias de movimiento del usuario.

Cómo funciona

  1. El cliente realiza una solicitud inicial al servidor. bash GET / HTTP/2 Host: example.com
  2. El servidor responde y le indica al cliente a través de Accept-CH que acepta Sec-CH-Prefers-Color-Scheme y Sec-CH-Prefers-Contrast Client Hints, de los cuales, según Critical-CH, considera que Sec-CH-Prefers-Color-Scheme es una sugerencia crítica del cliente que también varía según la que transmite Vary. bash HTTP/2 200 OK Content-Type: text/html Accept-CH: Sec-CH-Prefers-Color-Scheme, Sec-CH-Prefers-Contrast Vary: Sec-CH-Prefers-Color-Scheme Critical-CH: Sec-CH-Prefers-Color-Scheme
  3. Luego, el cliente vuelve a intentar la solicitud y le indica al servidor a través de Sec-CH-Prefers-Color-Scheme que tiene una preferencia del usuario por el contenido con diseño oscuro.bash GET / HTTP/2 Host: example.com Sec-CH-Prefers-Color-Scheme: "dark"
  4. Luego, el servidor puede adaptar la respuesta a las preferencias del cliente según corresponda y, por ejemplo, intercalar el CSS responsable del tema oscuro en el cuerpo de la respuesta.

Ejemplo de Node.js

En el siguiente ejemplo de Node.js, escrito para el popular framework Express.js, se muestra cómo podría verse en la práctica el manejo del encabezado de sugerencia del cliente Sec-CH-Prefers-Color-Scheme. Este código es lo que realmente potencia la demo anterior.

app.get("/", (req, res) => {
  // Tell the client the server accepts the `Sec-CH-Prefers-Color-Scheme` client hint…
  res.set("Accept-CH", "Sec-CH-Prefers-Color-Scheme");
  // …and that the server's response will vary based on its value…
  res.set("Vary", "Sec-CH-Prefers-Color-Scheme");
  // …and that the server considers this client hint a _critical_ client hint.
  res.set("Critical-CH", "Sec-CH-Prefers-Color-Scheme");
  // Read the user's preferred color scheme from the headers…
  const prefersColorScheme = req.get("sec-ch-prefers-color-scheme");
  // …and send the adequate HTML response with the right CSS inlined.
  res.send(getHTML(prefersColorScheme));
});

Consideraciones de privacidad y seguridad

El equipo de Chromium diseñó e implementó los encabezados de sugerencias de cliente de funciones multimedia de preferencias del usuario con los principios básicos definidos en Controlling Access to Powerful Web Platform Features, incluidos el control del usuario, la transparencia y la ergonomía.

Las Consideraciones de seguridad de las Sugerencias de clientes HTTP y las Consideraciones de seguridad de la confiabilidad de Sugerencias de clientes también se aplican a esta propuesta.

Referencias

Agradecimientos

Muchas gracias por los comentarios y consejos valiosos de Yoav Weiss. Imagen hero de Tdadamemd en Wikimedia Commons.