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

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

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

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

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

सूची के टाइप

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

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

कौनसा विकल्प चुनना है, यह इस बात पर निर्भर करता है कि इसका इस्तेमाल किस काम के लिए किया जा रहा है.

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

कस्टम काउंटर

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

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

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

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

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

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

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

ऐसी सूचियों को स्टाइल करना जो सूचियों की तरह नहीं दिखतीं

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

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

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

::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> का इस्तेमाल करना बहुत मददगार होता है.

संसाधन