क्रिएटिव सूची की स्टाइलिंग

सूची को स्टाइल करने के कुछ काम के और क्रिएटिव तरीके.

Michelle Barker

सूची के बारे में सोचते समय, आपको क्या ख्याल आता है? इसका सबसे आसान उदाहरण है खरीदारी की सूची. यह सबसे आसान लिस्ट होती है, जिसमें आइटम को किसी खास क्रम में नहीं रखा जाता. हालांकि, हम वेब पर अलग-अलग तरह से सूचियों का इस्तेमाल करते हैं. किसी जगह पर होने वाले कॉन्सर्ट की सूची? बहुत ज़्यादा संभावना है कि यह कोई सूची है. क्या बुकिंग की प्रोसेस में कई चरण हैं? हो सकता है कि यह कोई सूची हो. इमेज की गैलरी? इसे भी कैप्शन वाली इमेज की सूची माना जा सकता है.

इस लेख में, हम आपको वेब पर उपलब्ध एचटीएमएल लिस्ट के अलग-अलग टाइप के बारे में जानकारी देंगे. साथ ही, यह भी बताएंगे कि इनका इस्तेमाल कब करना चाहिए. इनमें कुछ ऐसे एट्रिब्यूट भी शामिल हैं जिनके बारे में शायद आपको पता न हो. हम सीएसएस की मदद से उन्हें स्टाइल करने के कुछ काम के और क्रिएटिव तरीकों के बारे में भी जानेंगे.

सूची का इस्तेमाल कब करना चाहिए

एचटीएमएल की सूची वाले एलिमेंट का इस्तेमाल तब किया जाना चाहिए, जब आइटम को सिमेंटिक तरीके से ग्रुप करना हो. सहायक टेक्नोलॉजी (जैसे कि स्क्रीन रीडर), उपयोगकर्ता को सूची के उपलब्ध होने और आइटम की संख्या के बारे में सूचना देंगी. मान लीजिए, अगर किसी शॉपिंग साइट पर प्रॉडक्ट के ग्रिड के बारे में सोचें, तो इस जानकारी को जानना आपके लिए बहुत मददगार होगा. इसलिए, सूची एलिमेंट का इस्तेमाल करना एक अच्छा विकल्प हो सकता है.

सूची के टाइप

मार्कअप के लिए, हमारे पास तीन अलग-अलग सूची एलिमेंट उपलब्ध हैं:

• बिना क्रम वाली सूची
• क्रम वाली सूची
• जानकारी वाली सूची

इनमें से किसका इस्तेमाल करना है, यह इस बात पर निर्भर करता है कि आपका मकसद क्या है.

बिना क्रम वाली सूची (ul)

बिना क्रम वाली सूची का एलिमेंट (<ul>) तब सबसे ज़्यादा काम का होता है, जब सूची में मौजूद आइटम किसी खास क्रम में नहीं होते. डिफ़ॉल्ट रूप से, यह बुलेट वाली सूची के तौर पर दिखेगी. उदाहरण के लिए, खरीदारी की सूची, जहां क्रम से कोई फ़र्क़ नहीं पड़ता.

वेब पर नेविगेशन मेन्यू का उदाहरण ज़्यादा आम है. मेन्यू बनाते समय, ul को nav एलिमेंट में रैप करना और लेबल की मदद से मेन्यू की पहचान करना अच्छा होता है. इससे, सुलभता की सुविधाओं को इस्तेमाल करने में मदद मिलती है. हमें मेन्यू में मौजूदा पेज की पहचान भी करनी चाहिए. ऐसा हम aria-current एट्रिब्यूट का इस्तेमाल करके कर सकते हैं:

<nav aria-label="Main">  
  <ul>  
    <li>  
      <a href="/page-1" aria-current="page">Menu item 1</a>  
    </li>  
    <li>  
      <a href="/page-2">Menu item 2</a>  
    </li>  
    <li>  
      <a href="/page-2">Menu item 2</a>  
    </li>  
      …  
    </ul>  
