CSS इमेज स्प्राइट
Optional Advanced ने अभी !important कवर किया — दुर्लभ override झंडा। यह सत्र एक और वैकल्पिक विषय है: इमेज स्प्राइट। पुरानी स्टाइलशीट और कुछ legacy आइकन सेट में ये दिखते हैं। विचार सीधा है: एक चित्र फ़ाइल, कई आइकन; background-position तय करता है कि छोटी खिड़की में कौन-सी टाइल दिखे।
सीधा जवाब
CSS इमेज स्प्राइट एक साझा शीट इमेज है जिसमें कई आइकन (या बटन अवस्थाएँ) साथ रखी होती हैं। हर UI तत्व को निश्चित width और height, वही background-image, और एक background-position मिलता है जो शीट को सरकाता है जब तक सही टाइल बॉक्स भर न दे। जब हर आइकन एक अलग HTTP अनुरोध था, स्प्राइट मदद करते थे। नए काम के लिए आमतौर पर SVG आइकन, इनलाइन SVG, या छोटा आइकन सिस्टम बेहतर है — स्प्राइट तब रखें जब शीट पहले से हो या legacy डिज़ाइन से मेल खाना हो।
स्प्राइट क्यों आए
सालों पहले हर आइकन अक्सर एक और HTTP राउंड-ट्रिप था। बीस छोटे PNG को एक शीट में जोड़ना मतलब एक डाउनलोड और एक कैश एंट्री। ब्राउज़र फिर CSS से उस शीट पर अलग-अलग «खिड़कियाँ» पेंट करते। HTTP/2 और आधुनिक बंडलिंग ने वह दर्द कम किया; वेक्टर आइकन आमतौर पर तेज़ दिखते हैं — लेकिन पोज़िशनिंग पैटर्न तब भी उपयोगी साक्षरता है जब आप पुराना CSS खोलते हैं।
तीन हिस्से
आपको चाहिए:
- एक शीट — जैसे
icons.pngजिसमें टाइल पंक्ति या ग्रिड में हों - एक बॉक्स — एक टाइल से मेल खाते
widthऔरheight(अक्सरdisplay: inline-blockया ब्लॉक लिंक के साथ) - एक ऑफ़सेट —
background-positionताकि सही टाइल बॉक्स के नीचे आए
background-repeat: no-repeatशीट को दोहराने से रोकता है। हर आइकन के लिए अलग फ़ाइल नहीं ला रहे; आप पोज़िशन से क्रॉप कर रहे हैं।
साझा शीट पर पहली टाइल
कल्पना करें हर आइकन 32×32 पिक्सेल है और पहला ऊपर-बाएँ बैठा है। तत्व का बॉक्स भी 32×32 है, और बैकग्राउंड 0 0 से शुरू होता है:
.icon {
display: inline-block;
width: 32px;
height: 32px;
background-image: url("icons.png");
background-repeat: no-repeat;
background-position: 0 0;
}
बॉक्स व्यूपोर्ट जैसा काम करता है। icons.png का केवल ऊपर-बाएँ 32×32 दिखता है। बाकी शीट मौजूद है — बस तत्व के आकार से कटी हुई।
दूसरा आइकन: शीट सरकाएँ
अगर अगला आइकन 32px दाएँ से शुरू होता है, बैकग्राउंड को 32px बाएँ ले जाएँ (ऋणात्मक X)। वही इमेज, वही बॉक्स आकार, दूसरी खिड़की:
.icon-home {
display: inline-block;
width: 32px;
height: 32px;
background-image: url("icons.png");
background-repeat: no-repeat;
background-position: 0 0;
}
.icon-search {
display: inline-block;
width: 32px;
height: 32px;
background-image: url("icons.png");
background-repeat: no-repeat;
background-position: -32px 0;
}
ऋणात्मक X शीट को बाएँ खींचता है ताकि दूसरी टाइल खिड़की भर दे। आइकन की दूसरी पंक्ति Y भी बदलती है (जैसे -32px -32px)। अपनी असली शीट से नापें — याद से ऑफ़सेट अनुमान न लगाएँ।
दूसरी टाइल से होवर
बटन सेट अक्सर डिफ़ॉल्ट और होवर (या active) अवस्थाएँ उसी शीट पर रखते हैं। :hover पर सिर्फ background-position बदलें:
.btn-icon {
display: inline-block;
width: 40px;
height: 40px;
background-image: url("btn-sheet.png");
background-repeat: no-repeat;
background-position: 0 0;
}
.btn-icon:hover {
background-position: -40px 0;
}
दूसरी इमेज फ़ाइल नहीं — बस दूसरा क्रॉप। बॉक्स का आकार स्थिर रखें ताकि कंट्रोल न कूदे।
शीट की शांत आदतें
शीट को हमेशा स्पष्ट बॉक्स और no-repeat से जोड़ें। क्लास का नाम भूमिका से रखें, सिर्फ पिक्सेल गणित से नहीं:
.sprite {
display: inline-block;
background-image: url("icons.png");
background-repeat: no-repeat;
}
.sprite--mail {
width: 24px;
height: 24px;
background-position: 0 -48px;
}
.sprite--bell {
width: 24px;
height: 24px;
background-position: -24px -48px;
}
टाइल ग्रिड को छोटे कमेंट में लिखें (टाइल आकार, पंक्ति क्रम) ताकि अगला मेंटेनर जादुई संख्याओं को उलटा इंजीनियर न करे।
तब के स्प्राइट बनाम अब के आइकन
📊 Sprite sheets vs modern icon approaches
| Approach | Best when | Watch out |
|---|---|---|
| CSS image sprite (PNG sheet) | Legacy UI you must keep; one cached sheet already in the project | Raster scales poorly; offsets break if the sheet changes |
| Inline SVG / SVG sprite | Crisp UI icons at any size; easy theming with currentColor |
Slightly more markup or build setup |
| Icon font | Very old stacks that already ship one | Accessibility and ligature quirks; harder to theme than SVG |
| Separate PNG per icon | Rare one-off graphics | Many requests on old HTTP/1 connections |
Real <img> photos |
Content images, galleries, product shots | Not a job for background-position sprites |
इमेज गैलरी और रिस्पॉन्सिव इमेज पाठ असली <img> इस्तेमाल करते हैं (फ्लेक्स थंब, object-fit, srcset)। स्प्राइट आमतौर पर बैकग्राउंड में सजावटी UI क्रोम हैं — सार्थक alt वाले कंटेंट चित्र का विकल्प नहीं।
नई UI के लिए आधुनिक आइकन चुनें
ताज़ा इंटरफ़ेस के लिए SVG से शुरू करें (इनलाइन या छोटा SVG स्प्राइट सिस्टम)। किनारे तेज़, रंग आसान, और नाज़ुक पिक्सेल ऑफ़सेट नहीं। क्लासिक PNG स्प्राइट तभी जब डिज़ाइन पैक पहले से शीट हो, या आप उस CSS को पैच कर रहे हों जो पहले से उसी पर निर्भर है।
/* Content photo — use <img>, not a sprite crop */
.hero-photo {
max-width: 100%;
height: auto;
}
/* UI chrome — sprite OK only if the sheet already exists */
.toolbar .icon-save {
width: 16px;
height: 16px;
background-image: url("legacy-toolbar.png");
background-repeat: no-repeat;
background-position: -64px 0;
}
खुद आज़माएँ
- कागज़ पर 3-आइकन पंक्ति बनाएँ (या असली स्प्राइट खोलें)। टाइल चौड़ाई लिखें (जैसे 32px)।
.icon-aबनाएँ —background-position: 0 0और मेल खाता बॉक्स।.icon-bजोड़ें —-32px 0(या आपका असली दूसरा ऑफ़सेट)।- होवर नियम लिखें जो तीसरी टाइल पर जाए बिना width/height बदले।
- कमेंट में एक वाक्य: यह शीट क्यों अभी भी है (legacy) या अगली बार SVG क्यों चुनेंगे।
आम गलतियाँ
- कंटेंट फ़ोटो स्प्राइट में डालना और सही
alt/ अर्थ खो देना - width और height भूलना ताकि पूरी शीट दिखे या क्रॉप साफ़ न रहे
- धनात्मक ऑफ़सेट जब शीट दूसरी दिशा सरकानी थी
background-repeatचालू छोड़ना ताकि टाइल बॉक्स में दोहरें- नई ऐप डिफ़ॉल्ट रूप से PNG स्प्राइट पर बनाना, SVG के बजाय
- ट्यूटोरियल से ऑफ़सेट कॉपी करना बिना अपनी शीट नापे
सार
- स्प्राइट एक शीट है;
background-positionचुनता है कौन-सी टाइल निश्चित बॉक्स भरे - ऐतिहासिक रूप से कई छोटे आइकन के HTTP अनुरोध घटाता था
no-repeat, स्थिर आकार, नामित भूमिकाएँ रखें; ग्रिड दस्तावेज़ करें- नई UI के लिए SVG (या समान) चुनें; स्प्राइट legacy शीट के लिए
- कंटेंट इमेज असली
<img>रहें — गैलरी और रिस्पॉन्सिव इमेज अलग काम हैं - Optional Advanced आगे मल्टी-कॉलम (
multi-column) से जारी रहता है
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी