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.
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.
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
- Klien membuat permintaan awal ke server.
bash GET / HTTP/2 Host: example.com
- Server merespons, memberi tahu klien melalui
Accept-CH
bahwa server menerimaSec-CH-Prefers-Color-Scheme
dan Petunjuk KlienSec-CH-Prefers-Contrast
, yang darinya sesuai denganCritical-CH
, server menganggapSec-CH-Prefers-Color-Scheme
sebagai Petunjuk Klien Kritis yang juga memvariasikan respons seperti yang disampaikan olehVary
.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
- 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"
- 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
- Draf spesifikasi
- Penjelas
- Sec-CH-Prefers-Color-Scheme - entri Status Chrome
- Sec-CH-Prefers-Color-Scheme - Bug Chromium
- Sec-CH-Prefers-Reduced-Motion - entri Status Chrome
- Sec-CH-Prefers-Reduced-Motion - Bug Chromium
- Thread WebKit
- Posisi Standar Mozilla
- Petunjuk Klien
- Keandalan Petunjuk Klien
- Kueri Media Level 5
- Header Terstruktur untuk HTTP
Ucapan terima kasih
Terima kasih banyak atas masukan dan saran yang berharga dari Yoav Weiss. Gambar hero oleh Tdadamemd di Wikimedia Commons.