</nav>  

मेन्यू के स्ट्रक्चर के बारे में इस लेख में, कई सुझाव दिए गए हैं. इनसे यह पक्का करने में मदद मिलती है कि हमारे नेविगेशन मेन्यू सभी के लिए ऐक्सेस किए जा सकें.

क्रम वाली सूची (ol)

अगर आइटम का क्रम ज़रूरी है, तो ऑर्डर की गई सूची का एलिमेंट (<ol>) सबसे अच्छा विकल्प है. जैसे, कई चरणों वाली प्रोसेस. डिफ़ॉल्ट रूप से, सूची के आइटम नंबर वाले होते हैं. उदाहरण के लिए, निर्देशों का एक सेट, जिसमें चरणों को क्रम से पूरा करना ज़रूरी है.

<ol> और <ul>, दोनों एलिमेंट में सिर्फ़ <li> एलिमेंट, उनके डायरेक्ट चाइल्ड के तौर पर शामिल हो सकते हैं.

जानकारी वाली सूची (dl)

ब्यौरे की सूची में शब्द (<dt> एलिमेंट) और ब्यौरे (<dd>) शामिल होते हैं. हर शब्द के साथ एक से ज़्यादा ब्यौरे हो सकते हैं. इस्तेमाल के संभावित उदाहरणों में, शब्दों की ग्लॉसरी या रेस्टोरेंट का मेन्यू शामिल हो सकता है. डिफ़ॉल्ट रूप से, ब्यौरे की सूचियां किसी मार्कर के साथ नहीं दिखाई जाती हैं. हालांकि, ब्राउज़र <dd> एलिमेंट को इंडेंट करते हैं.

एचटीएमएल में, <div> का इस्तेमाल करके, शर्तों को उनके ब्यौरे के साथ ग्रुप किया जा सकता है. यह स्टाइल करने के लिए काम का हो सकता है, जैसा कि हम बाद में देखेंगे.

<!-- This is valid --> 
<dl>  
    <dt>Term 1</dt>  
    <dd>This is the first description of the first term in the list</dd>  
    <dd>This is the second description of the first term in the list</dd>  
    <dt>Term 2</dt>  
    <dd>This is the description of the second term in the list</dd>  
</dl>

<!-- This is also valid --> 
<dl>  
    <div>  
        <dt>Term 1</dt>  
        <dd>This is the first description of the first term in the list</dd>  
        <dd>This is the second description of the first term in the list</dd>  
    </div>  
    <div>  
        <dt>Term 2</dt>  
        <dd>This is the description of the second term in the list</dd>  
    </div>  
</dl>  

सूची की स्टाइलिंग करना

सूची के सबसे आसान इस्तेमाल में से एक, मुख्य हिस्से के टेक्स्ट के अंदर होना चाहिए. आम तौर पर, इन आसान सूचियों को स्टाइल करने की ज़रूरत नहीं होती. हालांकि, हो सकता है कि हम क्रम से लगाई गई या बिना क्रम वाली सूची के मार्कर को कुछ हद तक पसंद के मुताबिक बनाना चाहें. जैसे, ब्रैंड के रंग का इस्तेमाल करके या अपने बुलेट के लिए कस्टम इमेज का इस्तेमाल करके. list-style और ::marker स्यूडो-एलिमेंट की मदद से, हम बहुत कुछ कर सकते हैं!

::marker

हम अपने सूची मार्कर को कुछ बुनियादी स्टाइल देने के साथ-साथ, सर्कुलर बुलेट भी बना सकते हैं. यहां हम ::marker स्यूडो-एलिमेंट की content वैल्यू के लिए, तीन अलग-अलग इमेज यूआरएल का इस्तेमाल कर रहे हैं. इससे हमारी शॉपिंग लिस्ट के उदाहरण को हाथ से लिखे गए नोट जैसा लुक मिलता है. इसके बजाय, सभी के लिए सिर्फ़ एक इमेज का इस्तेमाल किया जा सकता है:

