🥑 🙎 👃🏻 सजाने की सूची 👩🏽‍🎓 🏄 🕶️

2002 में, मार्क न्यूहाउस ने " टैमिंग लिस्ट्स " नामक एक लेख प्रकाशित किया, जो एक दिलचस्प हिस्सा था, जिसमें उन्होंने यह समझाने के लिए समर्पित किया कि कैसे छद्म तत्वों से सजाए गए कस्टम सूचियों का निर्माण किया जाए। लगभग दस साल बाद, निकोलस गैलागर ने एक ऐसी तकनीक का आविष्कार किया जो पृष्ठभूमि छवियों को बनाने के लिए स्प्राइट्स से छद्म तत्वों का उपयोग करता है ।
सेगोंडिया, दिग्गजों के अनुभव के आधार पर, हम इस विषय को विकसित करने का प्रयास करेंगे। हम चर्चा करेंगे कि आप अतिरिक्त मार्कअप के बिना तत्वों को कैसे सजा सकते हैं, केवल सीएसएस स्प्राइट तकनीक का उपयोग करके। परिणाम इंटरनेट एक्सप्लोरर 6 और संस्करण 7 में भी काम करेगा।

सीएसएस स्प्राइट उदाहरण

शुरुआत करते हैं खास किरदारों से

कई चिह्न हैं जो हम विभिन्न मार्कर बनाने के लिए छवियों के रूप में उपयोग कर सकते हैं। क्या हो सकता है:
विशेष मार्कर

उदाहरण

उपरोक्त सूची में ये मार्कर (,,,) निम्नानुसार बनाए गए हैं:
HTML:

<ul class="glyphs"> <li class="one">performance</li> <li class="two">usability</li> <li class="three red">maintenance </li> <li class="four red">accessibility</li> </ul>

सीएसएस:

 .glyphs { list-style-type: none; } .glyphs li:before, .glyphs b { display: inline-block; width: 1.5em; font-size: 1.5em; text-align: center; } .one, .one:before { content: "\2660"; /* */ background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '<b>♠</b>'+this.innerHTML); } .two, .two:before { content: "\2663"; /* */ background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '<b>♣</b>'+this.innerHTML); } .three, .three:before { content: "\2665"; /* */ background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '<b>♥</b>'+this.innerHTML); } .four, .four:before { content: "\2666"; /* */ background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '<b>♦</b>'+this.innerHTML); } .red b, .red:before { color: red; }

यह कैसे काम करता है

सामग्री की संपत्ति का मूल्य हेक्साडेसिमल प्रारूप में यूनिकोड वर्ण को इंगित करना चाहिए (IE के लिए हम HTML संस्थाओं का उपयोग करते हैं )।
Internet Explorer 6 और 7 संस्करण न तो :: पहले और न ही : पहले समर्थन करते हैं, इसलिए हम CSS अभिव्यक्तियों के माध्यम से वर्णों को जोड़ते हैं।
Internet Explorer 8 :: से पहले समर्थन नहीं करता है, लेकिन एकल-बृहदान्त्र लेखन का समर्थन करता है।
ध्यान दें कि विभिन्न ब्राउज़रों के साथ संगतता को अनदेखा करते हुए, " पहले और बाद में: और पहले और बाद: और बाद में : के बीच कोई अंतर नहीं है । एक-कोलोन सिंटैक्स (यानी : पहले या बाद के बच्चे ) का उपयोग किया जाता है। CSS3 से पहले CSS के सभी संस्करणों में छद्म कक्षाएं और छद्म चयनकर्ता दोनों का वर्णन करने के लिए। CSS3 की शुरुआत के साथ, छद्म तत्वों से छद्म वर्गों को अलग करने के लिए, पहले एक एकल बृहदान्त्र का उपयोग करते हुए लिखा जाता है, बाद में एक दोहरे बृहदान्त्र का उपयोग करके। "
इंटरनेट एक्सप्लोरर में, वर्ण <b> तत्वों में लिपटे होते हैं, इसलिए हमारे पास किसी तरह उन्हें इंगित करने की क्षमता है और शैली (आप इन उद्देश्यों के लिए कक्षाओं का उपयोग करना चाहते हैं)।

