<ul>
या <ol>
का इस्तेमाल करते समय रंग, साइज़ या संख्या या बुलेट को पसंद के मुताबिक बनाना अब आसान हो गया है.
Bloomberg की स्पॉन्सरशिप इगालिया की बदौलत, हम आसानी से स्टाइल बनाने के लिए इन नुस्खे का इस्तेमाल करना बंद कर सकते हैं. देखें!
सीएसएस ::marker
की मदद से, हम कॉन्टेंट के साथ-साथ बुलेट और संख्याओं के कुछ स्टाइल बदल सकते हैं.
वेबसाइट का अलग-अलग ब्राउज़र पर चलना
::marker
, डेस्कटॉप और Android के लिए Firefox, डेस्कटॉप Safari और iOS Safari (लेकिन सिर्फ़ color
और font-*
प्रॉपर्टी, Bug 204163 देखें) और Chromium-आधारित डेस्कटॉप और Android ब्राउज़र में काम करता है.
सूडो एलिमेंट
नीचे दी गई ज़रूरी एचटीएमएल बिना क्रम वाली सूची पर विचार करें:
<ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
<li>Dolores quaerat illo totam porro</li>
<li>Quidem aliquid perferendis voluptates</li>
<li>Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit consequatur alias facilis rem</li>
<li>Fuga</li>
</ul>
इसकी वजह से, नीचे दी गई अजीबोगरीब रेंडरिंग होती है:
हर <li>
आइटम की शुरुआत में बिंदु मुफ़्त है! ब्राउज़र आपके लिए जनरेट किया गया मार्कर बॉक्स बना रहा है और बना रहा है.
आज हमें ::marker
के स्यूडो एलिमेंट के बारे में बात करते हुए खुशी हो रही है. यह एलिमेंट, ब्राउज़र पर बनाए जाने वाले बुलेट एलिमेंट को स्टाइल करने की सुविधा देता है.
मार्कर बनाना
::marker
स्यूडो-एलिमेंट मार्कर बॉक्स, सूची में मौजूद हर आइटम एलिमेंट में अपने-आप जनरेट होता है. यह बॉक्स, असल कॉन्टेंट और ::before
स्यूडो-एलिमेंट से पहले का होता है.
li::before {
content: "::before";
background: lightgray;
border-radius: 1ch;
padding-inline: 1ch;
margin-inline-end: 1ch;
}
आम तौर पर, सूची में मौजूद आइटम <li>
एचटीएमएल एलिमेंट होते हैं, लेकिन अन्य एलिमेंट भी display: list-item
का इस्तेमाल करके सूची वाले आइटम बन सकते हैं.
<dl>
<dt>Lorem</dt>
<dd>Lorem ipsum dolor sit amet consectetur adipisicing elit</dd>
<dd>Dolores quaerat illo totam porro</dd>
<dt>Ipsum</dt>
<dd>Quidem aliquid perferendis voluptates</dd>
</dl>
dd {
display: list-item;
list-style-type: "🤯";
padding-inline-start: 1ch;
}
मार्कर की स्टाइल
::marker
तक, सूचियों को list-style-type
और list-style-image
का इस्तेमाल करके स्टाइल किया जा सकता है. ऐसा करके, सूची आइटम के सिंबल को सीएसएस की एक लाइन से बदला जा सकता है:
li {
list-style-image: url(/right-arrow.svg);
/* OR */
list-style-type: '👉';
padding-inline-start: 1ch;
}
यह आसान है, लेकिन हमें और ज़्यादा चाहिए. क्या रंग, साइज़, स्पेसिंग वगैरह में बदलाव करना है!? ऐसे में ::marker
लोगों को बचाने के लिए आगे आते हैं. इसके ज़रिए, सीएसएस के इन झूठे एलिमेंट को व्यक्तिगत और ग्लोबल तरीके से टारगेट किया जा सकता है:
li::marker {
color: hotpink;
}
li:first-child::marker {
font-size: 5rem;
}
list-style-type
प्रॉपर्टी, स्टाइल को बहुत सीमित करती है. ::marker
के स्यूडो एलिमेंट का मतलब है कि मार्कर को टारगेट किया जा सकता है और सीधे उस पर स्टाइल लागू किए जा सकते हैं. इसकी मदद से, ज़्यादा कंट्रोल मिल सकता है.
हालांकि, ::marker
पर हर सीएसएस प्रॉपर्टी का इस्तेमाल नहीं किया जा सकता. किन प्रॉपर्टी को अनुमति है और किन प्रॉपर्टी को अनुमति नहीं है, इसकी सूची स्पेसिफ़िकेशन में साफ़ तौर पर दी गई है. अगर आप इस स्यूडो एलिमेंट के साथ कोई दिलचस्प चीज़ आज़माते हैं और इससे काम नहीं बनता है, तो नीचे दी गई सूची से आपको पता चलेगा कि सीएसएस की मदद से क्या किया जा सकता है और क्या नहीं:
अनुमति वाली सीएसएस ::marker
प्रॉपर्टी
animation-*
transition-*
color
direction
font-*
content
unicode-bidi
white-space
::marker
के कॉन्टेंट में बदलाव करने के लिए, list-style-type
के बजाय content
का इस्तेमाल किया जाता है. इस अगले उदाहरण में, पहले आइटम को list-style-type
का इस्तेमाल करके और दूसरे आइटम को ::marker
की मदद से स्टाइल किया गया है. पहले मामले में दी गई प्रॉपर्टी, सिर्फ़ मार्कर पर ही नहीं, बल्कि पूरे सूची आइटम पर लागू होती हैं. इसका मतलब है कि टेक्स्ट के साथ-साथ मार्कर भी ऐनिमेट हो रहा है. ::marker
का इस्तेमाल करते समय हम सिर्फ़ मार्कर बॉक्स को टारगेट कर सकते हैं, टेक्स्ट को नहीं.
यह भी ध्यान रखें कि कैसे background
प्रॉपर्टी की अनुमति नहीं है, इसका कोई असर नहीं पड़ता है.
li:nth-child(1) { list-style-type: '?'; font-size: 2rem; background: hsl(200 20% 88%); animation: color-change 3s ease-in-out infinite; }
li:nth-child(2)::marker { content: '!'; font-size: 2rem; background: hsl(200 20% 88%); animation: color-change 3s ease-in-out infinite; }
मार्कर की सामग्री बदलना
यहां कुछ तरीके बताए गए हैं जिनसे आप अपने मार्कर को स्टाइल कर सकते हैं.
सूची में मौजूद सभी आइटम बदलना
li {
list-style-type: "😍";
}
/* OR */
li::marker {
content: "😍";
}
सूची के सिर्फ़ एक आइटम को बदलना
li:last-child::marker {
content: "😍";
}
सूची के आइटम को SVG में बदलना
li::marker {
content: url(/heart.svg);
content: url(#heart);
content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
}
नंबर वाली सूचियों को बदलना
हालांकि, <ol>
के बारे में क्या ख्याल है? क्रम वाले आइटम की सूची पर मौजूद मार्कर, एक संख्या होती है. डिफ़ॉल्ट रूप से यह कोई बुलेट नहीं होता. सीएसएस में, इन्हें काउंटर कहा जाता है और ये काफ़ी असरदार हैं. इनमें, संख्याओं के शुरू और खत्म होने के बाद से इन्हें सेट और रीसेट करने की प्रॉपर्टी भी होती हैं. इसके अलावा, इनमें रोमन अंकों में स्विच करने की भी सुविधा है. क्या हम ऐसा कर सकते हैं? हां, और हम मार्कर के कॉन्टेंट की वैल्यू का इस्तेमाल, नंबरिंग वाला अपना प्रज़ेंटेशन बनाने के लिए भी कर सकते हैं.
li::marker {
content: counter(list-item) "› ";
color: hotpink;
}
डीबग करना
Chrome DevTools, ::marker
नकली एलिमेंट पर लागू होने वाली स्टाइल की जांच करने, उन्हें डीबग करने, और उनमें बदलाव करने में आपकी मदद करने के लिए तैयार है.
आने वाले समय में बदली जाने वाली बदली हुई स्यूडो-एलिमेंट स्टाइलिंग
::marker
के बारे में ज़्यादा जानने के लिए, यहां जाएं:
- SmaSH पत्रिका की सीएसएस की सूची, मार्कर, और काउंटर
- CSS-Tricks से सीएसएस काउंटर और सीएसएस ग्रिड की मदद से गिनती
- MDN से सीएसएस काउंटर का इस्तेमाल करना
किसी ऐसी चीज़ का ऐक्सेस पाना सबसे अच्छा होता है जिसे स्टाइल करना मुश्किल हो. आप चाहें, तो अपने-आप जनरेट हुए दूसरे एलिमेंट को स्टाइल किया जा सकता है. हो सकता है कि आप <details>
या खोज इनपुट के अपने-आप पूरे होने वाले इंडिकेटर से परेशान हों. ऐसा उन चीज़ों से भी हो सकता है जिन्हें ब्राउज़र पर, एक ही तरह से लागू नहीं किया जाता है. अपनी ज़रूरत की जानकारी शेयर करने का एक तरीका यह है कि https://webwewant.fyi पर जाकर अपनी इच्छा ज़ाहिर करें.