::marker {  
    content: url("/marker-1.svg") ' ';  
}

li:nth-child(3n)::marker {  
    content: url("/marker-2.svg") ' ';  
}

li:nth-child(3n - 1)::marker {  
    content: url("/marker-3.svg") ' ';  
}  

कस्टम काउंटर

क्रम से लगाई गई कुछ सूचियों के लिए, हो सकता है कि हम काउंटर वैल्यू का इस्तेमाल करना चाहें, लेकिन उसमें कोई दूसरी वैल्यू जोड़ना चाहें. हम list-item काउंटर का इस्तेमाल अपने मार्कर की content प्रॉपर्टी की वैल्यू के तौर पर कर सकते हैं. साथ ही, किसी अन्य कॉन्टेंट को जोड़ सकते हैं:

::marker {  
    content: counter(list-item) '🐈 ';  
}  

हमारे काउंटर अपने-आप एक बढ़ जाते हैं. हालांकि, हम चाहें, तो उन्हें किसी दूसरी वैल्यू से भी बढ़ाया जा सकता है. इसके लिए, सूची के आइटम पर counter-increment प्रॉपर्टी सेट करें. उदाहरण के लिए, इससे हमारे काउंटर हर बार तीन से बढ़ जाएंगे:

li {  
    counter-increment: list-item 3;  
}  

काउंटर की मदद से हम और भी बहुत सारी चीज़ों पर गौर कर सकते हैं. सीएसएस की सूचियां, मार्कर, और काउंटर लेख में, कुछ संभावनाओं के बारे में ज़्यादा जानकारी दी गई है.

::marker स्टाइल की सीमाएं

कई बार ऐसा होता है कि हमें मार्कर की पोज़िशन और स्टाइल पर ज़्यादा कंट्रोल की ज़रूरत होती है. उदाहरण के लिए, फ़्लेक्सबॉक्स या ग्रिड का इस्तेमाल करके मार्कर की पोज़िशन तय नहीं की जा सकती. अगर आपको किसी दूसरे अलाइनमेंट की ज़रूरत है, तो यह कभी-कभी नुकसानदेह हो सकता है. ::marker स्टाइल करने के लिए, सीमित संख्या में सीएसएस प्रॉपर्टी दिखाता है. अगर हमारे डिज़ाइन में बुनियादी स्टाइल के अलावा कुछ और ज़रूरी है, तो किसी दूसरे स्यूडो-एलिमेंट का इस्तेमाल करना बेहतर होगा.

ऐसी सूचियां बनाना, जो सूचियों की तरह नहीं दिखतीं

कभी-कभी, हो सकता है कि हम अपनी सूचियों को डिफ़ॉल्ट स्टाइल से अलग स्टाइल में दिखाना चाहें. अक्सर नेविगेशन मेन्यू के साथ भी ऐसा होता है. उदाहरण के लिए, हम आम तौर पर सभी मार्कर हटाना चाहते हैं और फ़्लेक्सबॉक्स का इस्तेमाल करके, अपनी सूची को हॉरिज़ॉन्टल तौर पर दिखा सकते हैं. आम तौर पर, list-style प्रॉपर्टी को none पर सेट किया जाता है. इसका मतलब है कि मार्कर स्यूडो-एलिमेंट को अब डीओएम में ऐक्सेस नहीं किया जा सकेगा.

::before के साथ कस्टम मार्कर

::marker के आने से पहले, कस्टम सूची मार्कर बनाने के लिए, ::before pseudo-element को शैली देना एक सामान्य तरीका था. हालांकि, अब भी जब ज़रूरत पड़े, तब विज़ुअल तौर पर जटिल सूची की स्टाइल बनाने के लिए, हमें ज़्यादा सुविधाएं मिल सकती हैं.

