Kullanıcı tercihi medya özellikleri istemci ipucu üstbilgileri

Bir dizi istemci ipucu başlığı, sitelerin istek zamanında kullanıcının medya tercihlerini isteğe bağlı olarak almasına olanak tanıyarak sunucuların performans nedeniyle doğru CSS'yi satır içine almasına olanak tanır.

François Beaufort
François Beaufort
GitHub
Thomas Steiner

CSS medya sorguları ve özellikle prefers-color-scheme veya prefers-reduced-motion gibi kullanıcı tercihi medya özellikleri, bir sayfa tarafından yayınlanması gereken CSS miktarı ve kullanıcının sayfa yüklendiğinde yaşayacağı deneyim üzerinde potansiyel olarak önemli bir etkiye sahiptir.

prefers-color-scheme öğesine odaklanmak (ancak bu gerekçenin diğer kullanıcı tercih medya özellikleri için de geçerli olduğunu vurgulamak) en iyi uygulamadır. CSS'yi kritik oluşturma yolunda eşleşmeyen belirli renk şeması için yüklememek ve başlangıçta yalnızca şu anda alakalı CSS'yi yüklemek en iyi uygulamadır. Bunu yapmanın bir yolu <link media> aracılığıyla.

Bununla birlikte, Google Arama gibi kullanıcı tercih medya özelliklerini (ör. prefers-color-scheme) ve performans nedeniyle satır içi CSS'yi dikkate almak isteyen yüksek trafik alan siteler, ideal olarak istek zamanında tercih edilen renk şemasını (veya diğer kullanıcı tercihi medya özelliklerini) bilmelidir. Böylece, ilk HTML yükü zaten doğru CSS'yi satır içi olarak bulundurmalıdır.

Buna ek olarak, özellikle de prefers-color-scheme söz konusu olduğunda siteler hatalı renk temasının yanıp sönmesini önlemek ister.

Sec-CH-Prefers-Color-Scheme ve Sec-CH-Prefers-Reduced-Motion istemci ipucu başlıkları, bu sorunu çözmeyi amaçlayan bir kullanıcı tercihi medya özellikleri istemci ipucu başlıkları dizisinin ilkidir.

İstemci ipuçlarının arka planı

HTTP İstemci İpuçları, sunucuların proaktif içerik müzakeresi için istek üstbilgileri kullanımının reklamını yapmak üzere kullanabileceği bir Accept-CH yanıt üst bilgisi tanımlar. Bu başlık, konuşma dilinde istemci ipuçları olarak adlandırılır. Kullanıcı Tercihi Medya Özellikleri İstemci İpuçları Başlıkları teklifi, kullanıcı tercihi medya özelliklerini iletmeye yönelik bir dizi istemci ipucunu tanımlar. Bu istemci ipuçları, raporlanan ilgili kullanıcı tercihi medya özelliğine göre adlandırılır. Örneğin, prefers-color-scheme uyarınca şu anda tercih edilen renk şeması, uygun şekilde adlandırılmış Sec-CH-Prefers-Color-Scheme istemci ipucu aracılığıyla raporlanır.

Kritik müşteri ipuçlarıyla ilgili arka plan

Kullanıcı Tercihi Medya Özellikleri İstemci İpucu Başlıkları'nda önerilen istemci ipuçları, muhtemelen Kritik İstemci İpuçları olarak kullanılacaktır. Kritik İstemci İpuçları, sonuçta kullanılacak kaynağı anlamlı bir şekilde değiştiren Müşteri İpuçlarıdır. Kullanıcı tarafından görülebilen anahtarların sarsıcı olmasını önlemek için bu tür bir kaynak, sayfa yüklemelerinde (initial sayfa yükleme işlemi dahil) tutarlı bir şekilde getirilmelidir.

İstemci ipucu söz dizimi

Kullanıcı tercihi medya özellikleri bir addan (prefers-reduced-motion gibi) ve izin verilen değerlerden (no-preference veya reduce gibi) oluşur. Her istemci ipucu başlık alanı, değeri dize olan bir öğe içeren HTTP için Yapılandırılmış Üstbilgiler nesnesi olarak temsil edilir. Örneğin, kullanıcının koyu bir temayı ve daha az hareketi tercih ettiğini aktarmak için istemci ipuçları aşağıdaki örnekte olduğu gibi görünür.

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

