พร็อพเพอร์ตี้ CSS color-scheme
และเมตาแท็กที่เกี่ยวข้องช่วยให้นักพัฒนาซอฟต์แวร์เลือกให้หน้าของตนใช้ค่าเริ่มต้นเฉพาะธีมของสไตล์ชีต User Agent ได้
ที่มา
ฟีเจอร์สื่อค่ากำหนดของผู้ใช้ prefers-color-scheme
ฟีเจอร์สื่อค่ากำหนดของผู้ใช้ prefers-color-scheme
ช่วยให้นักพัฒนาแอปสามารถควบคุมลักษณะที่ปรากฏของหน้าเว็บได้อย่างเต็มที่
หากคุณไม่คุ้นเคยกับฟีเจอร์นี้ โปรดอ่านบทความ
prefers-color-scheme
: สวัสดีความมืด เพื่อนเก่า
ซึ่งได้บันทึกทุกอย่างที่ฉันรู้เกี่ยวกับการสร้างประสบการณ์การใช้งานโหมดมืดที่ยอดเยี่ยมไว้
จิ๊กซอว์ชิ้นหนึ่งที่กล่าวถึงเพียงสั้นๆ ในบทความคือพร็อพเพอร์ตี้ color-scheme
สำหรับ CSS และเมตาแท็กที่เกี่ยวข้องซึ่งมีชื่อเดียวกัน
ทั้งคู่ช่วยให้ชีวิตของคุณในฐานะนักพัฒนาซอฟต์แวร์ง่ายขึ้น โดยให้คุณเลือกหน้าเว็บใช้ค่าเริ่มต้นเฉพาะธีมของสไตล์ชีตของ 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
รวมถึงคำสั่ง WebKit-internal preprocessor #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 ทั้งหมดที่เบราว์เซอร์มีให้สำหรับองค์ประกอบนั้นตรงกับ Intent ของรูปแบบสี ตัวอย่างเช่น แถบเลื่อน การขีดเส้นใต้สำหรับตรวจตัวสะกด ตัวควบคุมแบบฟอร์ม ฯลฯ
ในองค์ประกอบ :root
การแสดงผลด้วยรูปแบบสีจะต้องมีผลต่อสีพื้นผิวของ Canvas (ซึ่งก็คือสีพื้นหลังส่วนกลาง) ค่าเริ่มต้นของพร็อพเพอร์ตี้ 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">
) และต้องแยกวิเคราะห์
นอกจากนี้ คุณยังระบุค่า color-scheme
ในองค์ประกอบ <meta name="color-scheme">
ได้ เพื่อช่วย User Agent ในการแสดงพื้นหลังของหน้าเว็บด้วยรูปแบบสีที่ต้องการทันที
<!--
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
เสมอ
เช่น สี -webkit-link
ที่เป็นกรรมสิทธิ์ของ WebKit CSS ที่ WebKit และ Chrome ใช้สำหรับลิงก์สีน้ำเงินคลาสสิก rgb(0,0,238)
มีอัตราส่วนคอนทราสต์ไม่เพียงพอบนพื้นหลังสีดำ และ
ไม่ผ่านทั้งข้อกำหนด WCAG AA และข้อกำหนดของ WCAG AAA
ฉันได้เปิดข้อบกพร่องของ Chrome, WebKit และ Firefox รวมถึงปัญหาเมตาใน HTML Standard เพื่อแก้ไขปัญหานี้
โต้ตอบกับ prefers-color-scheme
การทำงานร่วมกันของพร็อพเพอร์ตี้ CSS color-scheme
และเมตาแท็กที่เกี่ยวข้องพร้อมด้วยฟีเจอร์สื่อค่ากำหนดของผู้ใช้ prefers-color-scheme
อาจดูสับสนในตอนแรก
แถมยังเล่นด้วยกันได้ดีจริงๆ
สิ่งสำคัญที่สุดที่ต้องทำความเข้าใจคือ 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
ลักษณะที่ปรากฏขององค์ประกอบ <button>
จะควบคุมโดยสไตล์ชีตของ User Agent
color
ตั้งค่าเป็นสีของระบบ ButtonText
และ background-color
และ border-color
ทั้ง 4 ตั้งค่าเป็นสีของระบบ 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
การสาธิต
คุณดูเอฟเฟกต์ของ color-scheme
ที่ใช้กับองค์ประกอบ HTML จำนวนมากได้ในการสาธิตเกี่ยวกับ Glitch
การสาธิตโดยมีเจตนาแสดงการละเมิด WCAG AA และ WCAG AAA โดยมีสีของลิงก์ที่ระบุไว้ในคำเตือนด้านบน
ข้อความแสดงการยอมรับ
Rune Lillesveen ติดตั้งใช้งานพร็อพเพอร์ตี้ CSS color-scheme
และเมตาแท็กที่เกี่ยวข้อง
นอกจากนี้ Rune ยังเป็นผู้แก้ไขข้อกำหนดจำเพาะของโมดูลการปรับสี CSS ระดับ 1 อีกด้วย
รูปภาพหลักโดย
Philippe Leone
ใน Unsplash