ชุดส่วนหัวคำแนะนำไคลเอ็นต์ช่วยให้เว็บไซต์รับค่ากำหนดสื่อของผู้ใช้ (ไม่บังคับ) ในเวลาที่ส่งคำขอ ซึ่งช่วยให้เซิร์ฟเวอร์แทรก CSS ที่เหมาะสมในหน้าเว็บได้เพื่อเหตุผลด้านประสิทธิภาพ
คำค้นหาสื่อ 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 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-Reduced-Motion
ลองใช้เดโมใน Chromium 108 และสังเกตว่า CSS ที่ฝังอยู่มีการเปลี่ยนแปลงอย่างไรตามค่ากำหนดการเคลื่อนไหวของผู้ใช้
วิธีการทำงาน
- ไคลเอ็นต์ส่งคำขอเริ่มต้นไปยังเซิร์ฟเวอร์
bash GET / HTTP/2 Host: example.com
- เซิร์ฟเวอร์ตอบกลับโดยแจ้งให้ไคลเอ็นต์ทราบผ่าน
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
- จากนั้นไคลเอ็นต์จะส่งคำขออีกครั้ง โดยแจ้งให้เซิร์ฟเวอร์ทราบผ่าน
Sec-CH-Prefers-Color-Scheme
ว่ามีการตั้งค่าของผู้ใช้สำหรับเนื้อหาในโหมดมืดbash GET / HTTP/2 Host: example.com Sec-CH-Prefers-Color-Scheme: "dark"
- จากนั้นเซิร์ฟเวอร์จะปรับการตอบสนองให้เหมาะกับค่ากําหนดของลูกค้าตามความเหมาะสม เช่น แทรก 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 และข้อพิจารณาด้านความปลอดภัยของความน่าเชื่อถือของคำแนะนำของไคลเอ็นต์จะมีผลกับข้อเสนอนี้เช่นเดียวกัน
ข้อมูลอ้างอิง
- ฉบับร่างข้อกำหนด
- คำอธิบาย
- Sec-CH-Prefers-Color-Scheme - รายการสถานะ Chrome
- Sec-CH-Prefers-Color-Scheme - ข้อบกพร่องของ Chromium
- Sec-CH-Prefers-Reduced-Motion - รายการสถานะ Chrome
- Sec-CH-Prefers-Reduced-Motion - ข้อบกพร่องของ Chromium
- ชุดข้อความ WebKit
- ตำแหน่งมาตรฐานของ Mozilla
- คำแนะนำสำหรับไคลเอ็นต์
- ความน่าเชื่อถือของคำแนะนำสำหรับไคลเอ็นต์
- คำค้นหาสื่อระดับ 5
- ส่วนหัวที่มีโครงสร้างสำหรับ HTTP
ขอขอบคุณ
ขอขอบคุณอย่างยิ่งสำหรับความคิดเห็นและคำแนะนำอันเป็นประโยชน์จาก Yoav Weiss รูปภาพหลักโดย Tdadamemd ใน Wikimedia Commons