ध्यान दें कि हमारे द्वारा उपयोग किए जाने वाले सीएसएस अभिव्यक्तियाँ उन से भी बदतर नहीं हैं, जिनका उपयोग हम न्यूनतम-चौड़ाई और इसी तरह अनुकरण करने के लिए करते हैं । इसकी गणना एक बार की जाती है, जो बाद में उत्पादकता में मामूली वृद्धि की ओर ले जाती है।

छद्म तत्वों के माध्यम से चित्र प्रदर्शित करना

छवियों को प्रदर्शित करने के लिए एक छद्म तत्व का उपयोग करने का मुख्य लाभ यह है कि यह आपको स्प्राइट्स का उपयोग करने की अनुमति देता है। वास्तव में, यह कोई नई बात नहीं है, और इस लक्ष्य को प्राप्त करने के लिए कई साइटें पहले से ही अतिरिक्त (तथाकथित "कचरा") मार्कअप का उपयोग करती हैं। उदाहरण के लिए, याहू! खोज एक खाली <s> टैग का उपयोग करता है, और फेसबुक एक <i> का उपयोग करता है। इस पथ के बाद, आप बिना किसी खाली क्षेत्र के कॉम्पैक्ट सीएसएस स्प्राइट बना सकते हैं।
निम्नलिखित दो उदाहरण एक ही स्प्राइट के आधार पर अतिरिक्त मार्कअप का उपयोग नहीं करते हैं:

नीचे दोनों चित्र - स्प्राइट में दूसरा आइकन - क्रमशः दो विधियों का उपयोग करके बनाया गया है।

निकोलस गैलोचर की विधि

पृष्ठभूमि छवि का उपयोग करके छद्म तत्व को स्टाइल करना:

 #first:before { content: ""; float: left; width: 15px; height: 15px; margin: 4px 5px 0 0; background: url(sprite.png) -15px 0; }

Url () / क्लिप का उपयोग करके नई विधि

हम स्प्रिट सम्मिलित करने के लिए सामग्री संपत्ति का उपयोग करते हैं, जिसे बाद में एक क्लिप में काट दिया जाता है:

 #second { position: relative; padding-left: 20px; background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '<img alt="" src="sprite.png">'+this.innerHTML); } #second:before, #second img { content: url(sprite.png); position: absolute; top: 3px; clip: rect(0 30px 15px 15px); left: -15px; /* to offset the clip value */ _left: -35px; /* some massaging for IE 6 */ }

यदि आप अचानक आश्चर्य करते हैं कि मैं स्थिति का उपयोग क्यों करता हूं : ऊपर पूर्ण , मैं समझाता हूं: क्योंकि क्लिप संपत्ति केवल उन तत्वों पर लागू होती है जो बिल्कुल तैनात हैं।

नया तरीका: यह सब कैसे काम करता है?

कुछ पृष्ठभूमि के साथ छद्म तत्व को सजाने के बजाय, हम इसका उपयोग छवि डालने के लिए करते हैं ( सामग्री संपत्ति के माध्यम से)
क्लिप प्रॉपर्टी का उपयोग करके, हम केवल उस हिस्से को "कट आउट" करते हैं जिसे हम छवि से प्रदर्शित करना चाहते हैं। इसका मतलब यह है कि इसके अन्य भागों को प्रदर्शित करने से बचने के लिए तस्वीर में खाली जगह जोड़ने की आवश्यकता नहीं है (इसका उपयोग आमतौर पर बड़े तत्वों के लिए पृष्ठभूमि छवि के रूप में किया जाता था)।
हम बाईं और / या शीर्ष गुणों का उपयोग करके क्लिप मानों के लिए क्षतिपूर्ति करते हैं

