พร็อพเพอร์ตี้ CSS color-scheme และเมตาแท็กที่เกี่ยวข้องช่วยให้นักพัฒนาซอฟต์แวร์เลือกให้หน้าเว็บของตนใช้ค่าเริ่มต้นเฉพาะธีมของสไตล์ชีต User Agent ได้
ที่มา
ฟีเจอร์สื่อตามค่ากำหนดของผู้ใช้ของ prefers-color-scheme
ฟีเจอร์สื่อตามค่ากำหนดของผู้ใช้ prefers-color-scheme ช่วยให้นักพัฒนาซอฟต์แวร์ควบคุมลักษณะที่ปรากฏของหน้าได้โดยสมบูรณ์
หากไม่คุ้นเคยกับฟีเจอร์นี้ โปรดอ่านบทความของฉัน
prefers-color-scheme: สวัสดีเพื่อนเก่า ลาก่อน
ซึ่งฉันบันทึกทุกสิ่งที่รู้เกี่ยวกับการสร้างประสบการณ์ที่น่าตื่นตาตื่นใจในโหมดมืด
จิ๊กซอว์ชิ้นหนึ่งที่มีการพูดถึงแค่สั้นๆ ในบทความคือพร็อพเพอร์ตี้ CSS color-scheme และเมตาแท็กที่สอดคล้องกันที่มีชื่อเดียวกัน
ทั้ง 2 อย่างนี้จะทำให้คุณใช้ชีวิตของนักพัฒนาซอฟต์แวร์ได้ง่ายขึ้น เพราะอนุญาตให้คุณเลือกให้หน้าเว็บใช้ค่าเริ่มต้นเฉพาะธีมของสไตล์ชีต User Agent เช่น ตัวควบคุมแบบฟอร์ม แถบเลื่อน ตลอดจนสีของระบบ CSS
ในขณะเดียวกัน ฟีเจอร์นี้ก็ป้องกันไม่ให้เบราว์เซอร์ใช้การเปลี่ยนรูปแบบด้วยตนเอง
การสนับสนุนเบราว์เซอร์
prefers-color-scheme
color-scheme
สไตล์ชีต User Agent
ก่อนที่จะดำเนินการต่อ ฉันขออธิบายคร่าวๆ ว่าสไตล์ชีต User Agent คืออะไร ส่วนใหญ่แล้ว ให้ลองนึกว่าคำว่า User Agent (UA) พูดง่ายๆ ก็คือเบราว์เซอร์ สไตล์ชีต UA จะกำหนดรูปลักษณ์เริ่มต้นของหน้าเว็บ สไตล์ชีตของ UA เป็นสิ่งที่ต้องอาศัย UA ที่เป็นปัญหา คุณสามารถดูสไตล์ชีต UA ของ Chrome (และ Chromium) และเปรียบเทียบกับ Firefox หรือ Safari (และ WebKit) โดยปกติแล้ว สไตล์ชีตของ UA จะเห็นด้วยกับเกือบทุกสิ่ง ตัวอย่างเช่น ทุกลิงก์ทำให้ลิงก์เป็นสีน้ำเงิน ข้อความทั่วไปเป็นสีดำ และพื้นหลังเป็นสีขาว แต่มีความแตกต่างที่สำคัญ (และบางครั้งก็น่ารำคาญ) เช่นกัน ตัวอย่างเช่น การจัดรูปแบบการควบคุมแบบฟอร์ม
เข้าไปดูรายละเอียดในสไตล์ชีต UA ของ WebKit และสิ่งที่ทำเกี่ยวกับโหมดมืด
(ค้นหาข้อความแบบเต็มสำหรับ "dark" ในสไตล์ชีต)
ค่าเริ่มต้นที่สไตล์ชีตให้ไว้จะเปลี่ยนแปลงไปตามการเปิดหรือปิดโหมดมืด
เพื่อให้เห็นภาพนี่เป็นกฎ CSS ที่ใช้
:matches
คลาสสมมติและตัวแปรภายในของ WebKit เช่น -apple-system-control-background
รวมทั้งคำสั่ง Preprocessor ภายในของ WebKit #if defined
input,
input:matches([type="password"], [type="search"]) {
-webkit-appearance: textfield;
#if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
HAVE_OS_DARK_MODE_SUPPORT
color: text;
background-color: -apple-system-control-background;
#else
background-color: white;
#endif
/* snip */
}
คุณจะเห็นค่าที่ไม่ใช่ค่ามาตรฐานสำหรับพร็อพเพอร์ตี้ color และ background-color ที่ด้านบน
ทั้ง text และ -apple-system-control-background ไม่ได้เป็นสี CSS ที่ถูกต้อง
ซึ่งก็คือสีความหมายของ WebKit
กลายเป็นว่า CSS มีสีของระบบอรรถศาสตร์มาตรฐาน
ซึ่งระบุไว้ในโมดูลสี CSS ระดับ 4
ตัวอย่างเช่น Canvas (อย่าสับสนกับแท็ก <canvas>) มีไว้สำหรับพื้นหลังของเนื้อหาหรือเอกสารใบสมัคร ส่วน CanvasText มีไว้สำหรับข้อความในเนื้อหาหรือเอกสารการสมัคร
ทั้ง 2 อย่างนี้ทำงานร่วมกันและไม่ควรใช้แยกกัน
สไตล์ชีตของ UA สามารถใช้สีที่เป็นกรรมสิทธิ์ของตนเองหรือสีของระบบความหมายที่เป็นมาตรฐาน เพื่อกำหนดวิธีการแสดงผลองค์ประกอบ HTML โดยค่าเริ่มต้น
หากตั้งค่าระบบปฏิบัติการเป็นโหมดมืดหรือใช้ธีมมืด ระบบจะตั้งค่า CanvasText (หรือ text) อย่างมีเงื่อนไขเป็นสีขาว และ Canvas (หรือ -apple-system-control-background) จะตั้งค่าเป็นสีดำ
จากนั้นสไตล์ชีต UA จะกำหนด CSS ต่อไปนี้เพียงครั้งเดียวและครอบคลุมทั้งโหมดสว่างและโหมดมืด
/**
Not actual UA stylesheet code.
For illustrative purposes only.
*/
body {
color: CanvasText;
background-color: Canvas
}
พร็อพเพอร์ตี้ CSS color-scheme
ข้อกำหนดของโมดูลการปรับสี CSS ระดับ 1 มีโมเดลและการควบคุมเหนือการปรับสีอัตโนมัติโดย User Agent โดยมีวัตถุประสงค์ในการจัดการค่ากำหนดของผู้ใช้ เช่น โหมดมืด การปรับคอนทราสต์ หรือโทนสีที่ต้องการ
พร็อพเพอร์ตี้ color-scheme ที่กำหนดไว้เพื่อให้องค์ประกอบระบุรูปแบบสีที่เหมาะกับการแสดงผลได้
ค่าเหล่านี้จะมีการต่อรองตามค่ากำหนดของผู้ใช้ ซึ่งส่งผลให้เกิดรูปแบบสีที่เลือกซึ่งส่งผลต่ออินเทอร์เฟซผู้ใช้ (UI) เช่น สีเริ่มต้นของตัวควบคุมแบบฟอร์มและแถบเลื่อน ตลอดจนค่าที่ใช้ของสีระบบ CSS
ปัจจุบันระบบรองรับค่าต่อไปนี้
normalบ่งบอกว่าองค์ประกอบไม่รู้จักรูปแบบสีเลย องค์ประกอบจึงควรแสดงผลในรูปแบบสีเริ่มต้นของเบราว์เซอร์[ light | dark ]+บ่งบอกว่าองค์ประกอบรับรู้และจัดการกับรูปแบบสีที่ระบุไว้ได้ รวมถึงแสดงค่ากำหนดตามลำดับระหว่างองค์ประกอบเหล่านั้นได้
ในรายการนี้ light จะแสดงรูปแบบสีอ่อน โดยมีสีพื้นหลังแบบสีอ่อนและสีพื้นหน้าสีเข้ม ขณะที่ dark จะแสดงตรงกันข้ามโดยมีสีพื้นหลังสีเข้มและสีพื้นหน้าแบบอ่อน
สำหรับองค์ประกอบทั้งหมด การแสดงผลด้วยรูปแบบสีควรทำให้สีที่ใช้ใน UI ทั้งหมดที่เบราว์เซอร์มีให้สำหรับองค์ประกอบนั้นตรงกับจุดประสงค์ของรูปแบบสี ตัวอย่างเช่น แถบเลื่อน การขีดเส้นใต้แบบตรวจตัวสะกด การควบคุมแบบฟอร์ม ฯลฯ
ในองค์ประกอบ :root การแสดงผลด้วยรูปแบบสีต้องมีผลต่อสีพื้นผิวของผืนผ้าใบด้วย (ซึ่งก็คือสีพื้นหลังส่วนกลาง) ค่าเริ่มต้นของพร็อพเพอร์ตี้ color และค่าที่ใช้สีของระบบ และควรส่งผลต่อแถบเลื่อนของวิวพอร์ตด้วย
/*
The page supports both dark and light color schemes,
and the page author prefers dark.
*/
:root {
color-scheme: dark light;
}
เมตาแท็ก color-scheme
ในการใช้งานพร็อพเพอร์ตี้ CSS color-scheme จำเป็นต้องมีการดาวน์โหลด CSS ก่อน
(หากมีการอ้างอิงผ่าน <link rel="stylesheet">) และต้องมีการแยกวิเคราะห์
เพื่อช่วยให้ User Agent แสดงผลพื้นหลังของหน้าด้วยรูปแบบสีที่ต้องการทันที คุณยังระบุค่า color-scheme ในองค์ประกอบ <meta name="color-scheme"> ได้ด้วย
<!--
The page supports both dark and light color schemes,
and the page author prefers dark.
-->
<meta name="color-scheme" content="dark light">
รวม color-scheme และ prefers-color-scheme
เนื่องจากทั้งเมตาแท็กและพร็อพเพอร์ตี้ CSS (หากใช้กับองค์ประกอบ :root) จะส่งผลให้เกิดการทำงานแบบเดียวกันในที่สุด ฉันจึงแนะนำให้ระบุรูปแบบสีผ่านเมตาแท็กทุกครั้ง เพื่อให้เบราว์เซอร์ปรับใช้กับสคีมที่ต้องการได้เร็วขึ้น
แม้ว่าหน้าเว็บฐานแบบสัมบูรณ์ไม่จำเป็นต้องมีกฎ CSS เพิ่มเติม แต่ในกรณีทั่วไป คุณควรรวม color-scheme เข้ากับ prefers-color-scheme เสมอ
ตัวอย่างเช่น สี CSS ของ WebKit ที่เป็นกรรมสิทธิ์ -webkit-link ซึ่งใช้โดย WebKit และ Chrome สำหรับลิงก์สีน้ำเงินแบบคลาสสิกคือ rgb(0,0,238) มีอัตราส่วนคอนทราสต์ 2.23:1 บนพื้นหลังสีดำไม่เพียงพอ และ ไม่ผ่าน ทั้งในกรณีที่ใช้ WCAG AA และ ข้อกำหนดของ WCAG AAA
เราได้เปิดข้อบกพร่องสำหรับ Chrome, WebKit และ Firefox รวมถึงปัญหาเกี่ยวกับเมตาใน HTML มาตรฐานเพื่อทำการแก้ไข
โต้ตอบกับ prefers-color-scheme
ความสัมพันธ์ระหว่างพร็อพเพอร์ตี้ CSS color-scheme และเมตาแท็กที่เกี่ยวข้องกับฟีเจอร์สื่อค่ากำหนดของผู้ใช้ prefers-color-scheme อาจดูสับสนในตอนแรก
ทั้ง 2 อย่างนี้เล่นด้วยกันได้ดีเลย
สิ่งสำคัญที่สุดที่ต้องทําความเข้าใจคือ color-scheme จะกำหนดลักษณะเริ่มต้นเท่านั้น ส่วน prefers-color-scheme จะกำหนดรูปลักษณ์ที่จัดรูปแบบได้
เพื่อให้เข้าใจชัดเจนขึ้น ให้พิจารณาหน้าต่อไปนี้
<head>
<meta name="color-scheme" content="dark light">
<style>
fieldset {
background-color: gainsboro;
}
@media (prefers-color-scheme: dark) {
fieldset {
background-color: darkslategray;
}
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, legere ancillae ne vis.
</p>
<form>
<fieldset>
<legend>Lorem ipsum</legend>
<button type="button">Lorem ipsum</button>
</fieldset>
</form>
</body>
โค้ด CSS แบบในหน้าในหน้าเว็บจะตั้งค่า background-color ขององค์ประกอบ <fieldset> เป็น gainsboro ในกรณีทั่วไป และเป็น darkslategray หากผู้ใช้ต้องการรูปแบบสี dark ตามฟีเจอร์สื่อที่ผู้ใช้ต้องการของ prefers-color-scheme
โดยผ่านเอลิเมนต์ <meta name="color-scheme" content="dark light"> หน้าเว็บจะบอกเบราว์เซอร์ว่ารองรับธีมมืดและสว่าง โดยต้องมีธีมมืด
หน้าทั้งหน้าจะสว่างเมื่อมืดหรือกลับกัน ทั้งนี้ขึ้นอยู่กับสไตล์ชีตของ User Agent โดยขึ้นอยู่กับว่าระบบปฏิบัติการตั้งค่าเป็นโหมดมืดหรือโหมดสว่าง ไม่มี CSS ที่นักพัฒนาซอฟต์แวร์จัดหาให้เพิ่มเติมซึ่งเกี่ยวข้องกับการเปลี่ยนข้อความย่อหน้าหรือสีพื้นหลังของหน้า
สังเกตการเปลี่ยนแปลง background-color ขององค์ประกอบ <fieldset> ตามการเปิดใช้โหมดมืด โดยทำตามกฎในสไตล์ชีตแบบในบรรทัดที่นักพัฒนาแอประบุไว้ในหน้าเว็บ
ซึ่งอาจเป็น gainsboro หรือ darkslategray
background-color ขององค์ประกอบ <fieldset> คือ gainsboro ตามสไตล์ชีตของนักพัฒนาซอฟต์แวร์ในบรรทัด
background-color ขององค์ประกอบ <fieldset> คือ darkslategray ตามสไตล์ชีตของนักพัฒนาซอฟต์แวร์ในบรรทัด
<button> รูปลักษณ์ขององค์ประกอบจะควบคุมโดยสไตล์ชีต User Agent
color ได้รับการตั้งค่าเป็นสีของระบบ ButtonText และ background-color และ border-color ทั้ง 4 สีได้รับการตั้งค่าเป็นสีของระบบ ButtonFace
background-color และ border-color แบบต่างๆ ตั้งค่าเป็นสีของระบบ ButtonFace
ตอนนี้ให้สังเกตการเปลี่ยนแปลงที่ border-color ขององค์ประกอบ <button>
ค่าที่คำนวณแล้วสำหรับ border-top-color และ border-bottom-color จะเปลี่ยนจาก rgba(0, 0, 0, 0.847) (สีดำ) เป็น rgba(255, 255, 255, 0.847) (สีขาว) เนื่องจาก User Agent จะอัปเดต ButtonFace แบบไดนามิกตามรูปแบบสี
เช่นเดียวกันกับ color ขององค์ประกอบ <button> ที่ตั้งค่าเป็นสีของระบบที่สอดคล้องกัน ButtonText
border-top-color และ border-bottom-color ที่ตั้งค่าเป็น ButtonFace ในสไตล์ชีต User Agent เปลี่ยนเป็น rgba(0, 0, 0, 0.847) แล้ว
border-top-color และ border-bottom-color ที่ตั้งค่าเป็น ButtonFace ในสไตล์ชีต User Agent ในตอนนี้มีค่าเป็น rgba(255, 255, 255, 0.847)
ข้อมูลประชากร
คุณดูเอฟเฟกต์ของ color-scheme ที่ใช้กับองค์ประกอบ HTML จำนวนมากได้ในการสาธิตเกี่ยวกับ Glitch
การสาธิตจงใจแสดง การละเมิด WCAG AA และ WCAG AAA ด้วยสีลิงก์ที่กล่าวถึงในคําเตือนข้างต้น
color-scheme: light
color-scheme: dark
ตรวจสอบ
การละเมิด
WCAG AA และ WCAG AAA ด้วยสีลิงก์
กิตติกรรมประกาศ
Rune Lillesveen นำพร็อพเพอร์ตี้ CSS color-scheme และเมตาแท็กที่เกี่ยวข้องมาใช้
Rune ยังเป็นตัวแก้ไขร่วมของข้อกำหนด CSS Color Adaptive Module ระดับ 1 อีกด้วย
รูปภาพหลักโดย
Philippe Leone
ใน Unsplash