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

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

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

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

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

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

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

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

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

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

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

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

Sec-CH-Prefers-Color-Scheme: כהה

Sec-CH-Prefers-Color-Scheme: בהיר

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

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

קובצי עזר

אישורים

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