प्रस्तावना

लगभग सभी वेब डेवलपर्स जल्द या बाद में उन इंटरफेस बनाने की आवश्यकता का सामना करते हैं जिनमें छोटे विवरणों का एक समूह होता है। मुझे लगता है कि हमारे भाई का भारी बहुमत, बिना किसी हिचकिचाहट के, इन छोटे विवरणों के एक समूह को छोटी तस्वीरों के एक समूह में काट देता है, जिसे वह बिना सोचे-समझे बंद कर देता है। संभावित परेशानियों के बारे में या अन्य दृष्टिकोणों की काफी वास्तविक उपयोगिता के बारे में।

खराब उदाहरण

पहला बुरा उदाहरण:



दूसरा बुरा उदाहरण:



तीसरे उदाहरण के रूप में, मंचों के 99% देखें

बेहतर कर रहे हैं

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

मान लीजिए हमारे आइकन में 16x16 पिक्सेल का एक पहलू अनुपात है।

आइकन रखने के लिए HTML कोड कुछ इस तरह दिखाई देगा:

 <div class = "my_icon">
     <div id = "icon_1" onclick = "some_event ()"> </ div>
 </ Div>

या तो:

 <div class = "my_icon">
     <a href="/dir/file.ext"> <span id = "icon_1"> </ span> लिंक टेक्स्ट </a>
 </ Div>

फंतासी डेवलपर को बताएगी कि किसी विशेष उदाहरण में चुनने के लिए कौन सा विकल्प अधिक सुविधाजनक है।

CSS कुछ इस तरह होगा:

 .my_icon div {
     चौड़ाई: 16 पीएक्स;  ऊंचाई: 16 पीएक्स;
     पृष्ठभूमि: url ('/ cp / images / icons.png') no-repeat;
     कर्सर: सूचक;
 }
 # icon_1 {पृष्ठभूमि-स्थिति: 0px}
 # icon_2 {पृष्ठभूमि-स्थिति: -16px}
 / * और इतने पर चित्रलेखों की संख्या से * /

यदि हम आइकन को न केवल क्षैतिज रूप से व्यवस्थित करते हैं, बल्कि लंबवत भी करते हैं, तो हमें दूसरी पृष्ठभूमि-स्थिति मान की आवश्यकता होती है जो ऊंचाई को समायोजित करता है:

 # icon_4 {पृष्ठभूमि-स्थिति: -16px -16px}

PNG-24 का उपयोग करना GIF की तुलना में अधिक लाभदायक है यदि सभी "चिपके" चित्रलेखों में 256 से अधिक रंग हैं।

वास्तविक उपयोगिता

1. चिपकी हुई छवि फ़ाइल का आकार सभी छोटी फ़ाइलों का आधा योग करता है,
2. सर्वर से HTTP अनुरोधों की संख्या प्रति आइकन आइकन की संख्या से कम हो जाती है * पुनरावृत्तियों की संख्या में से एक * .css फ़ाइल (मंचों और ब्लॉग के लिए विशिष्ट)।
3. Html कोड की संख्या कम हो जाती है।

ठोस प्लस :)

मिठाई के लिए आधिकारिक उदाहरण

पहला आधिकारिक उदाहरण:



दूसरा आधिकारिक उदाहरण:





मुझे आशा है, हैबरल्यूडी के लिए यह विषय अच्छी तरह से काम करेगा

पीएस हैबर उपरोक्त को सेवा में लेने लायक है। IMHO।

छवियों को लोड करने की सेवा को Habré पर PPS छोटी गाड़ी है :( मुझे जल्दबाजी के लिए एक जगह दिखानी थी, ताकि पोस्टिंग हो सके