::marker की तरह, हम content एट्रिब्यूट का इस्तेमाल करके, अपनी पसंद के मुताबिक बुलेट स्टाइल जोड़ सकते हैं. ::marker का इस्तेमाल करने के बजाय, हमें मैन्युअल तरीके से कुछ पोज़िशनिंग करनी होगी. ऐसा इसलिए, क्योंकि हमें list-style-position से मिलने वाले फ़ायदे अपने-आप नहीं मिलते. हालांकि, हम फ़्लेक्सबॉक्स की मदद से इसे आसानी से पोज़िशन कर सकते हैं. इससे अलाइनमेंट के लिए कई सुविधाएं मिलती हैं. उदाहरण के लिए, हम मार्कर की जगह बदल सकते हैं:

अगर हम ::before एलिमेंट का इस्तेमाल करके, क्रम से लगाई गई सूची को स्टाइल कर रहे हैं, तो हम संख्या वाले मार्कर जोड़ने के लिए काउंटर का इस्तेमाल भी कर सकते हैं.

li::before {  
  counter-increment: list-item;  
  content: counter(list-item);  
}  

::marker के बजाय ::before का इस्तेमाल करने से, हमें कस्टम स्टाइल के लिए सीएसएस प्रॉपर्टी का पूरा ऐक्सेस मिलता है. साथ ही, ऐनिमेशन और ट्रांज़िशन की अनुमति मिलती है. हालांकि, ::marker के लिए इनकी सुविधा सीमित है.

विशेषताओं की सूची बनाएं

क्रम से लगाई गई सूचियों के एलिमेंट में कुछ वैकल्पिक एट्रिब्यूट शामिल किए जा सकते हैं. इनकी मदद से, कई तरह के इस्तेमाल के उदाहरणों में मदद मिल सकती है.

उलटे क्रम में सूचियां

अगर हमारे पास पिछले साल के टॉप 10 एल्बम की सूची है, तो हम 10 से 1 तक की काउंटडाउन कर सकते हैं. इसके लिए, हम कस्टम काउंटर का इस्तेमाल कर सकते हैं और उन्हें नेगेटिव वैल्यू से बढ़ा सकते हैं. इसके अलावा, हम एचटीएमएल में reversed एट्रिब्यूट का इस्तेमाल भी कर सकते हैं. मेरा मानना है कि सीएसएस में काउंटर को नेगेटिव तरीके से बढ़ाने के बजाय, reversed एट्रिब्यूट का इस्तेमाल करना आम तौर पर सिमैंटिक तौर पर सही होता है. ऐसा तब तक होता है, जब तक कि काउंटर पूरी तरह से प्रज़ेंटेशन के तौर पर न हों. अगर सीएसएस लोड नहीं होती है, तो भी आपको एचटीएमएल में संख्याएं सही तरीके से कम होती हुई दिखेंगी. साथ ही, हमें यह भी देखना होगा कि स्क्रीन रीडर, सूची को कैसे समझेगा.

साल 2021 के टॉप 10 एल्बम का यह डेमो देखें. अगर काउंटर को सिर्फ़ सीएसएस की मदद से बढ़ाया गया था, तो स्क्रीन रीडर का इस्तेमाल करके पेज को ऐक्सेस करने वाला कोई व्यक्ति यह अनुमान लगा सकता है कि संख्याएं ऊपर की ओर गिनी गई हैं, इसलिए 10वां नंबर असल में पहला नंबर था.

डेमो में देखा जा सकता है कि reversed एट्रिब्यूट का इस्तेमाल करने पर, हमारे मार्कर में पहले से ही सही वैल्यू मौजूद होती है. इसके लिए, हमें कुछ भी करने की ज़रूरत नहीं होती! हालांकि, अगर ::before स्यूडो-एलिमेंट का इस्तेमाल करके कस्टम सूची मार्कर बनाए जा रहे हैं, तो हमें अपने काउंटर में बदलाव करना होगा. हमें सिर्फ़ अपने सूची-आइटम काउंटर को घटाने का निर्देश देना होगा:

