رسانه ترجیحی کاربر دارای سرصفحه نکات مشتری است

مجموعه‌ای از هدرهای راهنمایی مشتری به سایت‌ها اجازه می‌دهد تا تنظیمات رسانه‌ای کاربر را به صورت اختیاری در زمان درخواست به دست آورند، و به سرورها اجازه می‌دهد تا CSS مناسب را به دلایل عملکردی درون خطی کنند.

فرانسوا بوفور
François Beaufort
GitHub
توماس اشتاینر

درخواست‌های رسانه CSS، و به‌ویژه ویژگی‌های رسانه ترجیحی کاربر مانند prefers-color-scheme یا prefers-reduced-motion ، تأثیر بالقوه قابل توجهی بر مقدار CSS که باید توسط یک صفحه ارائه شود، و تجربه کاربر دارد. در هنگام بارگیری صفحه داشته باشید.

تمرکز بر prefers-color-scheme - اما تاکید بر اینکه استدلال برای سایر ویژگی‌های رسانه ترجیحی کاربر نیز اعمال می‌شود - بهترین روش این است که CSS را برای طرح رنگی غیر منطبق در مسیر رندر بحرانی بارگیری نکنید و در عوض در ابتدا فقط CSS مربوطه را بارگیری کنید. یکی از راه های انجام این کار از طریق <link media> است.

با این حال، سایت‌های پربازدید مانند جستجوی Google که می‌خواهند به ویژگی‌های رسانه ترجیحی کاربر مانند prefers-color-scheme و CSS درون خطی به دلایل عملکردی احترام بگذارند، باید در مورد طرح رنگ ترجیحی (یا سایر ویژگی‌های رسانه ترجیحی کاربر به ترتیب) اطلاعات ایده‌آل داشته باشند. زمان درخواست، به طوری که پیلود اولیه 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 به درستی گزارش می‌شود.

پیشینه نکات مهم مشتری

نکات مشتری پیشنهادی در ویژگی‌های رسانه ترجیحی کاربر سرصفحه نکات مشتری احتمالاً بیشتر به عنوان نکات مهم مشتری استفاده می‌شود. نکات مهم مشتری، نکات مشتری هستند که به طور معناداری منبع حاصل را تغییر می دهند. چنین منبعی باید به‌طور پیوسته در بارگذاری‌های صفحه (از جمله بارگذاری اولیه صفحه) واکشی شود تا از سوئیچ‌های قابل مشاهده کاربر جلوگیری شود.

نحو راهنمایی مشتری

ویژگی‌های رسانه ترجیحی کاربر شامل یک نام (مانند 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) {} است.

لیست کامل نکات مشتری

لیست نکات مشتری بر اساس ویژگی های رسانه ترجیحی کاربر در Media Queries سطح 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 Client نکات را می پذیرد که طبق Critical-CH Sec-CH-Prefers-Color-Scheme در نظر می گیرد. Sec-CH-Prefers-Color-Scheme a Critical Client اشاره می کند که پاسخ را نیز همانطور که توسط 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 با استفاده از اصول اصلی تعریف شده در کنترل دسترسی به ویژگی‌های قدرتمند پلتفرم وب ، از جمله کنترل کاربر، شفافیت، و ارگونومی، هدرهای ویژگی‌های رسانه ترجیحی کاربر را طراحی و اجرا کرد.

ملاحظات امنیتی HTTP Client Hints و ملاحظات امنیتی Client Hint Reliability نیز در این پیشنهاد اعمال می شود.

منابع

سپاسگزاریها

با تشکر فراوان برای بازخورد و توصیه های ارزشمند Yoav Weiss . تصویر قهرمان توسط Tdadamemd در Wikimedia Commons .