सूचियां

सीएसएस पॉडकास्ट - 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> की मदद से, क्रम में लगाई गई सूचियां बनाई जा सकती हैं. ऐसे में, list-item में ::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;
}

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

मार्कर बॉक्स

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

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

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

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

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

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

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

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

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

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

देखें कि आपको क्या समझ आया

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

संसाधन

• सूची को स्टाइल करने के बारे में MDN की गाइड
• सीएसएस ::marker का इस्तेमाल करके, पसंद के मुताबिक बुलेट बनाना
• Smashing Magazine: सीएसएस की सूचियां, मार्कर, और काउंटर
• MDN पर सीएसएस काउंटर का इस्तेमाल करना
• सीएसएस की लिस्ट और काउंटर मॉड्यूल का तीसरा लेवल
• सीएसएस-ट्रिक्स: सीएसएस काउंटर और सीएसएस ग्रिड की मदद से गिनती करना