สีเฉพาะจุด CSS

ใส่สีของแบรนด์ลงในอินพุต HTML ในตัวด้วยโค้ดเพียงบรรทัดเดียว

Adam Argyle

โจอี้ อาร์ฮาร์

องค์ประกอบแบบฟอร์ม HTML ในปัจจุบันปรับแต่งได้ยาก เหมือนเป็นการเลือกสไตล์ที่กำหนดเอง ซึ่งมีอยู่ไม่กี่รูปแบบหรือไม่สร้างเลย หรือรีเซ็ตรูปแบบการป้อนข้อมูล และสร้างใหม่ตั้งแต่ต้น การสร้างระบบใหม่ตั้งแต่ต้นจบลงด้วยการ ทำงานมากกว่าที่คาดไว้มาก นอกจากนี้ยังอาจทำให้ระบบลืมรูปแบบในสถานะขององค์ประกอบ (ไม่ทราบ ฉันกำลังดูคุณ) และการสูญเสียฟีเจอร์การช่วยเหลือพิเศษในตัว การสร้างสิ่งที่เบราว์เซอร์มีให้ใหม่ทั้งหมด อาจทำงานมากกว่าที่คุณต้องการ

accent-color: hotpink;

CSS accent-color จากข้อกำหนด UI ของ CSS จะช่วยปรับสมดุลสีเขียว-แดงด้วย CSS เพียงบรรทัดเดียว ซึ่งจะช่วยให้คุณไม่ต้องปรับแต่งอะไรเพิ่มเติมด้วยการมอบวิธีนำแบรนด์เข้าไปในองค์ประกอบต่างๆ

การสนับสนุนเบราว์เซอร์

• 93
• 93
• 92
• 15.4

แหล่งที่มา

สาธิต

พร็อพเพอร์ตี้ accent-color ยังทำงานร่วมกับ color-scheme ได้ด้วย ซึ่งช่วยให้ผู้เขียนปรับสีทั้งองค์ประกอบสว่างและมืดได้ ในตัวอย่างต่อไปนี้ ผู้ใช้มีธีมมืดที่ใช้งานอยู่ หน้าเว็บใช้ color-scheme: light dark และใช้ accent-color: hotpink เดียวกันสำหรับการควบคุมโทนสี Hotpink ในธีมสีเข้ม

สาธิต

องค์ประกอบที่รองรับ

ปัจจุบันมีเพียง 4 องค์ประกอบที่จะแต้มสีผ่านพร็อพเพอร์ตี้ accent-color ได้แก่ ช่องทำเครื่องหมาย วิทยุ ช่วง และความคืบหน้า คุณดูตัวอย่างแต่ละรูปแบบได้ที่นี่ https://accent-color.glitch.me ในรูปแบบสีอ่อนและสีเข้ม

คำเตือน: หากองค์ประกอบเดโมต่อไปนี้เป็นสีเดียวกันทั้งหมด แสดงว่าเบราว์เซอร์ของคุณยังไม่รองรับ accent-color

ช่องทำเครื่องหมาย

วิทยุ

ช่วง

ความคืบหน้า

การรับประกันความคมชัด

เบราว์เซอร์ที่มี accent-color จำเป็นต้องกำหนดสีคอนทราสต์ที่มีสิทธิ์ที่จะใช้ควบคู่ไปกับเครื่องหมายเน้นเสียงที่กำหนดเองเพื่อป้องกันไม่ให้มีองค์ประกอบที่ไม่สามารถเข้าถึงได้ ด้านล่างนี้คือภาพหน้าจอที่แสดงให้เห็นว่า Chrome 94 (ซ้าย) และ Firefox 92 กลางคืน (ขวา) แตกต่างกันอย่างไรในอัลกอริทึม

สิ่งสำคัญที่สุดในการหลีกเลี่ยงปัญหานี้คือการเชื่อถือเบราว์เซอร์ ระบุสีของแบรนด์และมั่นใจได้ว่าสีนั้นจะตัดสินใจให้คุณอย่างชาญฉลาด

หมายเหตุ: เบราว์เซอร์จะไม่เปลี่ยนสีในธีมมืด

พิเศษ: ปรับสมดุลสีเขียว-แดง

คุณอาจสงสัยว่าจะแต้มสีองค์ประกอบของรูปแบบทั้ง 4 นี้ได้อย่างไร นี่คือแซนด์บ็อกซ์ขนาดเล็ก ที่มีการปรับสมดุลสีเขียว-แดง

• วงแหวนโฟกัส
• ไฮไลต์การเลือกข้อความ
• แสดงรายการเครื่องหมาย
• สัญญาณบอกสถานะลูกศร (Webkit เท่านั้น)
• ภาพขนาดย่อของแถบเลื่อน (Firefox เท่านั้น)

html {
  --brand: hotpink;
  scrollbar-color: hotpink Canvas;
}

:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }

:is(
  ::-webkit-calendar-picker-indicator,
  ::-webkit-clear-button,
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button
) {
  color: var(--brand);
}

อนาคตที่มีศักยภาพ

ข้อกำหนดนี้ไม่ได้จำกัดการใช้ accent-color กับองค์ประกอบ 4 รายการที่แสดงในบทความนี้ โดยคุณจะเพิ่มการรองรับได้ในภายหลัง คุณไฮไลต์องค์ประกอบอย่างเช่น <option> ที่เลือกใน <select> ได้ด้วย accent-color

คุณชอบแต้มสีอะไรอีกบ้างบนเว็บ ทวีต @argyleink ด้วยตัวเลือกของคุณ ซึ่งอาจช่วย เพิ่มบทความนี้ลงในบทความนี้