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

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

François Beaufort
François Beaufort
GitHub
Thomas Steiner

Las consultas de medios de CSS y, en particular, las funciones multimedia de preferencias del usuario, como prefers-color-scheme o prefers-reduced-motion, tienen un impacto potencialmente 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.

Si nos centramos en prefers-color-scheme, pero destacamos que el razonamiento también se aplica a otras funciones de medios de preferencias del usuario, una práctica recomendada es no cargar CSS para el esquema de colores específico que no coincide en la ruta de renderización crítica y, en su lugar, cargar inicialmente solo el CSS relevante en ese momento. 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 que CSS intercalados por razones de rendimiento, deben conocer el esquema de colores preferido (o alguna otra función de medios de preferencia del usuario respectivamente), idealmente en el momento de la solicitud, para que la carga útil de HTML inicial ya tenga el CSS correcto intercalado.

Además, y en el caso específico de prefers-color-scheme, los sitios quieren evitar un destellos de tema de color impreciso.

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

Información general sobre las sugerencias para clientes

Sugerencias de clientes HTTP: Define un encabezado de respuesta Accept-CH que los servidores pueden usar para anunciar su uso de encabezados de solicitud para la negociación proactiva de contenido. Este tipo de orientación se conoce coloquialmente como sugerencias de clientes. La propuesta de Encabezados de sugerencias de clientes en las funciones de medios de preferencias del usuario define un conjunto de sugerencias de clientes destinadas a transmitir las funciones multimedia de preferencias del usuario. Estas sugerencias de clientes llevan el nombre de la función multimedia de preferencia del usuario sobre la que informan. Por ejemplo, el esquema de colores actualmente preferido según prefers-color-scheme se informa a través de la sugerencia de cliente Sec-CH-Prefers-Color-Scheme con el mismo nombre.

Información general sobre las sugerencias fundamentales para los clientes

Se supone que las sugerencias de clientes propuestas en los encabezados de sugerencias de clientes multimedia de preferencias del usuario se usarán, por lo general, como sugerencias fundamentales de clientes. Las sugerencias críticas de cliente son sugerencias de cliente que cambian de manera significativa el recurso resultante. Este recurso se debe recuperar de manera coherente entre las cargas de página (incluida la carga initial de la página) para evitar cambios que puedan ser molestos para el usuario.

Sintaxis de la sugerencia de cliente

Las funciones multimedia de preferencias del usuario constan de un nombre (como prefers-reduced-motion) y valores permitidos (como no-preference o reduce). Cada campo del encabezado de la sugerencia del cliente se representa como un objeto Encabezados estructurados para HTTP que contiene un elemento cuyo valor es una cadena. Por ejemplo, para transmitir que el usuario prefiere un tema oscuro y un movimiento reducido, las sugerencias del cliente se verán 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 de CSS de la información que se transmite en las sugerencias de clientes anteriores es @media (prefers-color-scheme: dark) {} y @media (prefers-reduced-motion: reduce) {}, respectivamente.

Lista completa de sugerencias de clientes

La lista de sugerencias de cliente se basa en las funciones de medios de preferencias del usuario que aparecen en el nivel de consultas de medios 5.

Sugerencia de cliente Valores permitidos Función de contenido multimedia de preferencias 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 del cliente Sec-CH-Prefers-Color-Scheme es compatible con Chromium 93. El encabezado de sugerencia del cliente Sec-CH-Prefers-Reduced-Motion es compatible con Chromium 108. Los comentarios de otros proveedores, en particular los de 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: oscuro

Sec-CH-Prefers-Color-Scheme: claro

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

Prueba la demostración en Chromium 108 y observa cómo el CSS insertado 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 las cuales, según Critical-CH, considera a Sec-CH-Prefers-Color-Scheme una sugerencia crítica de cliente que también varía la respuesta según la 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 de esquema 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

El siguiente ejemplo de Node.js, escrito para el framework popular Express.js, muestra cómo se vería en la práctica trabajar con el encabezado de sugerencia del cliente Sec-CH-Prefers-Color-Scheme. Este código es lo que impulsa la demostración 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 las sugerencias de clientes multimedia para las preferencias del usuario mediante los principios fundamentales definidos en el artículo Cómo controlar el acceso a funciones potentes de la plataforma web, lo que incluye el control de 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 las sugerencias de clientes también se aplican a esta propuesta.

Referencias

Agradecimientos

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