תכונות מדיה של העדפת המשתמש – כותרות של טיפים ללקוח

קבוצה של כותרות של רמזים ללקוח מאפשרת לאתרים לקבל את העדפות המדיה של המשתמש, אם רוצים, בזמן הבקשה, וכך מאפשרת לשרתים להטמיע את ה-CSS הנכון בקוד, מטעמי ביצועים.

François Beaufort
François Beaufort
GitHub
Thomas Steiner

לשאילתות מדיה של CSS, ובמיוחד לתכונות מדיה לפי העדפות המשתמש כמו prefers-color-scheme או prefers-reduced-motion, יש השפעה משמעותית על כמות ה-CSS שצריך להעביר בדף ועל החוויה שהמשתמש ייהנה ממנה כשהדף ייטען.

נתמקדים ב-prefers-color-scheme, אבל חשוב לציין שההסבר רלוונטי גם למאפייני מדיה אחרים של העדפות משתמשים. מומלץ לא לטעון CSS של ערכת הצבעים הספציפית שלא תואמת בנתיב הרנדר הקריטי, אלא לטעון בהתחלה רק את ה-CSS הרלוונטי הנוכחי. אחת מהדרכים לעשות זאת היא דרך <link media>.

עם זאת, אתרים עם נפח תנועה גבוה כמו חיפוש Google, שרוצים לפעול בהתאם להעדפות המדיה של המשתמשים כמו prefers-color-scheme ומשתמשים ב-CSS מוטמע מסיבות ביצועים, צריכים לדעת מהי ערכת הצבעים המועדפת (או תכונות מדיה אחרות בהתאם להעדפות המשתמשים) באופן אידיאלי בזמן הבקשה, כדי ש-CSS הנכון יופיע כבר במטען הייעודי (payload) הראשוני של ה-HTML.

בנוסף, ובמיוחד לגבי prefers-color-scheme, אתרים צריכים להימנע בכל מחיר מהצגה קצרה של עיצוב צבע לא מדויק.

כותרות ההנחיות ללקוח Sec-CH-Prefers-Color-Scheme ו-Sec-CH-Prefers-Reduced-Motion הן הראשונות מתוך סדרה של כותרות של הנחיות ללקוח לגבי תכונות מדיה בהתאם להעדפות המשתמש שנועדו לפתור את הבעיה הזו.

רקע על רמזים על הלקוח

HTTP Client Hints מגדיר כותרת תגובה Accept-CH שבה שרתים יכולים להשתמש כדי לפרסם את השימוש שלהם בכותרות בקשה לצורך משא ומתן יזום על תוכן. כותרות כאלה נקראות בקיצור 'HTTP Client Hints'. ההצעה כותרות של רמזים על הלקוח (Client Hints) לגבי תכונות מדיה בהתאם להעדפות המשתמש מגדירה קבוצה של רמזים על הלקוח שמטרתם להעביר תכונות מדיה בהתאם להעדפות המשתמש. ההצעות האלה ללקוח נקראות על שם תכונת המדיה המתאימה של העדפות המשתמש שעליהן הן מדווחות. לדוגמה, ערכת הצבעים המועדפת הנוכחית לפי prefers-color-scheme מדווחת באמצעות ההצעה למשתמש (hint) Sec-CH-Prefers-Color-Scheme.

רקע על רמזים קריטיים על הלקוח

סביר להניח שהשימוש הנפוץ ביותר בהצעות לטיפים ללקוח שמפורטות בקטע כותרות של טיפים ללקוח לגבי תכונות מדיה בהתאם להעדפות המשתמשים יהיה כטיפים קריטיים ללקוח. רמזים קריטיים על הלקוח הם רמזים על הלקוח שמשנים באופן משמעותי את המשאב שנוצר. כדי למנוע מעבר חד שגלוי למשתמשים, צריך לאחזר משאב כזה באופן עקבי בכל טעינת דף (כולל טעינת הדף הראשונית).

התחביר של רמזים על הלקוח (Client Hints)

