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

İstemci ipucu başlıkları, sitelerin istekte bulunurken isteğe bağlı olarak kullanıcının medya tercihlerini almasına olanak tanır. Bu sayede sunucular, performans nedeniyle doğru CSS'yi satır içi olarak yerleştirebilir.

François Beaufort
François Beaufort
GitHub
Thomas Steiner

CSS medya sorguları ve özellikle prefers-color-scheme veya prefers-reduced-motion gibi kullanıcı tercihine göre medya özellikleri, bir sayfanın yayınlaması gereken CSS miktarı ve sayfa yüklendiğinde kullanıcının yaşayacağı deneyim üzerinde önemli bir etkiye sahip olabilir.

prefers-color-scheme'e odaklanıyoruz ancak bu gerekçenin diğer kullanıcı tercihi medya özellikleri için de geçerli olduğunu belirtmek isteriz. Kritik oluşturma yolunda eşleşmeyen belirli bir renk şeması için CSS yüklememek ve bunun yerine başlangıçta yalnızca geçerli CSS'yi yüklemek en iyi uygulamadır. Bunu yapmanın bir yolu <link media> üzerindendir.

Ancak Google Arama gibi yüksek trafik alan sitelerin, performans nedeniyle prefers-color-scheme gibi kullanıcı tercihi medya özelliklerini ve satır içi CSS'yi dikkate alması gerekir. Bu nedenle, tercih edilen renk şeması (veya sırasıyla diğer kullanıcı tercihi medya özellikleri) hakkında ideal olarak istek sırasında bilgi sahibi olmaları gerekir. Böylece, ilk HTML yükü zaten doğru CSS'yi satır içi olarak içerir.

Ayrıca, özellikle prefers-color-scheme için siteler yanlış renk teması yanıp sönmesini kesinlikle önlemek ister.

Sec-CH-Prefers-Color-Scheme ve Sec-CH-Prefers-Reduced-Motion istemci ipucu üstbilgileri, bu sorunu çözmeyi amaçlayan bir dizi kullanıcı tercihi medya özelliği istemci ipucu üstbilgisinin ilk örneğidir.

İstemci ipuçları hakkında bilgi

HTTP İstemci İpuçları, sunucuların proaktif içerik pazarlığı için istek üst bilgilerini kullanmalarının reklamını yapmak üzere kullanabileceği bir Accept-CH yanıt üst bilgisini tanımlar. Bu üst bilgi, halk arasında istemci ipuçları olarak adlandırılır. Kullanıcı Tercihi Medya Özellikleri İstemci İpuçları Başlıkları önerisi, kullanıcı tercihi medya özelliklerini iletmeyi amaçlayan bir istemci ipucu grubunu tanımlar. Bu istemci ipuçları, raporladıkları ilgili kullanıcı tercihi medya özelliğinin adından alınır. Örneğin, prefers-color-scheme'e göre şu anda tercih edilen renk şeması, uygun şekilde adlandırılmış Sec-CH-Prefers-Color-Scheme istemci ipucu aracılığıyla bildirilir.

Kritik istemci ipuçları hakkında bilgi

Kullanıcı Tercihi Medya Özellikleri İstemci İpuçları Başlıkları bölümünde önerilen istemci ipuçları, muhtemelen en yaygın olarak Kritik İstemci İpuçları olarak kullanılacaktır. Kritik istemci ipuçları, ortaya çıkan kaynağı anlamlı bir şekilde değiştiren istemci ipuçlarıdır. Kullanıcının fark edeceği ani geçişlerden kaçınmak için bu tür kaynaklar, sayfa yüklemelerinde (ilk sayfa yüklemesi dahil) tutarlı bir şekilde getirilmelidir.

İstemci ipucu söz dizimi

Kullanıcı tercihi medya özellikleri bir ad (prefers-reduced-motion gibi) ve izin verilen değerlerden (no-preference veya reduce gibi) oluşur. Her istemci ipucu üstbilgi 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 tema ve azaltılmış hareket tercih ettiğini iletmek için istemci ipuçları aşağıdaki örnekteki 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 aktarılan bilgilerin CSS eşdeğeri sırasıyla @media (prefers-color-scheme: dark) {} ve @media (prefers-reduced-motion: reduce) {}'dır.

İstemci ipuçlarının tam listesi

İstemci ipuçları listesi, Medya Sorguları 5. Seviye'deki kullanıcı tercihi medya özelliklerine göre modellenmiştir.

İstemci İpucu İzin Verilen Değerler Karşılık gelen 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 tedarikçi firmaların (ör. WebKit ve Mozilla) geri bildirimleri beklemede.

Sec-CH-Prefers-Color-Scheme demosu

Chromium 93'teki demoyu deneyin ve satır içi CSS'nin kullanıcının tercih ettiği renk şemasına göre nasıl değiştiğini fark edin.

Sec-CH-Prefers-Color-Scheme: dark

Sec-CH-Prefers-Color-Scheme: light

Sec-CH-Prefers-Reduced-Motion demosu

Chromium 108'deki demoyu deneyin ve satır içi CSS'nin kullanıcının hareket tercihlerine göre nasıl değiştiğini fark edin.

İşleyiş şekli

  1. İstemci, sunucuya ilk isteği 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 ile Sec-CH-Prefers-Contrast istemci ipuçlarının kabul edildiğini bildirir. Critical-CH uyarınca Sec-CH-Prefers-Color-Scheme'ü Kritik İstemci İpucu olarak kabul eden sunucu, yanıtı Vary tarafından aktarıldığı şekilde de değiştirir. 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 dener ve Sec-CH-Prefers-Color-Scheme aracılığıyla sunucuya koyu renkli temalı içerik için kullanıcı tercihi olduğunu bildirir. bash GET / HTTP/2 Host: example.com Sec-CH-Prefers-Color-Scheme: "dark"
  4. Sunucu daha sonra yanıtı istemcinin tercihlerine göre uyarlayabilir ve örneğin, koyu temadan sorumlu CSS'yi yanıt gövdesine satır içi olarak ekleyebilir.

Node.js örneği

Popüler Express.js çerçevesi için yazılmış aşağıdaki Node.js örneğinde, Sec-CH-Prefers-Color-Scheme istemci ipucu başlığıyla çalışmanın pratikte nasıl görünebileceği gösterilmektedir. Yukarıdaki demo'yu destekleyen şey bu koddur.

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ı kontrolü, şeffaflık ve ergonomi gibi Güçlü Web Platformu Özelliklerine Erişimi Kontrol Etme başlıklı makalede tanımlanan temel ilkeleri kullanarak Kullanıcı Tercihi Medya Özellikleri İstemci İpuçları Üstbilgilerini tasarlayıp uyguladı.

HTTP istemci ipuçlarıyla ilgili Güvenlik Önlemleri ve istemci ipucu güvenilirliğiyle ilgili Güvenlik Önlemleri de bu öneri için geçerlidir.

Referanslar

Teşekkür ederiz

Yoav Weiss'in değerli geri bildirimi ve önerileri için çok teşekkür ederiz. Wikimedia Commons'ta Tdadamemd tarafından oluşturulan hero resim.