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

किसी सूची को स्टाइल देने के कुछ उपयोगी और क्रिएटिव तरीकों पर एक नज़र.

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

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

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

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

सूची के टाइप

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

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

कौनसा विकल्प चुनना है, यह इस्तेमाल के उदाहरण पर निर्भर करता है.

बिना क्रम वाली सूची (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 स्यूडो एलिमेंट की 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") ' ';  
}  

पसंद के मुताबिक काउंटर

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

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

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

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

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

::मार्कर स्टाइलिंग की सीमाएं

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

ऐसी सूचियों की फ़ॉर्मैटिंग करना जो सूचियों जैसी नहीं दिखती हैं

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

::पहले वाले कस्टम मार्कर

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

::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 एट्रिब्यूट की वैल्यू तय कर सकते हैं. अगर हम अपनी पहली सूची में 20 की start वैल्यू जोड़ते हैं, तो मार्कर अपने-आप अपडेट हो जाएंगे!

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

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

कई कॉलम वाला लेआउट कभी-कभी हमारी सूचियों में काफ़ी बेहतर नतीजे दे सकता है. जैसा कि पिछले डेमो से पता चलता है. कॉलम की चौड़ाई सेट करके, हम यह पक्का कर सकते हैं कि हमारी सूची अपने-आप रिस्पॉन्सिव है. यह दो या उससे ज़्यादा कॉलम में तब ही मौजूद होती है, जब ज़रूरत के मुताबिक जगह हो. हम कॉलम के बीच का अंतर भी तय कर सकते हैं. साथ ही, कारोबार को आगे बढ़ाने के लिए, स्टाइल वाला कॉलम-नियम (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> रैपर इस्तेमाल करना बहुत मददगार होगा.

रिसॉर्स

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