ปรับปรุงการจัดรูปแบบเริ่มต้นของโหมดมืดด้วยพร็อพเพอร์ตี้ CSS สำหรับรูปแบบสีและเมตาแท็กที่เกี่ยวข้อง

พร็อพเพอร์ตี้ CSS color-scheme และเมตาแท็กที่เกี่ยวข้องช่วยให้นักพัฒนาซอฟต์แวร์เลือกให้หน้าของตนใช้ค่าเริ่มต้นเฉพาะธีมของสไตล์ชีต User Agent ได้

Thomas Steiner

ที่มา

ฟีเจอร์สื่อค่ากำหนดของผู้ใช้ 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