सूचियां

सीएसएस पॉडकास्ट - 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>

सूची शैलियां

ब्राउज़र सहायता

  • 1
  • 12
  • 1
  • 1

सोर्स

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

सूची-स्टाइल की तीन प्रॉपर्टी हैं, जिनका इस्तेमाल करके अपने उदाहरण की स्टाइल बदली जा सकती है: 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 प्रॉपर्टी की अनुमति है:

  • 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> का इस्तेमाल करके सूचियां बनानी चाहिए.

आपने जो सीखा है उसकी जांच करें

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

किसी सूची-आइटम के पहले वाले तत्व को

::बुलेट
फिर से कोशिश करें.
::पेंसिल
फिर से कोशिश करें.
::मार्कर
सही जवाब!
::काउंटर
फिर से कोशिश करें.

एचटीएमएल सूचियां तीन तरह की होती हैं.

<dl>
सही जवाब!
<lo>
फिर से कोशिश करें.
<ol>
सही जवाब!
<li>
फिर से कोशिश करें.
<ul>
सही जवाब!
<list>
फिर से कोशिश करें.

इस सूची में मौजूद कौनसी दो स्टाइल, ::मार्कर पर स्टाइल लागू करेंगी?

transition
सही जवाब!
background-color
फिर से कोशिश करें.
color
सही जवाब!
display
फिर से कोशिश करें.

रिसॉर्स