CSS medya sorguları ve özellikle kullanıcı tercihi medya özellikleri beğenmek prefers-color-scheme veya prefers-reduced-motionpotansiyele sahip önemli bir etkisi bir sayfa tarafından iletilmesi gereken CSS miktarı ve sayfa yüklendiğinde kullanıcının sahip olacağı deneyim.
Odaklanmak prefers-color-scheme– ancak mantığın diğer kullanıcı tercihi medya özellikleri için de geçerli olduğunu vurgulayarak – kritik oluşturma yolundaki belirli eşleşmeyen renk şeması için CSS’yi yüklememek ve bunun yerine başlangıçta yalnızca o anda ilgili CSS’yi yüklemek en iyi uygulamadır. Bunu yapmanın bir yolu, <link media>.
Ancak, yüksek trafikli siteler gibi Google arama gibi kullanıcı tercihi medya özelliklerini onurlandırmak isteyen prefers-color-scheme ve performans nedenleriyle satır içi CSS’nin tercih edilen renk şemasını (veya sırasıyla diğer kullanıcı tercihi medya özelliklerini) ideal olarak istek zamanında bilmesi gerekir, böylece ilk HTML yükünde zaten doğru CSS satır içi bulunur.
Ek olarak ve özellikle prefers-color-schemesiteler kesinlikle kaçınmak istiyor yanlış renk teması flaşı.
bu Sec-CH-Prefers-Color-Scheme ve Sec-CH-Prefers-Reduced-Motion istemci ipucu başlıkları, bir kullanıcı tercihi medya özellikleri serisi istemci ipuçları başlıkları bu sorunu çözmeyi amaçlıyor.
İstemci ipuçlarıyla ilgili arka plan #
HTTP İstemci İpuçları tanımlar Accept-CH sunucuların proaktif içerik anlaşması için istek başlıklarını kullanımlarının reklamını yapmak için kullanabilecekleri, halk arasında istemci ipuçları olarak adlandırılan yanıt başlığı. bu Kullanıcı Tercihi Medya Özellikleri İstemci İpuçları Başlıklar teklif, kullanıcı tercihi medya özelliklerini iletmeyi amaçlayan bir dizi müşteri ipucunu tanımlar. Bu istemci ipuçları, rapor ettikleri ilgili kullanıcı tercihi medya özelliğinin adını alır. Örneğin, şu anda tercih edilen renk şemasına göre prefers-color-scheme uygun şekilde adlandırılmış aracılığıyla rapor edilir Sec-CH-Prefers-Color-Scheme müşteri ipucu.
Kritik müşteri ipuçlarıyla ilgili arka plan #
istemci ipuçları önerilen Kullanıcı Tercihi Medya Özellikleri İstemci İpuçları Başlıklar muhtemelen en yaygın olarak kullanılacaktır Kritik İstemci İpuçları. Kritik İstemci İpuçları, ortaya çıkan kaynağı anlamlı bir şekilde değiştiren İstemci İpuçlarıdır. Böyle bir kaynak, sayfa yüklemelerinde tutarlı bir şekilde getirilmelidir (dahil ilk kullanıcı tarafından görülebilen anahtarların sarsılmasını önlemek için sayfa yükleme).
İstemci ipucu sözdizimi #
Kullanıcı tercihi ortam özellikleri bir addan oluşur (örneğin prefers-reduced-motion) ve izin verilen değerler (gibi no-preference veya reduce). Her müşteri ipucu başlık alanı şu şekilde temsil edilir: HTTP için Yapılandırılmış Başlıklar içeren nesne öğe kimin değeri a sicim. Örneğin, kullanıcının karanlık bir temayı ve azaltılmış hareketi 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 karşılığı şu şekildedir: TheComedicComedian (prefers-color-scheme: dark) {} Ve TheComedicComedian (prefers-reduced-motion: reduce) {} sırasıyla.
İstemci ipuçlarının tam listesi #
İstemci ipuçlarının listesi aşağıdakilere göre modellenmiştir: kullanıcı tercihi medya özellikleri içinde Medya Sorguları Seviye 5.
tarayıcı desteği #
bu 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. WebKit’ler Ve Mozilla’nınbeklemede.
demosu Sec-CH-Prefers-Color-Scheme #
deneyin gösteri Chromium 93’te ve satır içi CSS’nin kullanıcının tercih ettiği renk şemasına göre nasıl değiştiğine dikkat edin.
demosu Sec-CH-Prefers-Reduced-Motion #
deneyin gösteri Chromium 108’de ve satır içi CSS’nin kullanıcının hareket tercihlerine göre nasıl değiştiğine dikkat edin.
Nasıl çalışır #
- İstemci, sunucuya bir ilk istekte bulunur.
GET / HTTP/2
Host: example.com - Sunucu yanıt verir ve istemciye şunu söyler:
Accept-CHkabul ettiğiniSec-CH-Prefers-Color-SchemeveSec-CH-Prefers-Contrastİstemci İpuçları,Critical-CHdikkate alırSec-CH-Prefers-Color-Schemetarafından iletildiği şekliyle yanıtı da değiştirdiğine dair bir Kritik Müşteri İpucuVary.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 - İstemci daha sonra isteği yeniden dener ve sunucuya şunu söyler:
Sec-CH-Prefers-Color-Schemekaranlık planlı içerik için bir kullanıcı tercihine sahip olmasıdır.GET / HTTP/2
Host: example.com
Sec-CH-Prefers-Color-Scheme: "dark" - Sunucu daha sonra yanıtı müşterinin tercihlerine göre uyarlayabilir ve örneğin, karanlık temadan sorumlu CSS’yi yanıt gövdesine yerleştirebilir.
Node.js örneği #
Popüler Express.js çerçevesi için yazılmış aşağıdaki Node.js örneği, Sec-CH-Prefers-Color-Scheme istemci ipucu başlığı pratikte böyle görünebilir. Bu kod, aslında gösteri üstünde.
app.get("http://web.dev/", (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üvenlik hususları #
Chromium ekibi, şu bölümde tanımlanan temel ilkeleri kullanarak Kullanıcı Tercihi Medya Özellikleri İstemci İpuçları Başlıklarını tasarladı ve uyguladı: Güçlü Web Platformu Özelliklerine Erişimi Kontrol Etmekullanıcı kontrolü, şeffaflık ve ergonomi dahil.
bu Güvenlik Hususları HTTP İstemci İpuçları ve Güvenlik Hususları Müşteri İpucu Güvenilirliği aynı şekilde bu teklif için geçerlidir.
Referanslar #
teşekkürler #
Değerli geri bildirimleriniz ve tavsiyeleriniz için çok teşekkürler Yoav Weiss. Kahraman görseli tdadamemd Açık Wikimedia Commons.