ส่วนหัวคำแนะนำสำหรับไคลเอ็นต์ของฟีเจอร์สื่อสำหรับค่ากำหนดของผู้ใช้

ชุดของส่วนหัวคำแนะนำไคลเอ็นต์ช่วยให้เว็บไซต์สามารถรับค่ากำหนดสื่อของผู้ใช้ (ไม่บังคับ) ในเวลาที่ขอ ทำให้เซิร์ฟเวอร์สามารถแทรก 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 Search ซึ่งต้องการให้เป็นไปตามฟีเจอร์สื่อที่ต้องการของผู้ใช้ เช่น prefers-color-scheme และ CSS ในบรรทัดเพื่อเหตุผลด้านประสิทธิภาพ ก็ต้องรู้เกี่ยวกับรูปแบบสีที่ต้องการ (หรือฟีเจอร์สื่ออื่นๆ ที่ผู้ใช้ชื่นชอบตามลำดับ) เมื่อขอ เพื่อให้เพย์โหลด HTML เริ่มต้นมี CSS ที่เหมาะสมอยู่ในเนื้อหาแล้ว

นอกจากนี้ โดยเฉพาะสำหรับ prefers-color-scheme เว็บไซต์ต่างๆ ต้องการหลีกเลี่ยงธีมสีที่ไม่ถูกต้องในพริบตา

ส่วนหัวของคำแนะนำไคลเอ็นต์ Sec-CH-Prefers-Color-Scheme และ Sec-CH-Prefers-Reduced-Motion เป็นชุดส่วนหัวคำแนะนำสำหรับไคลเอ็นต์ของสื่อสำหรับค่ากำหนดของผู้ใช้ชุดแรกที่มีเป้าหมายเพื่อแก้ปัญหานี้

ความเป็นมาเกี่ยวกับคำใบ้จากลูกค้า

คำแนะนำไคลเอ็นต์ HTTP กำหนดส่วนหัวการตอบกลับ Accept-CH ที่เซิร์ฟเวอร์สามารถใช้เพื่อโฆษณาการใช้ส่วนหัวของคำขอสำหรับการเจรจาเนื้อหาเชิงรุก หรือที่เรียกกันว่าคำแนะนำสำหรับลูกค้า ข้อเสนอส่วนหัวคำแนะนำไคลเอ็นต์สำหรับฟีเจอร์สื่อของค่ากำหนดของผู้ใช้ กำหนดชุดคำแนะนำสำหรับไคลเอ็นต์ที่มีจุดมุ่งหมายเพื่อสื่อถึงฟีเจอร์สื่อที่ผู้ใช้ชื่นชอบ คำแนะนำสำหรับไคลเอ็นต์เหล่านี้จะตั้งชื่อตามฟีเจอร์สื่อค่ากำหนดของผู้ใช้ที่เกี่ยวข้องซึ่งรายงานใช้ เช่น รูปแบบสีที่ต้องการในปัจจุบันตาม prefers-color-scheme จะรายงานผ่านคำแนะนำไคลเอ็นต์ Sec-CH-Prefers-Color-Scheme ซึ่งตั้งชื่อที่เหมาะสม

ความเป็นมาเกี่ยวกับคำใบ้ที่สำคัญสำหรับลูกค้า

คำแนะนำไคลเอ็นต์ที่เสนอใน ส่วนหัวคำแนะนำไคลเอ็นต์สำหรับฟีเจอร์สื่อของค่ากำหนดของผู้ใช้ จะถือว่ามีการใช้มากที่สุดเป็น คำแนะนำไคลเอ็นต์ที่สำคัญ Critical Client Hints คือคำแนะนำสำหรับลูกค้า ซึ่งจะเปลี่ยนแปลงทรัพยากรที่ได้อย่างมาก ควรดึงทรัพยากรดังกล่าวอย่างสม่ำเสมอในการโหลดหน้าเว็บ (รวมถึงการโหลดหน้าเว็บ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

การสนับสนุนเบราว์เซอร์

Chromium 93 รองรับส่วนหัวคำแนะนำไคลเอ็นต์ Sec-CH-Prefers-Color-Scheme Chromium 108 รองรับส่วนหัวคำแนะนำไคลเอ็นต์ Sec-CH-Prefers-Reduced-Motion ความคิดเห็นของผู้ให้บริการรายอื่นๆ เช่น WebKit และ Mozilla กำลังรอดำเนินการ

การสาธิตการใช้ Sec-CH-Prefers-Color-Scheme

ลองใช้การสาธิตใน Chromium 93 แล้วสังเกตการณ์ว่า CSS ในบรรทัดมีการเปลี่ยนแปลงตามรูปแบบสีที่ผู้ใช้ต้องการอย่างไร

Sec-CH-Prefers-รูปแบบสี: มืด

Sec-CH-Prefers-รูปแบบสี: สว่าง

การสาธิตการใช้ 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 Hints ซึ่งตาม 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 ออกแบบและติดตั้งส่วนหัวคำแนะนำไคลเอ็นต์เกี่ยวกับฟีเจอร์สื่อของค่ากำหนดผู้ใช้โดยใช้หลักการสำคัญที่ระบุไว้ในการควบคุมสิทธิ์เข้าถึงฟีเจอร์แพลตฟอร์มเว็บที่มีประสิทธิภาพ ซึ่งรวมถึงการควบคุมของผู้ใช้ ความโปร่งใส และการยศาสตร์

ข้อพิจารณาด้านความปลอดภัยของคำแนะนำไคลเอ็นต์ HTTP และข้อพิจารณาด้านความปลอดภัยด้านความน่าเชื่อถือของคำแนะนำไคลเอ็นต์ก็มีผลกับข้อเสนอนี้เช่นกัน

รายการอ้างอิง

ข้อความแสดงการยอมรับ

ขอขอบคุณอย่างยิ่งสำหรับความคิดเห็นและคำแนะนำที่มีค่าจาก Yoav Weiss รูปภาพหลักโดย Tdadamemd ในWikimedia Commons