מאפייני המדיה של העדפות המשתמש מורכבים משם (כמו prefers-reduced-motion) וערכים מותרים (כמו no-preference או reduce). כל שדה כותרת של רמז ללקוח מיוצג כאובייקט Structured Headers for HTTP שמכיל פריט שהערך שלו הוא מחרוזת. לדוגמה, כדי להעביר את המסר שהמשתמש מעדיף עיצוב כהה ותנועה מופחתת, הטיפים ללקוח נראים כמו בדוגמה הבאה.

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

המקבילה ב-CSS למידע שמוענק בהצעות הלקוח שלמעלה היא @media (prefers-color-scheme: dark) {} ו-@media (prefers-reduced-motion: reduce) {}, בהתאמה.

רשימה מלאה של הטיפים ללקוח

רשימת ההנחיות ללקוח מבוססת על תכונות המדיה של העדפות המשתמש בשאילתות מדיה ברמה 5.

רמז על הלקוח ערכים מותרים התכונה התואמת של מדיה בהעדפות המשתמש
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

תמיכה בדפדפנים

הכותרת Sec-CH-Prefers-Color-Scheme של רמזים ללקוח נתמכת ב-Chromium 93. הכותרת Sec-CH-Prefers-Reduced-Motion של רמזים ללקוח נתמכת ב-Chromium 108. אנחנו ממתינים למשוב מספקים אחרים, כולל WebKit ו-Mozilla.

הדגמה של Sec-CH-Prefers-Color-Scheme

כדאי לנסות את הדמו ב-Chromium 93 ולראות איך הקוד של CSS שמוטמע בקוד ה-HTML משתנה בהתאם לערכת הצבעים המועדפת על המשתמש.

Sec-CH-Prefers-Color-Scheme: dark

Sec-CH-Prefers-Color-Scheme: light

הדגמה של Sec-CH-Prefers-Reduced-Motion

כדאי לנסות את הדמו ב-Chromium 108 ולראות איך ה-CSS המוטמע משתנה בהתאם להעדפות התנועה של המשתמש.

איך זה עובד

  1. הלקוח שולח בקשה ראשונית לשרת. bash GET / HTTP/2 Host: example.com
  2. השרת משיב ומציין ללקוח באמצעות Accept-CH שהוא מקבל את ההנחיות ללקוח מסוג Sec-CH-Prefers-Color-Scheme ו-Sec-CH-Prefers-Contrast, ומתוכן, בהתאם ל-Critical-CH, הוא מחשיב את ההנחיה ללקוח מסוג Sec-CH-Prefers-Color-Scheme כהנחיה קריטית ללקוח, שגם על סמך ההנחיה הזו הוא משנה את התגובה, כפי שמתואר ב-Vary. 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. לאחר מכן הלקוח ינסה שוב את הבקשה, ויודיע לשרת באמצעות Sec-CH-Prefers-Color-Scheme שיש לו העדפה של משתמש לתוכן עם עיצוב כהה. bash GET / HTTP/2 Host: example.com Sec-CH-Prefers-Color-Scheme: "dark"
  4. לאחר מכן, השרת יכול להתאים אישית את התגובה בהתאם להעדפות של הלקוח, ולמשל להוסיף את קובץ ה-CSS שאחראי לעיצוב הכהה לגוף התגובה.

דוגמה ל-Node.js

בדוגמה הבאה ל-Node.js, שנכתבה למסגרת הפופולרית Express.js, אפשר לראות איך נראית בפועל העבודה עם הכותרת של ההנחיה ללקוח Sec-CH-Prefers-Color-Scheme. הקוד הזה הוא זה שמפעיל את הדגמה שלמעלה.

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

שיקולי פרטיות ואבטחה

צוות Chromium תכנן והטמיע כותרות של Hints ללקוח של תכונות מדיה בהתאם להעדפות המשתמש, על סמך העקרונות המרכזיים שמוגדרים במאמר בקרת הגישה לתכונות חזקות של פלטפורמת אינטרנט, כולל שליטה על ידי המשתמש, שקיפות וארגונומיה.

גם שיקולי האבטחה לגבי הנחיות לקוח ב-HTTP ושיקולי האבטחה לגבי מהימנות ההנחיות לקוח חלים על ההצעה הזו.

קובצי עזר

תודות

תודה רבה על המשוב והעצות החשובים של יואב וויס. התמונה הראשית (Hero) של Tdadamemd ב-Wikimedia Commons.