क्रमांकित सूची बनाना

मैं हमेशा से परेशान था कि गिने-चुने सूचियों को खींचना कितना मुश्किल है। अक्सर, एक डिज़ाइन के लिए केवल एक संख्या से अधिक कुछ की आवश्यकता होती है - एक अलग फ़ॉन्ट, आकार, रंग, पृष्ठभूमि, लेकिन क्या होगा?

आप भी? बिल्ली के लिए आपका स्वागत है।

समस्या को हल करने के लिए पारंपरिक दृष्टिकोण डिफ़ॉल्ट ब्राउज़र ब्लॉक सूची नंबरिंग को ब्लॉक करना है और इसके बजाय हार्डकोड संख्याओं को सम्मिलित करने के लिए तत्वों (ली) के मानक नंबरिंग से छुटकारा पाना है। इससे उन्हें जिस तरह से हम चाहते हैं, उन्हें डिजाइन करना संभव हो जाता है।

यह नेत्रहीन रूप से काम करता है , लेकिन सूचियों का यह उपयोग अर्थ संबंधी दृष्टिकोण से पूरी तरह सच नहीं है। अगर हम CSS विकलांगों के साथ ऐसी छद्म संख्या वाली सूची देखते हैं, तो हम या तो डुप्लिकेट नंबरिंग, या मार्कर और नंबरिंग एक साथ देखेंगे। यह मुझे लगता है कि यह एक दोष है।

इसलिए जब मैंने हाल ही में फिर से गिने हुए सूचियों के डिजाइन के साथ सामना किया, तो मैंने नंबरिंग को फेक किए बिना एक अलग दृष्टिकोण की कोशिश करने का फैसला किया। इस तथ्य के कारण कि इंटरनेट एक्सप्लोरर अंततः सीएसएस समर्थन के क्षेत्र में अन्य ब्राउज़रों के साथ पकड़ लेता है और प्रगतिशील वृद्धि की अवधारणा का उपयोग करने के लिए जगह बढ़ाता है, इस बार मैं समस्या का एक स्वीकार्य समाधान पा सकता हूं यदि आप (अच्छी तरह से ... आपके ग्राहक) इस तथ्य के साथ आ सकते हैं कि आईई 7 और नीचे में गिने जाने वाले सूचियों को डिजाइन से वंचित किया जाएगा, यह तकनीक उपयोगी हो सकती है।

मानक एक को हटाने के बाद क्रमांकन सूची में बनाने और एम्बेड करने के लिए सीएसएस उत्पन्न सामग्री (सीएसएस उत्पन्न सामग्री) का उपयोग करने के लिए चाल है। आरंभ करने के लिए, मैंने एक तकनीक का उपयोग करने का एक सरल उदाहरण के रूप में एक क्रमांकित क्रमांकित सूची तैयार की। कृपया ध्यान दें : अब CSS उदाहरण में पुराने ब्राउज़रों के लिए रोलबैक नहीं है और नेस्टेड सूचियों को ध्यान में नहीं रखा गया है। जैसे ही समय होगा - मैं इसे ठीक कर दूंगा।

नमूना सीएसएस निम्नानुसार है:

 ol { counter-reset:li; /*   */ padding:0; /*      */ list-style:none; /*      */ } ol li { position:relative; /*      */ margin:0 0 6px 2em; /*      ,       */ padding:4px 8px; border-top:2px solid #666; background:#f6f6f6; } ol li:before { content:counter(li); /*      */ counter-increment:li; /*     1 */ /*     */ position:absolute; top:-2px; left:-2em; width:2em; padding:4px 0; border-top:2px solid #666; color:#fff; background:#666; font-weight:bold; font-family:"Helvetica Neue", Arial, sans-serif; text-align:center; } 

(पर्याप्त हाइलाइटिंग वाला कोड: pastebin.com/JmKJCn0J )

प्रमुख बिंदु इस प्रकार हैं:

सूची-शैली: कोई नहीं: डिफ़ॉल्ट सूची क्रमांकन को ओवरराइड करता है
काउंटर-रीसेट और काउंटर-इंक्रीमेंट: एक नंबरिंग स्पेस बनाएं और काउंटर वैल्यू बढ़ाएं। दोनों सीएसएस 2.1 12.4 स्वचालित काउंटर और नंबरिंग में वर्णित हैं।
सामग्री: बनाए गए काउंटर के सूचकांक को सम्मिलित करता है। यहाँ वर्णित: CSS 2.1। 12.2। 'सामग्री' संपत्ति
: पहले - छद्म तत्व
इन गुणों के विस्तृत विवरण के लिए लिंक का अनुसरण करें।

आप किसी भी उपस्थिति को उत्पन्न तत्व पर लागू कर सकते हैं। लेकिन हमें यह नहीं भूलना चाहिए कि सूची बहुत लंबी होने पर क्या होगा - क्या तीन या चार अंकों की संख्या के लिए पर्याप्त जगह होगी? बहुत सामान्य मामला नहीं है, लेकिन फिर भी युक्त संख्या तत्व की चौड़ाई पर नज़र रखें।

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