Header petunjuk klien fitur media preferensi pengguna

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

François Beaufort
François Beaufort
GitHub
Thomas Steiner

Kueri media CSS, dan khususnya fitur media preferensi pengguna seperti prefers-color-scheme atau prefers-reduced-motion, berpotensi berdampak signifikan terhadap jumlah CSS yang perlu ditampilkan oleh halaman, dan terhadap pengalaman yang akan dimiliki pengguna saat halaman dimuat.

Berfokus pada prefers-color-scheme—tetapi menyoroti bahwa alasan 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 hanya memuat CSS yang saat ini relevan. Salah satu cara melakukannya adalah melalui <link media>.

Namun, situs dengan traffic tinggi, seperti Google Penelusuran, yang ingin menggunakan fitur media preferensi pengguna, seperti prefers-color-scheme dan CSS inline, untuk alasan performa, perlu mengetahui skema warna yang diinginkan (atau masing-masing fitur media preferensi pengguna lainnya) idealnya pada waktu permintaan, agar payload HTML awal sudah memiliki CSS yang tepat secara inline.

Selain itu, dan khususnya untuk prefers-color-scheme, situs tentu ingin menghindari flash tema warna yang tidak akurat.

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

Latar belakang petunjuk klien

Petunjuk Klien HTTP menentukan header respons Accept-CH yang dapat digunakan server untuk mengiklankan penggunaan header permintaan untuk negosiasi konten proaktif, yang dalam bahasa sehari-hari disebut sebagai client hints. Proposal User Preference Media Features Client Hints Headers menentukan serangkaian petunjuk klien yang bertujuan untuk menyampaikan fitur media preferensi pengguna. Petunjuk klien ini diberi nama berdasarkan fitur media preferensi pengguna yang sesuai yang dilaporkan. Misalnya, skema warna pilihan saat ini sesuai prefers-color-scheme dilaporkan melalui petunjuk klien Sec-CH-Prefers-Color-Scheme yang diberi nama tepat.

Latar belakang petunjuk penting dari klien

Petunjuk klien yang diusulkan di Header Petunjuk Klien Fitur Media Preferensi Pengguna kemungkinan akan paling umum digunakan sebagai Petunjuk Klien Penting. Petunjuk Klien Penting adalah Petunjuk Klien yang mengubah resource yang dihasilkan secara signifikan. Resource tersebut harus diambil secara konsisten di seluruh pemuatan halaman (termasuk pemuatan halaman initial) untuk menghindari gangguan 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 pada 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 client hints di atas masing-masing adalah @media (prefers-color-scheme: dark) {} dan @media (prefers-reduced-motion: reduce) {}.

Daftar lengkap client hints

Daftar petunjuk klien dibuat sesuai model 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: gelap

Sec-CH-Prefers-Color-Scheme: terang

Demo Sec-CH-Prefers-Reduced-Motion

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

Cara kerjanya

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

Contoh Node.js

Contoh Node.js di bawah ini, yang ditulis untuk framework Express.js populer, menunjukkan contoh praktik penggunaan header petunjuk klien Sec-CH-Prefers-Color-Scheme. Kode inilah 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 merancang dan menerapkan Header Petunjuk Klien Fitur Media Preferensi Pengguna menggunakan prinsip inti yang ditetapkan dalam Mengontrol Akses ke Fitur Platform Web yang Canggih, termasuk kontrol pengguna, transparansi, dan ergonomi.

Pertimbangan Keamanan untuk Petunjuk Klien HTTP dan Pertimbangan Keamanan juga berlaku untuk proposal ini.

Referensi

Ucapan terima kasih

Terima kasih banyak atas masukan dan sarannya yang berharga dari Yoav Weiss. Banner besar oleh Tdadamemd di Wikimedia Commons.