li::before {  
  counter-increment: list-item -1;  
  content: counter(list-item);  
}  

Firefox में, यह सेटिंग काफ़ी होगी. हालांकि, Chrome और Safari में मार्कर, शून्य से -10 तक की गिनती करेंगे. हम सूची में start एट्रिब्यूट जोड़कर, इस समस्या को ठीक कर सकते हैं.

सूचियां को बांटें

start एट्रिब्यूट की मदद से, हम वह संख्या तय कर पाते हैं जिससे सूची शुरू होनी चाहिए. यह सुविधा तब काम की हो सकती है, जब आपको किसी सूची को ग्रुप में बांटना हो.

चलिए, टॉप 10 एल्बम वाले उदाहरण को ध्यान में रखते हैं. शायद हमें सबसे ज़्यादा सुने गए 20 एल्बम की गिनती 10 के ग्रुप में करनी है. दोनों ग्रुप के बीच, पेज का कुछ अन्य कॉन्टेंट है.

हमें अपने एचटीएमएल में दो अलग-अलग सूचियां बनानी होंगी, लेकिन हम यह कैसे पक्का कर सकते हैं कि काउंटर सही होंगे? फ़िलहाल, हमारे मार्कअप के हिसाब से, दोनों सूचियों में 10 से 1 तक की काउंटडाउन होगी. हमें ऐसा नहीं करना है. हालांकि, हम अपने एचटीएमएल में start एट्रिब्यूट की वैल्यू तय कर सकते हैं. अगर हम अपनी पहली सूची में start की वैल्यू 20 जोड़ते हैं, तो मार्कर फिर से अपने-आप अपडेट हो जाएंगे!

<ol reversed start="20">  
  <li>...</li>  
  <li>...</li>  
  <li>...</li>  
</ol>  

कई कॉलम वाली सूची का लेआउट

जैसा कि पिछले डेमो में देखा जा सकता है, कई कॉलम वाला लेआउट कभी-कभी हमारी सूचियों के लिए अच्छा साबित हो सकता है. कॉलम की चौड़ाई सेट करके, हम यह पक्का कर सकते हैं कि हमारी सूची अपने-आप रिस्पॉन्सिव हो. साथ ही, ज़रूरत के मुताबिक जगह होने पर ही इसे दो या उससे ज़्यादा कॉलम पर रखा जा सकता है. हम कॉलम के बीच में गैप भी सेट कर सकते हैं. साथ ही, ज़्यादा बेहतर बनाने के लिए, स्टाइल वाला column-rule जोड़ें. इसके लिए, border प्रॉपर्टी की तरह ही शॉर्टहैंड का इस्तेमाल करें:

ol {  
    columns: 25rem;  
    column-gap: 7rem;  
    column-rule: 4px dotted turquoise;  
}  

कॉलम का इस्तेमाल करने पर, कभी-कभी हमारी सूची में मौजूद आइटम सही तरह से टूट जाते हैं—ऐसा हमेशा नहीं होता, जो हम चाहते हैं.

हम अपनी सूची के आइटम पर break-inside: avoid का इस्तेमाल करके, इन जबरदस्त ब्रेक से बच सकते हैं:

li {  
    break-inside: avoid;  
}  

कस्टम प्रॉपर्टी

सीएसएस कस्टम प्रॉपर्टी की मदद से, सूचियों की स्टाइल को कई तरह से बदला जा सकता है. अगर हमें सूची के आइटम का इंडेक्स पता है, तो हम प्रॉपर्टी वैल्यू का हिसाब लगाने के लिए उसका इस्तेमाल कर सकते हैं. फ़िलहाल, सीएसएस में एलिमेंट का इंडेक्स तय करने का कोई तरीका नहीं है. काउंटर की मदद से हम सिर्फ़ content प्रॉपर्टी में उसकी वैल्यू का इस्तेमाल कर सकते हैं. काउंटर की मदद से गिनती नहीं की जा सकती.

