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.
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.
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
- El cliente realiza una solicitud inicial al servidor.
bash GET / HTTP/2 Host: example.com
- El servidor responde y le indica al cliente a través de
Accept-CH
que aceptaSec-CH-Prefers-Color-Scheme
ySec-CH-Prefers-Contrast
Client Hints, de las cuales, segúnCritical-CH
, considera aSec-CH-Prefers-Color-Scheme
una sugerencia crítica de cliente que también varía la respuesta según la transmiteVary
.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
- 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"
- 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
- Borrador de especificaciones
- Explicación
- Sec-CH-Prefers-Color-Scheme - Entrada de estado de Chrome
- Sec-CH-Prefers-Color-Scheme - Error de Chromium
- Sec-CH-Prefers-Reduced-Motion - Entrada de estado de Chrome
- Sec-CH-Prefers-Reduced-Motion: Error de Chromium
- Subproceso de WebKit
- Posición de los estándares de Mozilla
- Client Hints
- Confiabilidad de Client Hint
- Consultas de medios nivel 5
- Encabezados estructurados para HTTP
Agradecimientos
Muchas gracias por los valiosos comentarios y consejos de Yoav Weiss. Imagen hero de Tdadamemd en Wikimedia Commons.