İ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.
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 başlıkları, bu sorunu çözmeyi amaçlayan kullanıcı tercihi medya özellikleri içeren istemci ipucu başlıkları serisinin ilkidir.
İ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ı teklifi, kullanıcı tercihi medya özelliklerini iletmeyi amaçlayan bir dizi istemci ipucunu tanımlar. Bu istemci ipuçları, raporladıkları ilgili kullanıcı tercihi medya özelliğinin adından gelir.
Ö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 sık 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. Bu tür bir kaynak, kullanıcıların görebildiği anahtarların sarsılmasını önlemek için sayfa yüklemelerinde (ilk sayfa yükleme 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ığı alanı, değeri dize olan bir öğe içeren HTTP için Yapılandırılmış Başlıklar nesnesi olarak gösterilir. Ö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 iletilen bilgilerin CSS eşdeğeri sırasıyla @media (prefers-color-scheme: dark) {}
ve @media (prefers-reduced-motion: reduce) {}
.
İ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'da 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-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
- İstemci, sunucuya ilk isteği gönderir.
bash GET / HTTP/2 Host: example.com
- Sunucu yanıt verir ve
Accept-CH
aracılığıyla istemciyeSec-CH-Prefers-Color-Scheme
ileSec-CH-Prefers-Contrast
istemci ipuçlarının kabul edildiğini bildirir.Critical-CH
'a göreSec-CH-Prefers-Color-Scheme
'ü Kritik İstemci İpucu olarak kabul eden sunucu, yanıtıVary
tarafından iletildiği ş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
- 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"
- 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
- Özellik taslağı
- Açıklayıcı
- Sec-CH-Prefers-Color-Scheme: Chrome Durumu girişi
- Sec-CH-Prefers-Color-Scheme - Chromium hatası
- Sec-CH-Prefers-Reduced-Motion - Chrome Durumu girişi
- Sec-CH-Prefers-Reduced-Motion - Chromium hatası
- WebKit ileti dizisi
- Mozilla Standartları Konumlandırması
- İstemci İpuçları
- İstemci İpucu Güvenilirliği
- Medya Sorguları 5. Seviye
- HTTP için Yapılandırılmış Üstbilgiler
Teşekkür ederiz
Yoav Weiss'ten değerli geri bildirim ve tavsiyeler için teşekkür ederiz. Wikimedia Commons'ta Tdadamemd tarafından oluşturulan hero resim.