द सीएसएस पॉडकास्ट - 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>
की मदद से सूचियां बनानी चाहिए.
देखें कि आपको कितना समझ आया है
सूचियों के बारे में अपनी जानकारी को परखें
सूची-आइटम से पहले वाले एलिमेंट को
::bullet
::counter
::pencil
::marker
HTML सूचियां तीन प्रकार की होती हैं
<lo>
<ol>
<li>
<ul>
<list>
<dl>
इस सूची में दी गई दो स्टाइल, ::marker
पर स्टाइल लागू करेंगी?
transition
color
display
background-color