सूचियां

द सीएसएस पॉडकास्ट - 030: लिस्ट

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

<ul>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ul>

सूची बना रहे हैं

पिछली सूची में सिमैंटिक एलिमेंट या <ul> से शुरू हुआ था. इसमें बच्चों के तौर पर, किराने के सामान की सूची वाले आइटम (<li> एलिमेंट) दिए गए थे. हर <li> एलिमेंट की जांच करने पर, आपको पता चलता है कि उन सभी में display: list-item मौजूद है. यही वजह है कि ब्राउज़र, डिफ़ॉल्ट रूप से ::marker को रेंडर करता है.

li {
  display: list-item;
}

सूचियां दो तरह की होती हैं.

क्रम वाली सूचियां <ol> का इस्तेमाल करके बनाई जा सकती हैं. इस स्थिति में, सूची में मौजूद आइटम, ::marker के तौर पर एक संख्या दिखाएगा.

<ol>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ol>

ब्यौरे की सूचियां <dl> की मदद से बनाई जाती हैं. हालांकि, इस तरह की सूची में, <li> के आइटम एलिमेंट का इस्तेमाल नहीं किया जाता.

<dl>
  <dt>oat milk</dt>
  <dd>- non dairy trendy drink</dd>
  <dt>cereal</dt>
  <dd>- breakfast food</dd>
</dl>

सूची स्टाइल

अब आपको सूची बनाने का तरीका पता है, तो आप उन्हें स्टाइल कर सकते है. खोजी जाने वाली पहली सीएसएस प्रॉपर्टी वे हैं जो पूरी सूची पर लागू होती हैं.

अपने उदाहरण को स्टाइल देने के लिए, लिस्ट-स्टाइल प्रॉपर्टी का इस्तेमाल किया जा सकता है: list-style-position, list-style-image, और list-style-type.

list-style-position

list-style-position की मदद से, बुलेट पॉइंट को inside या outside में आइटम की सूची के कॉन्टेंट पर ले जाया जा सकता है. डिफ़ॉल्ट outside का मतलब है कि बुलेट पॉइंट को सूची के आइटम के कॉन्टेंट में शामिल नहीं किया जाता, जबकि inside, आइटम की सूची में पहले एलिमेंट को शामिल करता है.

list-style-image

list-style-image की मदद से, अपनी सूची के बुलेट पॉइंट को इमेज से बदला जा सकता है. इससे आप url या none जैसी इमेज सेट करके अपने बुलेट को एक इमेज, svg या gif जैसा बना सकते हैं. किसी मीडिया टाइप या डेटा यूआरआई का भी इस्तेमाल किया जा सकता है.

चलिए देखते हैं कि हम अपने हर किराने के सामान की इमेज को list-style-image के तौर पर कैसे जोड़ सकते हैं:

list-style-type

आखिर में, list-style-type की स्टाइल को बदला जा सकता है. इससे बुलेट पॉइंट को जाने-पहचाने स्टाइल कीवर्ड, कस्टम स्ट्रिंग, इमोजी वगैरह में बदल दिया जाता है. यहां पर सभी संभावित लिस्ट स्टाइल टाइप देखे जा सकते हैं.

list-style शॉर्टहैंड

अब आपके पास ये सभी अलग-अलग प्रॉपर्टी हैं, तो हमारी सभी लिस्ट स्टाइल को एक लाइन में सेट करने के लिए, list-style शॉर्टहैंड का इस्तेमाल किया जा सकता है:

list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>

list-style की मदद से, list-style प्रॉपर्टी में से एक, दो या तीन प्रॉपर्टी के कॉम्बिनेशन को किसी भी क्रम में बताया जा सकता है. अगर list-style-type और list-style-image, दोनों को सेट किया जाता है, तो इमेज उपलब्ध न होने पर list-style-type को फ़ॉलबैक के तौर पर इस्तेमाल किया जाता है.

