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

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

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

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

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

Client Hint ค่าที่อนุญาต ฟีเจอร์สื่อที่เกี่ยวข้องกับค่ากำหนดของผู้ใช้
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 Chromium 108 รองรับส่วนหัวคำแนะนำไคลเอ็นต์ Sec-CH-Prefers-Reduced-Motion ความคิดเห็นของผู้ให้บริการรายอื่นๆ กล่าวคือ WebKit และ Mozilla อยู่ระหว่างรอการพิจารณา

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

ลองใช้เดโมและสังเกตว่า CSS แบบอินไลน์เปลี่ยนแปลงตามรูปแบบสีที่ผู้ใช้ต้องการอย่างไร ดูซอร์สโค้ดได้ที่ GitHub

Sec-CH-Prefers-Color-Scheme: dark

Sec-CH-Prefers-Color-Scheme: light

การสาธิต Sec-CH-Prefers-Reduced-Motion

ลองใช้เดโมและสังเกตว่า CSS แบบอินไลน์เปลี่ยนแปลงตามค่ากำหนดการเคลื่อนไหวของผู้ใช้อย่างไร ดูซอร์สโค้ดได้ที่ GitHub

วิธีการทำงาน

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

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

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

คำขอบคุณ

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