Header petunjuk klien fitur media preferensi pengguna

Kumpulan header petunjuk klien memungkinkan situs mendapatkan preferensi media pengguna secara opsional pada waktu permintaan, sehingga server dapat menyisipkan CSS yang tepat untuk alasan performa.

François Beaufort
François Beaufort
GitHub
Thomas Steiner

Kueri media CSS, dan secara khusus fitur media preferensi pengguna seperti prefers-color-scheme atau prefers-reduced-motion, berpotensi memiliki dampak yang signifikan terhadap jumlah CSS yang perlu dikirim oleh halaman, dan pada pengalaman yang akan dimiliki pengguna saat halaman dimuat.

Berfokus pada prefers-color-scheme—tetapi menyoroti bahwa alasan ini juga berlaku untuk fitur media preferensi pengguna lainnya—praktik terbaiknya adalah tidak memuat CSS untuk skema warna tertentu yang tidak cocok di jalur rendering penting, dan sebagai gantinya, awalnya hanya memuat CSS yang saat ini relevan. Salah satu cara untuk melakukannya adalah melalui <link media>.

Namun, situs dengan traffic tinggi seperti Google Penelusuran yang ingin mematuhi fitur media preferensi pengguna seperti prefers-color-scheme dan CSS inline tersebut karena alasan performa, harus mengetahui skema warna yang diinginkan (atau fitur media preferensi pengguna lainnya) sebaiknya pada waktu permintaan, sehingga payload HTML awal sudah memiliki CSS yang tepat yang disisipkan.

Selain itu, dan khusus untuk prefers-color-scheme, situs harus menghindari flash tema warna yang tidak akurat.

Header petunjuk klien Sec-CH-Prefers-Color-Scheme dan Sec-CH-Prefers-Reduced-Motion adalah header petunjuk klien pertama dari serangkaian header petunjuk klien fitur media preferensi pengguna yang bertujuan untuk menyelesaikan masalah ini.

Latar belakang petunjuk klien

HTTP Client Hints menentukan header respons Accept-CH yang dapat digunakan server untuk mengiklankan penggunaan header permintaan untuk negosiasi konten proaktif, yang secara umum disebut sebagai client hints. Proposal Header Petunjuk Klien Fitur Media Preferensi Pengguna menentukan serangkaian petunjuk klien yang bertujuan untuk menyampaikan fitur media preferensi pengguna. Petunjuk klien ini diberi nama sesuai dengan fitur media preferensi pengguna yang sesuai yang dilaporkan. Misalnya, skema warna yang saat ini lebih disukai sesuai prefers-color-scheme dilaporkan melalui petunjuk klien Sec-CH-Prefers-Color-Scheme yang diberi nama tepat.

Latar belakang petunjuk klien penting

Petunjuk klien yang diusulkan dalam Header Petunjuk Klien Fitur Media Preferensi Pengguna kemungkinan besar akan paling sering digunakan sebagai Petunjuk Klien Kritis. Client Hints Penting adalah Client Hints yang secara signifikan mengubah resource yang dihasilkan. Resource tersebut harus diambil secara konsisten di seluruh pemuatan halaman (termasuk pemuatan halaman awal) untuk menghindari tombol yang terlihat oleh pengguna.

Sintaksis petunjuk klien

Fitur media preferensi pengguna terdiri dari nama (seperti prefers-reduced-motion) dan nilai yang diizinkan (seperti no-preference atau reduce). Setiap kolom header petunjuk klien direpresentasikan sebagai objek Header Terstruktur untuk HTTP yang berisi item yang nilainya adalah string. Misalnya, untuk menyampaikan bahwa pengguna lebih memilih tema gelap dan gerakan yang dikurangi, petunjuk klien akan terlihat seperti contoh di bawah.

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

CSS yang setara dengan informasi yang disampaikan dalam petunjuk klien di atas adalah @media (prefers-color-scheme: dark) {} dan @media (prefers-reduced-motion: reduce) {}.

Daftar lengkap petunjuk klien

Daftar petunjuk klien dibuat berdasarkan fitur media preferensi pengguna di Kueri Media Level 5.

Petunjuk Klien Nilai yang Diizinkan Fitur Media Preferensi Pengguna yang Sesuai
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

Dukungan browser

Header petunjuk klien Sec-CH-Prefers-Color-Scheme didukung di Chromium 93. Header petunjuk klien Sec-CH-Prefers-Reduced-Motion didukung di Chromium 108. Masukan vendor lain, yaitu WebKit dan Mozilla, masih menunggu keputusan.

Demo Sec-CH-Prefers-Color-Scheme

Coba demo di Chromium 93 dan perhatikan bagaimana CSS yang disisipkan berubah sesuai dengan skema warna pilihan pengguna.

Sec-CH-Prefers-Color-Scheme: dark

Sec-CH-Prefers-Color-Scheme: light

Demo Sec-CH-Prefers-Reduced-Motion

Coba demo di Chromium 108 dan perhatikan bagaimana CSS yang disisipkan berubah sesuai dengan preferensi gerakan pengguna.

Cara kerjanya

  1. Klien membuat permintaan awal ke server. bash GET / HTTP/2 Host: example.com
  2. Server merespons, memberi tahu klien melalui Accept-CH bahwa server menerima Sec-CH-Prefers-Color-Scheme dan Petunjuk Klien Sec-CH-Prefers-Contrast, yang darinya sesuai dengan Critical-CH, server menganggap Sec-CH-Prefers-Color-Scheme sebagai Petunjuk Klien Kritis yang juga memvariasikan respons seperti yang disampaikan oleh 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. Kemudian, klien mencoba lagi permintaan tersebut, dengan memberi tahu server melalui Sec-CH-Prefers-Color-Scheme bahwa klien memiliki preferensi pengguna untuk konten dengan skema gelap. bash GET / HTTP/2 Host: example.com Sec-CH-Prefers-Color-Scheme: "dark"
  4. Server kemudian dapat menyesuaikan respons dengan preferensi klien dan, misalnya, menyisipkan CSS yang bertanggung jawab untuk tema gelap ke dalam isi respons.

Contoh Node.js

Contoh Node.js di bawah, yang ditulis untuk framework Express.js yang populer, menunjukkan cara menangani header petunjuk klien Sec-CH-Prefers-Color-Scheme dalam praktiknya. Kode ini yang sebenarnya mendukung demo di atas.

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

Pertimbangan privasi dan keamanan

Tim Chromium mendesain dan menerapkan Header Petunjuk Klien Fitur Media Preferensi Pengguna menggunakan prinsip inti yang ditentukan dalam Mengontrol Akses ke Fitur Platform Web yang Andal, termasuk kontrol pengguna, transparansi, dan ergonomi.

Pertimbangan Keamanan HTTP Client Hints dan Pertimbangan Keamanan Keandalan Client Hint juga berlaku untuk proposal ini.

Referensi

Ucapan terima kasih

Terima kasih banyak atas masukan dan saran yang berharga dari Yoav Weiss. Gambar hero oleh Tdadamemd di Wikimedia Commons.