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

קבוצה של כותרות של רמזים ללקוח מאפשרת לאתרים לקבל את העדפות המדיה של המשתמש, אם רוצים, בזמן הבקשה, וכך מאפשרת לשרתים להטמיע את ה-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 שמפורטות בקטע כותרות של Client Hints של תכונות מדיה בהתאם להעדפות המשתמש יהיה כClient Hints קריטיים. רמזים קריטיים ללקוחות הם רמזים ללקוחות שמשנים באופן משמעותי את המשאב שמתקבל. כדי למנוע מעבר חד שגלוי למשתמשים, צריך לאחזר משאב כזה באופן עקבי בכל טעינת דף (כולל טעינת הדף הראשונית).

תחביר של רמזים ללקוחות

תכונות המדיה של העדפות המשתמש מורכבות משם (כמו prefers-reduced-motion) וערכים מותרים (כמו no-preference או reduce). כל שדה כותרת של הרמז של לקוח מיוצג כאובייקט Structured Headers for HTTP (כותרות מובנות של 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.