ユーザー設定のメディア機能クライアントのヒントヘッダー

一連のクライアント ヒント ヘッダーを使用すると、サイトはリクエスト時にユーザーのメディア設定を取得できます（必要に応じて）。これにより、サーバーはパフォーマンス上の理由から適切な CSS をインライン化できます。

François Beaufort
François Beaufort
GitHub
Thomas Steiner

CSS メディアクエリ、特に prefers-color-scheme や prefers-reduced-motion などのユーザー設定メディア機能は、ページで配信する必要がある CSS の量と、ページの読み込み時にユーザーが得るエクスペリエンスに大きな影響を与える可能性があります。

prefers-color-scheme に焦点を当てていますが、この理由は他のユーザー設定メディア機能にも適用されます。クリティカル レンダリング パスで、特定の一致しないカラーパターンの CSS を読み込まず、代わりに最初に現在関連する CSS のみを読み込むことをおすすめします。1 つの方法は、<link media> を使用することです。

ただし、Google 検索のようなトラフィック量の多いサイトで、パフォーマンス上の理由で prefers-color-scheme やインライン CSS などのユーザー好みのメディア機能を使用したい場合、リクエスト時に希望のカラーパターン（またはその他のユーザー好みのメディア機能）を認識しておく必要があります。そうすることで、最初の HTML ペイロードに適切な CSS がすでにインライン化されます。

さらに、特に prefers-color-scheme については、サイトは不正確なカラーテーマの一瞬を一切避けたいと考えています。

Sec-CH-Prefers-Color-Scheme クライアント ヒント ヘッダーと Sec-CH-Prefers-Reduced-Motion クライアント ヒント ヘッダーは、この問題を解決することを目的とした一連のユーザー設定メディア機能クライアント ヒント ヘッダーの最初のものです。

クライアント ヒントの背景

HTTP Client Hints は、サーバーがプロアクティブなコンテンツ ネゴシエーションのリクエスト ヘッダーの使用をアドバタイズするために使用できる Accept-CH レスポンス ヘッダーを定義します（口語的にクライアント ヒントと呼ばれます）。ユーザー設定のメディア機能のクライアント ヒント ヘッダーの提案では、ユーザー設定のメディア機能を伝達することを目的とした一連のクライアント ヒントを定義しています。これらのクライアント ヒントは、レポート対象の対応するユーザー設定メディア機能の名前が付けられています。たとえば、prefers-color-scheme で現在優先されているカラーパターンは、適切な名前の Sec-CH-Prefers-Color-Scheme Client Hints を介してレポートされます。

重要なクライアント ヒントの背景

ユーザー設定のメディア機能のクライアント ヒント ヘッダーで提案されているクライアント ヒントは、重要なクライアント ヒントとして最も一般的に使用されると思われます。重要な Client Hints は、生成されるリソースを大幅に変更する Client Hints です。このようなリソースはページ読み込み（最初のページ読み込みを含む）で一貫して取得し、ユーザーに表示されるスイッチが煩わしくならないようにする必要があります。

クライアント ヒントの構文

ユーザー設定のメディア機能は、名前（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) {} です。

クライアント ヒントの完全なリスト

クライアント ヒントのリストは、メディアクエリ レベル 5 のユーザー設定メディア機能をモデルにしています。

Client Hints API 使用できる値 対応するユーザー設定のメディア機能
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: dark

Sec-CH-Prefers-Color-Scheme: light

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 のクライアント ヒントを受け入れることをクライアントに伝えます。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 の例

一般的な Express.js フレームワーク用に記述された次の Node.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 Client Hints のセキュリティに関する考慮事項と、Client Hint の信頼性のセキュリティに関する考慮事項も、この提案に適用されます。

参照

謝辞

Yoav Weiss 様から貴重なフィードバックとアドバイスをいただき、誠にありがとうございました。ウィキメディア コモンズの Tdadamemd によるヒーロー画像。