Yukarıdaki istemci ipuçlarında iletilen bilgilerin CSS eşdeğeri, sırasıyla @media (prefers-color-scheme: dark) {} ve @media (prefers-reduced-motion: reduce) {} şeklindedir.

İstemci ipuçlarının tam listesi

İstemci ipuçlarının listesi, Medya Sorguları Düzeyi 5'teki kullanıcı tercihi medya özelliklerine göre modellenir.

İstemci İpucu İzin Verilen Değerler İlgili Kullanıcı Tercihi Medya Özelliği
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

Tarayıcı desteği

Sec-CH-Prefers-Color-Scheme istemci ipucu başlığı Chromium 93'te desteklenir. Sec-CH-Prefers-Reduced-Motion istemci ipucu başlığı Chromium 108'de desteklenir. Diğer satıcıların, yani WebKit'in ve Mozilla'nın geri bildirimleri beklemede.

Sec-CH-Prefers-Color-Scheme demosu

Chromium 93'teki demoyu deneyerek satır içi CSS'nin kullanıcının tercih ettiği renk şemasına göre nasıl değiştiğine bakın.

Sec-CH-Prefers-Color-Scheme: koyu

Sec-CH-Prefers-Color-Scheme: açık

Sec-CH-Prefers-Reduced-Motion demosu

Chromium 108'deki demoyu deneyerek satır içi CSS'nin kullanıcının hareket tercihlerine göre nasıl değiştiğine bakın.

İşleyiş şekli

  1. İstemci sunucuya bir ilk istek gönderir. bash GET / HTTP/2 Host: example.com
  2. Sunucu yanıt verir ve Accept-CH aracılığıyla istemciye, Sec-CH-Prefers-Color-Scheme ve Sec-CH-Prefers-Contrast İstemci İpuçlarını kabul ettiğini bildirir. Critical-CH uyarınca, Sec-CH-Prefers-Color-Scheme bilgisini Vary ile iletilen şekilde Kritik İstemci İpucu olarak kabul eder. 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. Ardından istemci, isteği yeniden deneyerek Sec-CH-Prefers-Color-Scheme aracılığıyla sunucuya kullanıcının koyu planlı içeriği tercih ettiğini bildirir. bash GET / HTTP/2 Host: example.com Sec-CH-Prefers-Color-Scheme: "dark"
  4. Daha sonra sunucu, yanıtı istemcinin tercihlerine uygun şekilde özelleştirebilir ve örneğin, koyu temadan sorumlu CSS'yi yanıt gövdesinde satır içine alabilir.

Node.js örneği

Popüler Express.js çerçevesi için yazılan aşağıdaki Node.js örneği, Sec-CH-Prefers-Color-Scheme istemci ipucu başlığıyla anlaşmanın pratikte nasıl görünebileceğini göstermektedir. Yukarıdaki demo bu kodla desteklenir.

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

Gizlilik ve güvenlikle ilgili dikkat edilmesi gereken noktalar

Chromium ekibi; kullanıcı denetimi, şeffaflık ve ergonomi dahil olmak üzere Güçlü Web Platformu Özelliklerine Erişimi Kontrol Etme bölümünde tanımlanan temel ilkeleri kullanarak Kullanıcı Tercihi Medya Özellikleri Medya Özellikleri İstemci İpucu Başlıklarını tasarladı ve uyguladı.

HTTP İstemci İpuçlarının Güvenlikle İlgili Dikkat Edilmesi Gerekenler ve İstemci İpucu Güvenilirliği ile ilgili Güvenlikle İlgili Dikkat Edilmesi Gerekenler bu teklif için de aynı şekilde geçerlidir.

Referanslar

Teşekkür

Yoav Weiss'tan değerli geri bildirimler ve tavsiyeler için çok teşekkür ederiz. Wikimedia Commons'da Tdadamemd tarafından hazırlanan lokomotif resim.