एक ही लाइन वाले कोड का इस्तेमाल करके, बिल्ट-इन एचटीएमएल फ़ॉर्म इनपुट में अपने ब्रैंड के रंग को शामिल करें.
आज के एचटीएमएल फ़ॉर्म एलिमेंट को पसंद के मुताबिक बनाना मुश्किल है. ऐसा लगता है कि यह कुछ कस्टम शैलियों में से या कोई भी कस्टम शैली चुनने का विकल्प है या इनपुट शैलियों को रीसेट करके इसे नए सिरे से बनाने का विकल्प है. इसे नए सिरे से शुरू करने पर उम्मीद से कहीं ज़्यादा काम करना पड़ता है. इसकी वजह से, एलिमेंट की स्थितियों (अनिश्चित, मैं आपको देख रहा/रही हूं) के लिए स्टाइल भूल सकती है और पहले से मौजूद सुलभता सुविधाओं को बंद किया जा सकता है. ब्राउज़र की ओर से उपलब्ध कराए गए कॉन्टेंट को पूरी तरह से दोबारा बनाने के लिए, आपको लोड करने की ज़रूरत से ज़्यादा काम करना पड़ सकता है.
accent-color: hotpink;
सीएसएस के यूज़र इंटरफ़ेस (यूआई) की खास जानकारी में मौजूद सीएसएस accent-color, एलिमेंट में बदलाव करने के लिए, सीएसएस की एक लाइन का इस्तेमाल कर रहा है. इससे अपने ब्रैंड को एलिमेंट में लाने का एक तरीका मिल जाता है, जिससे चीज़ों को पसंद के मुताबिक बनाने की ज़रूरत नहीं पड़ती.
accent-color प्रॉपर्टी, color-scheme के साथ भी काम करती है. इससे लेखकों को हल्के और गहरे रंग, दोनों तरह के एलिमेंट को कलर करने की सुविधा मिलती है.
यहां दिए गए उदाहरण में, उपयोगकर्ता ने गहरे रंग वाली थीम चालू की है. पेज पर color-scheme: light dark का इस्तेमाल हुआ है. साथ ही, गहरे रंग की थीम वाले हॉटपिंक कलर वाले कंट्रोल के लिए उसी accent-color: hotpink का इस्तेमाल किया गया है.
इस्तेमाल किए जा सकने वाले एलिमेंट
फ़िलहाल, accent-color प्रॉपर्टी के ज़रिए सिर्फ़ चार एलिमेंट में बदलाव होंगे:
चेकबॉक्स, रेडियो, रेंज, और
प्रोग्रेस. यहां हर एक की झलक
https://accent-color.glitch.me, हल्के और गहरे कलर स्कीम में देखी जा सकती है.
चेकबॉक्स
रेडियो
रेंज
प्रगति
कंट्रास्ट की गारंटी देना
मौजूदा एलिमेंट में मौजूद ऐसे एलिमेंट को रोकने के लिए जिन्हें ऐक्सेस नहीं किया जा सकता, accent-color वाले ब्राउज़र को कस्टम एक्सेंट के साथ इस्तेमाल करने के लिए, ज़रूरी शर्तें पूरी करने वाला कंट्रास्ट रंग तय करना ज़रूरी होता है. नीचे एक स्क्रीनशॉट दिया गया है, जिसमें यह दिखाया गया है कि Chrome 94 (बायां) और Firefox 92
Nightly (दाएं) के एल्गोरिदम में कैसे अंतर है:
सबसे ज़रूरी बात यह है कि ब्राउज़र पर भरोसा करें. ब्रैंड का रंग बताएं और इस बात पर भरोसा करें कि इससे आप सही फ़ैसला ले पाएंगे.
अतिरिक्त: ज़्यादा रंगीन
ऐसा हो सकता है कि फ़ॉर्म के इन चार एलिमेंट को ज़्यादा से ज़्यादा रंग दिया जाए? यहां एक मिनिमल सैंडबॉक्स है, जो अलग-अलग रंगों में उपलब्ध है:
- फ़ोकस रिंग
- टेक्स्ट चुनने के हाइलाइट
- मार्कर की सूची बनाएं
- ऐरो इंडिकेटर (सिर्फ़ वेबकिट)
- स्क्रोलबार थंब (सिर्फ़ फ़ायरफ़ॉक्स)
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 के इस्तेमाल को इस लेख में दिखाए गए चार एलिमेंट तक सीमित नहीं करता है. बाद में और मदद जोड़ी जा सकती है. <select> में चुने गए <option> जैसे एलिमेंट को accent-color से हाइलाइट किया जा सकता है.
आपको वेब पर और क्या रंगना पसंद है? अपने सिलेक्टर के साथ @egyleink को ट्वीट करें. हो सकता है कि यह लेख में जुड़ जाए!