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

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

ข้อมูลเบื้องต้นเกี่ยวกับคำแนะนำที่สำคัญสำหรับไคลเอ็นต์

คำแนะนำไคลเอ็นต์ที่เสนอในส่วนหัวคำแนะนำไคลเอ็นต์สำหรับฟีเจอร์สื่อตามค่ากำหนดของผู้ใช้คาดว่าจะใช้เป็นคำแนะนำไคลเอ็นต์ที่สำคัญมากที่สุด Client Hints ที่สําคัญคือ Client Hints ที่เปลี่ยนแปลงทรัพยากรที่ได้ในลักษณะที่มีความหมาย ทรัพยากรดังกล่าวควรดึงข้อมูลอย่างสม่ำเสมอเมื่อมีการโหลดหน้าเว็บ (รวมถึงการโหลดหน้าเว็บเริ่มต้น) เพื่อหลีกเลี่ยงการเปลี่ยนที่ผู้ใช้เห็นซึ่งทำให้สะดุด

ไวยากรณ์ของ Client Hints

ฟีเจอร์สื่อที่กำหนดค่าโดยผู้ใช้ประกอบด้วยชื่อ (เช่น prefers-reduced-motion) และค่าที่อนุญาต (เช่น no-preference หรือ reduce) ช่องส่วนหัวคำแนะนำไคลเอ็นต์แต่ละช่องจะแสดงเป็นออบเจ็กต์ Structured Headers สำหรับ 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 ที่ฝังอยู่จะเปลี่ยนแปลงตามรูปแบบสีที่ผู้ใช้ต้องการอย่างไร

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

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

ข้อมูลอ้างอิง

ขอขอบคุณ

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