Пользовательские настройки мультимедиа, заголовки подсказок клиента

Набор заголовков клиентских подсказок позволяет сайтам получать мультимедийные предпочтения пользователя по желанию во время запроса, позволяя серверам встраивать правильный CSS для повышения производительности.

Франсуа Бофор
François Beaufort
GitHub
Томас Штайнер

Медиа-запросы CSS и, в частности, медиа-функции предпочтений пользователя, такие как prefers-color-scheme или prefers-reduced-motion , оказывают потенциально значительное влияние на объем CSS, который должен быть доставлен на странице, и на впечатления пользователя. иметь при загрузке страницы.

Сосредоточив внимание на prefers-color-scheme , но подчеркнув, что рассуждения применимы и к другим медиа-функциям, предпочитаемым пользователем, рекомендуется не загружать CSS для конкретной несовпадающей цветовой схемы в критическом пути рендеринга, а вместо этого изначально загружайте только актуальный CSS. Один из способов сделать это — через <link media> .

Тем не менее, сайты с высоким трафиком, такие как Google Search , которые хотят учитывать медиа-функции предпочтений пользователя, такие как prefers-color-scheme и встроенный CSS, из соображений производительности, должны знать о предпочтительной цветовой схеме (или других медиа-функциях пользователя соответственно) в идеале на время запроса, чтобы в исходную полезную нагрузку HTML уже был встроен правильный CSS.

Кроме того, и особенно в отношении prefers-color-scheme , сайты всеми силами хотят избежать появления неточной цветовой темы .

Заголовки подсказок клиента Sec-CH-Prefers-Color-Scheme и Sec-CH-Prefers-Reduced-Motion являются первыми из серии заголовков подсказок клиента для мультимедийных функций пользователя , целью которых является решение этой проблемы.

Общие сведения о подсказках для клиентов

Подсказки клиента HTTP определяют заголовок ответа Accept-CH , который серверы могут использовать для объявления об использовании заголовков запросов для упреждающего согласования контента, что в просторечии называется подсказками клиента. Предложение заголовков клиентских подсказок для медиа-функций пользовательских предпочтений определяет набор клиентских подсказок, направленных на передачу медиа-функций предпочтений пользователя. Эти клиентские подсказки названы в честь соответствующей мультимедийной функции пользовательских предпочтений, о которой они сообщают. Например, текущая предпочтительная цветовая схема согласно prefers-color-scheme сообщается через клиентскую подсказку с метким названием Sec-CH-Prefers-Color-Scheme .

Общие сведения о важных советах для клиентов

Подсказки для клиентов, предложенные в заголовках подсказок клиента в настройках пользователя, предположительно, чаще всего будут использоваться в качестве критических подсказок для клиента . Критические клиентские подсказки — это клиентские подсказки, которые существенно изменяют результирующий ресурс. Такой ресурс должен получаться последовательно при каждой загрузке страницы (включая начальную загрузку страницы), чтобы избежать раздражающих видимых пользователем переключателей.

Синтаксис клиентской подсказки

Медиа-функции пользовательских предпочтений состоят из имени (например, prefers-reduced-motion ») и разрешенных значений (например, no-preference или reduce »). Каждое поле заголовка подсказки клиента представлено как структурированные заголовки для объекта HTTP , содержащего элемент , значением которого является строка . Например, чтобы показать, что пользователь предпочитает темную тему и ограниченное движение, клиентские подсказки выглядят так, как показано в примере ниже.

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

CSS-эквивалент информации, передаваемой в приведенных выше подсказках для клиента, — это @media (prefers-color-scheme: dark) {} и @media (prefers-reduced-motion: reduce) {} соответственно.

Полный список подсказок для клиента

Список клиентских подсказок смоделирован на основе медиа-функций пользовательских предпочтений в Media Queries Level 5 .

Подсказка клиенту Разрешенные значения Соответствующая мультимедийная функция предпочтений пользователя
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

Поддержка браузера

Заголовок подсказки клиента Sec-CH-Prefers-Color-Scheme поддерживается в Chromium 93. Заголовок подсказки клиента Sec-CH-Prefers-Reduced-Motion поддерживается в Chromium 108. Ожидаются отзывы других поставщиков, а именно WebKit и Mozilla . .

Демонстрация Sec-CH-Prefers-Color-Scheme

Попробуйте демо-версию в Chromium 93 и обратите внимание, как встроенный CSS меняется в соответствии с предпочтительной цветовой схемой пользователя.

Sec-CH-Prefers-Color-Scheme: темный

Sec-CH-Prefers-Color-Scheme: светлый

Демонстрация Sec-CH-Prefers-Reduced-Motion

Попробуйте демо-версию в Chromium 108 и обратите внимание, как встроенный CSS меняется в зависимости от предпочтений пользователя.

Как это работает

  1. Клиент делает первоначальный запрос к серверу. bash GET / HTTP/2 Host: example.com
  2. Сервер отвечает, сообщая клиенту через Accept-CH , что он принимает Sec-CH-Prefers-Color-Scheme и Sec-CH-Prefers-Contrast Client Hints, из которых согласно Critical-CH он рассматривает Sec-CH-Prefers-Color-Scheme критического клиента. Подсказка, что он также варьирует реакцию, переданную 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. Затем клиент повторяет запрос, сообщая серверу через Sec-CH-Prefers-Color-Scheme , что он предпочитает контент с темной схемой. bash GET / HTTP/2 Host: example.com Sec-CH-Prefers-Color-Scheme: "dark"
  4. Затем сервер может соответствующим образом адаптировать ответ к предпочтениям клиента и, например, встроить CSS, отвечающий за темную тему, в тело ответа.

Пример Node.js

Приведенный ниже пример Node.js, написанный для популярной платформы Express.js, показывает, как на практике может выглядеть работа с заголовком подсказки клиента Sec-CH-Prefers-Color-Scheme . Этот код на самом деле является основой приведенной выше демонстрации .

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));
});

Соображения конфиденциальности и безопасности

Команда Chromium разработала и внедрила заголовки клиентских подсказок для мультимедийных функций пользователя, используя основные принципы, определенные в разделе «Управление доступом к мощным функциям веб-платформы» , включая пользовательский контроль, прозрачность и эргономику.

Соображения безопасности подсказок клиента HTTP и соображения безопасности надежности подсказок клиента также применимы к этому предложению.

Ссылки

Благодарности

Большое спасибо за ценные отзывы и советы от Йоава Вайса . Изображение героя, созданное Tdadamemd на Wikimedia Commons .