ใส่สีของแบรนด์ลงในอินพุต HTML ในตัวด้วยโค้ดเพียงบรรทัดเดียว
องค์ประกอบแบบฟอร์ม HTML ในปัจจุบันปรับแต่งได้ยาก เหมือนเป็นการเลือกสไตล์ที่กำหนดเอง ซึ่งมีอยู่ไม่กี่รูปแบบหรือไม่สร้างเลย หรือรีเซ็ตรูปแบบการป้อนข้อมูล และสร้างใหม่ตั้งแต่ต้น การสร้างระบบใหม่ตั้งแต่ต้นจบลงด้วยการ ทำงานมากกว่าที่คาดไว้มาก นอกจากนี้ยังอาจทำให้ระบบลืมรูปแบบในสถานะขององค์ประกอบ (ไม่ทราบ ฉันกำลังดูคุณ) และการสูญเสียฟีเจอร์การช่วยเหลือพิเศษในตัว การสร้างสิ่งที่เบราว์เซอร์มีให้ใหม่ทั้งหมด อาจทำงานมากกว่าที่คุณต้องการ
accent-color: hotpink;
CSS accent-color
จากข้อกำหนด UI ของ CSS จะช่วยปรับสมดุลสีเขียว-แดงด้วย CSS เพียงบรรทัดเดียว ซึ่งจะช่วยให้คุณไม่ต้องปรับแต่งอะไรเพิ่มเติมด้วยการมอบวิธีนำแบรนด์เข้าไปในองค์ประกอบต่างๆ
พร็อพเพอร์ตี้ accent-color
ยังทำงานร่วมกับ color-scheme
ได้ด้วย ซึ่งช่วยให้ผู้เขียนปรับสีทั้งองค์ประกอบสว่างและมืดได้
ในตัวอย่างต่อไปนี้ ผู้ใช้มีธีมมืดที่ใช้งานอยู่ หน้าเว็บใช้ color-scheme: light dark
และใช้ accent-color: hotpink
เดียวกันสำหรับการควบคุมโทนสี Hotpink ในธีมสีเข้ม
องค์ประกอบที่รองรับ
ปัจจุบันมีเพียง 4 องค์ประกอบที่จะแต้มสีผ่านพร็อพเพอร์ตี้ accent-color
ได้แก่
ช่องทำเครื่องหมาย วิทยุ ช่วง และความคืบหน้า คุณดูตัวอย่างแต่ละรูปแบบได้ที่นี่
https://accent-color.glitch.me ในรูปแบบสีอ่อนและสีเข้ม
ช่องทำเครื่องหมาย
วิทยุ
ช่วง
ความคืบหน้า
การรับประกันความคมชัด
เบราว์เซอร์ที่มี 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 ด้วยตัวเลือกของคุณ ซึ่งอาจช่วย เพิ่มบทความนี้ลงในบทความนี้