यदि आपको छवियों को क्रॉप करने की आवश्यकता नहीं है, तो स्प्राइट में छवियों को आरटीएल / एलटीआर संदर्भ ( पृष्ठभूमि-स्थिति: [बाएं] [सही] [ऊर्ध्वाधर मूल्य] ) को संतुष्ट करते हुए, दाएं या बाएं किनारे को फिट करने के लिए संरेखित किया जाना चाहिए। एक और सीमा एक दूसरे के बाद छवियों के साथ स्प्राइट्स का निर्माण है (छवि के अन्य भागों को भी प्रदर्शित किया जा सकता है)। स्प्राइट को "काटने" की प्रक्रिया में, इन बारीकियों में कोई भूमिका नहीं होती है, इसलिए, चित्रों को एक दूसरे के साथ डॉक किया जा सकता है।
नीचे उदाहरण देखें:

स्प्राइट उदाहरण

दूसरों पर इस विधि के फायदे

मुद्रण के लिए उपयोग की जाने वाली शैली।
पृष्ठभूमि छवियों के विपरीत, ये चित्र दस्तावेज़ के साथ मुद्रित होते हैं (वे प्रिंटर पर भेजे जाते हैं)।

वह शैली जो सस्ती हो
पृष्ठभूमि छवियों के विपरीत, ये छवियां विंडोज में उच्च विपरीत मोड में या उच्च विपरीत शैली की शीट्स में गायब नहीं होंगी।

एक शैली जो इंटरनेट एक्सप्लोरर 8 में काम करती है
यह विधि इंटरनेट एक्सप्लोरर संस्करण 6 और 7 में भी काम करती है।

कृपया ध्यान दें कि डेटा: यूआरआई योजना का उपयोग अनावश्यक HTTP अनुरोध में किया जा सकता है। इंटरनेट एक्सप्लोरर डेटा का समर्थन नहीं करता है: यूआरआई योजनाएं, लेकिन हम इंटरनेट एक्सप्लोरर 6/7 के लिए एमएचटीएमएल का उपयोग कर सकते हैं, जो पुराने ब्राउज़रों को समझने की अनुमति देता है।

छद्म तत्वों के साथ लिंक सजाने

निकोलस गैलाघेर बहुत सारे दिलचस्प चिप्स दिखाता है जो छद्म तत्वों का उपयोग करके किया जा सकता है। केवल एक चीज जो मैंने यहां जोड़ी है, उसका उपयोग :: लिंक शैलियों के बाद , जैसा कि नीचे दिए गए उदाहरण में है:
सीएसएस:

 .more, .more:after { white-space: nowrap; content: " \00BB"; /* » */ background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = this.innerHTML+' »'); }

प्रयोज्य के बारे में कुछ शब्द

आपको इस तथ्य के साथ रखना होगा कि सभी सामग्री स्क्रीन पर प्रदर्शित होती है , और चूंकि सामग्री संपत्ति के माध्यम से जोड़े जाने वाले चित्रों के लिए वैकल्पिक पाठ निर्दिष्ट करने के लिए कोई तंत्र नहीं है, इसलिए आपको यह सुनिश्चित करना चाहिए कि इन छवियों का उपयोग सजावटी उद्देश्यों के लिए विशुद्ध रूप से किया जाता है। अन्यथा, उपयोगकर्ताओं को बस इस जानकारी तक पहुंच नहीं होगी।

अतिरिक्त सामग्री

आप निम्नलिखित संसाधनों पर जाना चाहते हैं:

FatCow वेब होस्टिंग द्वारा प्रतीक

पीएस अनुवाद और अभिवादन :) पीएम में स्वीकार किए जाते हैं।
pps कुछ स्थानों पर मैंने पाठ को चित्र के साथ बदल दिया, मूल में एक जीवंत उदाहरण देखा जा सकता है।

सजाने की सूची