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

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

François Beaufort
François Beaufort
GitHub
Thomas Steiner

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

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

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

また、特に prefers-color-scheme に関しては、不正確なカラーテーマの点滅を避けることを必ず推奨します。

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

Client Hints の背景

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

重要なお客様向けのヒントの背景

ユーザー設定のメディア機能 Client Hints ヘッダーで提案された Client Hints は、Critical Client Hints として最も一般的に使用されると考えられます。重要な Client Hints は、生成されるリソースに意味のある変更を行う Client Hints です。このようなリソースは、ユーザーが目にする切り替え時に不快な思いをさせないように、ページ読み込み時（最初のページの読み込み時を含む）後も一貫して取得する必要があります。initial

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

ユーザー設定のメディア機能は、名前（prefers-reduced-motion など）と許容値（no-preference や reduce など）で構成されます。各 Client Hints ヘッダー フィールドは、値が文字列のアイテムを含む HTTP の構造化ヘッダー オブジェクトとして表されます。たとえば、ユーザーがダークモードで動きの少ないものを好むことを示す場合、クライアント ヒントは次のようになります。

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

上記の Client Hints で伝えられる情報に相当する CSS は、それぞれ @media (prefers-color-scheme: dark) {} と @media (prefers-reduced-motion: reduce) {} です。

Client Hints の全リスト

Client Hints のリストは、メディアクエリ レベル 5 のユーザー設定のメディア機能に基づいてモデル化されています。

Client Hints 使用できる値 対応するユーザー設定のメディア機能
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 Client Hints ヘッダーは Chromium 93 でサポートされています。 Sec-CH-Prefers-Reduced-Motion Client Hints ヘッダーは Chromium 108 でサポートされています。 他のベンダーの WebKit と Mozilla からのフィードバックは保留中です。

Sec-CH-Prefers-Color-Scheme のデモ

Chromium 93 のデモを試して、インライン CSS がユーザーの好みのカラーパターンに応じてどのように変化するかを確認してください。

Sec-CH-Prefers-カラーパターン: ダーク

Sec-CH-Prefers-カラーパターン: ライト

Sec-CH-Prefers-Reduced-Motion のデモ

Chromium 108 のデモを試して、インライン CSS がユーザーのモーションの設定に応じてどのように変化するかを確認してください。

仕組み

  1. クライアントがサーバーに最初のリクエストを送信します。 bash GET / HTTP/2 Host: example.com
  2. サーバーは応答し、Sec-CH-Prefers-Color-Scheme と Sec-CH-Prefers-Contrast の Client Hints を受け入れることを Accept-CH を介してクライアントに伝えます。Critical-CH のとおり、Sec-CH-Prefers-Color-Scheme は重要な Client Hints と見なし、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 Client Hints ヘッダーの処理の実際の例を示しています。上記のデモの原動力はこのコードです。

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 チームは、強力なウェブ プラットフォーム機能へのアクセスの制御で定義されている基本原則（ユーザー制御、透明性、人間工学など）を使用して、ユーザー設定のメディア機能 Client Hints ヘッダーを設計、実装しました。

HTTP Client Hints のセキュリティ上の考慮事項と Client Hints の信頼性に関するセキュリティ上の考慮事項も、この提案にも適用されます。

参照

謝辞

Yoav Weiss から貴重なフィードバックとアドバイスをありがとうございます。ヒーロー画像（作成者: Tdadamemd、Wikimedia Commons）。