हालांकि, हम अपने एचटीएमएल में style एट्रिब्यूट में एलिमेंट का इंडेक्स सेट कर सकते हैं. इससे कैलकुलेशन को ज़्यादा आसान बनाया जा सकता है. ऐसा खास तौर पर तब किया जा सकता है, जब टेंप्लेट लैंग्वेज का इस्तेमाल किया जा रहा हो. इस उदाहरण में, Nunjucks का इस्तेमाल करके, इसे सेट करने का तरीका बताया गया है:

<ol style="--length: items|length">  
  
</ol>  

Splitting.js एक लाइब्रेरी है, जो क्लाइंट साइड पर एक जैसा फ़ंक्शन करती है.

कस्टम प्रॉपर्टी वैल्यू का इस्तेमाल करके, हम सूची के ज़रिए प्रोग्रेस को कई तरीकों से दिखा सकते हैं. इनमें से एक तरीका, चरणों की सूची का प्रोग्रेस बार हो सकता है. इस उदाहरण में, हम हर आइटम के लिए एक बार बनाने के लिए, लीनियर ग्रेडिएंट के साथ एक सूडो-एलिमेंट का इस्तेमाल कर रहे हैं. इससे यह पता चलता है कि उपयोगकर्ता, सूची में कितनी दूर तक पहुंचा है.

li::before {  
    --stop: calc(100% / var(--length) * var(--i));  
    --color1: deeppink;  
    --color2: pink;  

    content: '';  
    background: linear-gradient(to right, var(--color1) var(--stop), var(--color2) 0);  
}  

hsl() कलर फ़ंक्शन का इस्तेमाल करके, सूची के आगे बढ़ने के साथ-साथ रंग में भी बदलाव किया जा सकता है. हम अपनी कस्टम प्रॉपर्टी का इस्तेमाल करके, hue की वैल्यू का हिसाब लगा सकते हैं.

जानकारी वाली सूची की स्टाइल

जैसा कि हमने पहले बताया था, हम शर्तों और उनकी परिभाषाओं को div में dl में रैप कर सकते हैं, ताकि हमें स्टाइल करने के ज़्यादा विकल्प मिल सकें. उदाहरण के लिए, हो सकता है कि हम अपनी सूची को ग्रिड के तौर पर दिखाना चाहें. हर ग्रुप के चारों ओर रैपर div के बिना, सूची में display: grid सेट करने का मतलब है कि हमारे शब्द और ब्यौरे, अलग-अलग ग्रिड सेल में रखे गए हैं. जैसा कि नीचे दिए गए उदाहरण में बताया गया है, कभी-कभी इस तरीके का इस्तेमाल करना फ़ायदेमंद होता है. पाई के ब्यौरे के साथ मेन्यू दिखाया गया है.

हम सूची में ही एक ग्रिड तय कर सकते हैं और यह पक्का कर सकते हैं कि शर्तें और ब्यौरे हमेशा कॉलम में अलाइन रहेंगे. कॉलम की चौड़ाई, सबसे लंबी शर्त के हिसाब से तय की जाएगी.

दूसरी ओर, अगर हमें शब्दों को उनके ब्यौरे के साथ कार्ड स्टाइल में अलग-अलग ग्रुप में रखना है, तो रैपर <div> का इस्तेमाल करना बहुत मददगार होता है.

संसाधन

• सूची: सूचियों और ::मार्कर के बारे में शुरुआती जानकारी
• ::marker का इस्तेमाल करके कस्टम मार्कर
• काउंटर वाली सीएसएस की सूचियां