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