/* type */
list-style: square;

/* image */
list-style: url('../img/shape.png');

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;

/* Keyword value */
list-style: none;

/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;

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

अभी तक, उदाहरणों में पूरी सूची और सूची के आइटम को स्टाइल करने पर फ़ोकस किया गया है, लेकिन ज़्यादा जानकारी वाला तरीका क्या है?

::marker स्यूडो-एलिमेंट

list-item मार्कर एलिमेंट ऐसा बुलेट, हाइफ़न या रोमन नंबर होता है जो आपकी सूची के हर आइटम के बारे में बताता है.

DevTools में सूची की जांच करने पर, आपको सूची के हर आइटम के लिए ::marker एलिमेंट दिखेगा. भले ही, आपने एचटीएमएल में किसी एलिमेंट की जानकारी न दी हो. ::marker की और जांच करने पर, आपको इसके लिए ब्राउज़र की डिफ़ॉल्ट स्टाइल दिखेगी.

::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: start !important;
}

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

मार्कर बॉक्स

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

मार्कर बॉक्स की स्टाइल तय करने के लिए, ::marker सिलेक्टर का इस्तेमाल किया जा सकता है. इससे आपको पूरी सूची पर आधारित स्टाइल के बजाय, सिर्फ़ मार्कर चुनने की सुविधा मिलती है.

मार्कर की स्टाइल

आपने मार्कर चुन लिया है, तो अब इस सिलेक्टर के लिए उपलब्ध स्टाइल प्रॉपर्टी पर नज़र डालते हैं. web.dev पर, सीएसएस ::marker के साथ कस्टम बुलेट पॉइंट के बारे में ज़्यादा जानें.

ऐसी कई सीएसएस ::marker प्रॉपर्टी की अनुमति है:

• animation-*
• transition-*
• color
• direction
• font-*
• content
• unicode-bidi
• white-space

प्रदर्शन प्रकार

हमारी सभी list-style और ::marker प्रॉपर्टी, <li> एलिमेंट को स्टाइल कर सकती हैं, क्योंकि उनमें सूची के आइटम की डिफ़ॉल्ट डिसप्ले वैल्यू होती है. आपके पास उन चीज़ों को भी आइटम की सूची में शामिल करने का विकल्प होता है जो <li> नहीं हैं.

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

display की मदद से किसी भी आइटम को लिस्ट-आइटम व्यू में बदला जा सकता है. हालांकि, अगर आपकी स्टाइलिंग कॉन्टेंट एक सूची है, तो आपको सही लिस्ट मार्कअप का इस्तेमाल करने के बजाय, इसका इस्तेमाल नहीं करना चाहिए. किसी आइटम का विज़ुअल लुक, सूची में मौजूद आइटम के तौर पर सेट करने से, सुलभता सेवाओं के आइटम को पढ़ने और पहचानने के तरीके पर कोई असर नहीं पड़ता. इसलिए, स्क्रीन रीडर या डिवाइसों को स्विच करने पर, उसे सूची आइटम के तौर पर नहीं पढ़ा जाएगा. जब भी मुमकिन हो, आपको हमेशा सिमैंटिक मार्कअप का इस्तेमाल करना चाहिए और <li> की मदद से सूचियां बनानी चाहिए.

देखें कि आपको कितना समझ आया है

सूचियों के बारे में अपनी जानकारी को परखें

संसाधन

• स्टाइल वाली सूचियों के बारे में एमडीएन की गाइड
• सीएसएस ::मार्कर के साथ कस्टम बुलेट
• स्मैशिंग मैगज़ीन: सीएसएस सूचियां, मार्कर, और काउंटर
• सीएसएस काउंटर का इस्तेमाल करने वाले MDN
• सीएसएस लिस्ट और काउंटर मॉड्यूल लेवल 3
• सीएसएस-ट्रिक: सीएसएस काउंटर और सीएसएस ग्रिड की मदद से गिनती