การกำหนดธีม UI ที่เบราว์เซอร์สร้างขึ้น

ฟีเจอร์บนเว็บ: ::selection user-select accent-color color-scheme scrollbar-color scrollbar-width :user-valid และ :user-invalid :placeholder-shown ::placeholder field-sizing resize (พร็อพเพอร์ตี้ CSS) <select> ที่ปรับแต่งได้ appearance :has() ::file-selector-button

UI ส่วนใหญ่ที่เบราว์เซอร์สร้างขึ้นสามารถปรับแต่งได้ในระดับหนึ่งโดยใช้ CSS แม้ว่าจะต้องใช้ฟีเจอร์ที่ทันสมัย แต่ก็ลดระดับอย่างค่อยเป็นค่อยไปในเบราว์เซอร์รุ่นเก่า จึงมักไม่จำเป็นต้องใช้ Polyfill หรือฟังก์ชันสำรอง

ก่อนที่จะสร้าง UI ของเบราว์เซอร์ขึ้นมาใหม่ (ตัวควบคุมแบบฟอร์ม แถบเลื่อน การเลือก ข้อความแสดงข้อผิดพลาด ฯลฯ) ให้ตรวจสอบก่อนว่า

  1. UI ของเบราว์เซอร์ไม่สามารถปรับแต่งให้ตรงกับความต้องการของคุณได้มากพอ แม้จะใช้ CSS ที่ทันสมัยก็ตาม
  2. การปรับแต่งที่ต้องการมีความสำคัญมากพอที่จะคุ้มค่ากับการแลกเปลี่ยนในการสร้าง UI ในตัวขึ้นมาใหม่ โดยเฉพาะอย่างยิ่งการสูญเสียความหมายที่เข้าถึงได้ การจัดการแป้นพิมพ์, IME และการผสานรวม AT ที่ UI แบบเนทีฟมีให้โดยไม่มีค่าใช้จ่าย

ตัวอย่างการปรับแต่งที่ทำได้มีดังนี้

  • ใช้ ::selection เพื่อปรับแต่งสีข้อความที่ไฮไลต์
  • อย่าใช้ user-select: none กับข้อความเนื้อหา เพราะจะทำให้การคัดลอกและวาง เครื่องมือแปลภาษา และท่าทางสัมผัส "อ่านจากตรงนี้" ของ AT ไม่ทำงาน จำกัดไว้ที่ Chrome (แฮนเดิลการลาก แถบเครื่องมือ ป้ายกำกับปุ่มที่ซ้ำซ้อน)
  • ใช้ accent-color เพื่อใช้สีเฉพาะจุดของหน้ากับ UI ที่เบราว์เซอร์สร้างขึ้น
  • ใช้ color-scheme เพื่อให้ UI ของเบราว์เซอร์ปรับตามโหมดสว่าง/มืด
  • ใช้ scrollbar-color เพื่อปรับแต่งสีแถบเลื่อนและ scrollbar-width เพื่อควบคุมความหนาของแถบเลื่อน โดยให้แถบเลื่อนแตกต่างจากแทร็กอย่างชัดเจน (≥3:1) และอย่าตั้งค่า scrollbar-width: none ในพื้นที่ที่เลื่อนได้ (ใช้เฉพาะเมื่อการเลื่อนถูกแทนที่ด้วยความสามารถอื่นๆ โดยสมบูรณ์)
  • ใช้ :user-invalid / :user-valid สำหรับการจัดรูปแบบความถูกต้อง ไม่ใช่ :invalid / :valid เนื่องจากจะจับคู่หลังจากที่ผู้ใช้โต้ตอบกับช่องเท่านั้น เพื่อหลีกเลี่ยงค่าเริ่มต้นที่ไม่เป็นมิตรในการแจ้งว่าช่องที่ต้องกรอกแต่ว่างเปล่าเป็นข้อผิดพลาดเมื่อโหลดหน้าเว็บ ยกเว้นแถบเลื่อนช่วงเมื่อกำหนดเป้าหมาย input ในวงกว้าง (เช่น input:not(input[type="range"]):user-valid) เพื่อให้การปรับแถบเลื่อนไม่ใช้เส้นขอบหรือพื้นหลังที่ถูกต้องของช่องกับแถบเลื่อน
  • โดยทั่วไปแล้ว ปุ่มและช่องข้อความ (รวมถึง <textarea>) สามารถจัดรูปแบบเป็นองค์ประกอบปกติได้
  • ใช้ font-size เพื่อปรับขนาดและพร็อพเพอร์ตี้ข้อความอื่นๆ เพื่อควบคุมการจัดพิมพ์

การจัดรูปแบบช่องข้อความ (<input> และ <textarea>)

สำหรับการจัดรูปแบบส่วนใหญ่ (เช่น สี เส้นขอบ พื้นหลัง การพิมพ์ ฯลฯ) ให้ถือว่าองค์ประกอบเหล่านี้เป็นคอนเทนเนอร์ข้อความปกติ

  • ใช้ :placeholder-shown และ ::placeholder เพื่อจัดรูปแบบตัวยึดตำแหน่งอินพุต
  • ใช้ field-sizing: content เพื่อปรับขนาดช่องข้อความให้พอดีกับเนื้อหา
  • สำหรับองค์ประกอบ <textarea> ให้ใช้ resize: vertical เพื่อปิดใช้การปรับขนาดแนวนอน หรือ resize: none เพื่อปิดใช้การปรับขนาดทั้งหมด

การควบคุมแบบหลายตัวเลือก (เลือก ปุ่มตัวเลือก ช่องทำเครื่องหมาย)

  • หากต้องการเลือกตัวเลือกหนึ่งจากหลายตัวเลือกที่แสดงในเมนูแบบเลื่อนลง ให้ใช้ <select> + appearance: base-select + ::picker(select) ดูข้อมูลเพิ่มเติมได้ที่การจัดรูปแบบ Branded Select
  • การเลือกตัวเลือกอย่างน้อย 1 รายการจากหลายตัวเลือกที่จัดวางในบรรทัดเดียวกันในหน้าเว็บ: ใช้ <input type=checkbox> หรือ <input type=radio> ภายใน <label> สำหรับแต่ละตัวเลือก จัดรูปแบบผ่าน label:has(:checked)
  • จัดสไตล์ช่องทำเครื่องหมาย ปุ่มตัวเลือก และสวิตช์ผ่าน appearance: none + เนื้อหาที่สร้างขึ้น (::before/::after) หรือภาพพื้นหลังเพื่อวาดสถานะที่เลือก

<input> ที่ไม่ใช่ข้อความ (ปุ่ม แถบเลื่อน อินพุตไฟล์ ฯลฯ)

  • อินพุตไฟล์: ใช้ ::file-selector-button เพื่อจัดรูปแบบปุ่ม
  • อย่าใช้ <input> กับ type ที่มีค่าเป็น button, submit หรือ reset ใช้ <button> แทนและจัดรูปแบบเป็นองค์ประกอบปกติ
  • แถบเลื่อน: ใช้ appearance: none + องค์ประกอบเทียมของ Thumb (::-webkit-slider-thumb, ::-moz-range-thumb ฯลฯ) และองค์ประกอบเทียมของแทร็ก (::-webkit-slider-runnable-track, ::-moz-range-track ฯลฯ) เพื่อการควบคุมที่ละเอียดยิ่งขึ้น