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

一連のクライアント ヒント ヘッダーを使用すると、サイトはリクエスト時にユーザーのメディア設定を取得できます（必要に応じて）。これにより、サーバーはパフォーマンス上の理由から適切な 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 は、サーバーがリクエスト ヘッダーを使用してプロアクティブなコンテンツ交渉（通称 Client Hints）を行うことをアドバタイズするために使用できる Accept-CH レスポンス ヘッダーを定義します。ユーザー設定のメディア機能のクライアント ヒント ヘッダーの提案では、ユーザー設定のメディア機能を伝達することを目的とした一連のクライアント ヒントを定義しています。これらのクライアント ヒントは、レポート対象の対応するユーザー設定メディア機能の名前が付けられています。たとえば、prefers-color-scheme に従って現在優先されているカラーパターンは、適切な名前の Sec-CH-Prefers-Color-Scheme クライアント ヒントで報告されます。

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

ユーザー設定のメディア機能のクライアント ヒント ヘッダーで提案されているクライアント ヒントは、重要なクライアント ヒントとして最も一般的に使用されると思われます。重要な 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 のユーザー設定メディア機能をモデルにしています。

クライアント ヒント 使用できる値 対応するユーザー設定のメディア機能
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 によるヒーロー画像。