लाइट और डार्क मोड के साथ CSS स्प्राइट्स का उपयोग कैसे करें
सीएसएस स्प्राइट्स की संख्या को कम करने के लिए वेब डेवलपमेंट में उपयोग की जाने वाली तकनीक है HTTP एक वेब पेज द्वारा किए गए अनुरोध। उनमें कई छोटी छवियों को एक बड़ी छवि फ़ाइल में संयोजित करना और फिर उस छवि के विशिष्ट वर्गों को वेब पेज पर अलग-अलग तत्वों के रूप में प्रदर्शित करने के लिए CSS का उपयोग करना शामिल है।
सीएसएस स्प्राइट्स का उपयोग करने का प्राथमिक लाभ यह है कि वे वेबसाइट के लिए पेज लोड समय को बेहतर बनाने में मदद कर सकते हैं। हर बार एक छवि को वेब पेज पर लोड किया जाता है, इसके लिए एक अलग HTTP अनुरोध की आवश्यकता होती है, जो लोडिंग प्रक्रिया को धीमा कर सकता है। एकाधिक छवियों को एक स्प्राइट छवि में संयोजित करके, हम पृष्ठ को लोड करने के लिए आवश्यक HTTP अनुरोधों की संख्या को कम कर सकते हैं। इसका परिणाम तेज़ और अधिक प्रतिक्रियाशील वेबसाइट हो सकता है, विशेष रूप से आइकन और बटन जैसी कई छोटी छवियों वाली साइटों के लिए।
CSS स्प्राइट्स का उपयोग करने से हम ब्राउज़र कैशिंग का भी लाभ उठा सकते हैं। जब कोई उपयोगकर्ता किसी वेबसाइट पर जाता है, तो उनका ब्राउज़र पहले अनुरोध के बाद स्प्राइट इमेज को कैश कर देगा। इसका मतलब यह है कि स्प्राइट छवि का उपयोग करने वाले वेब पेज पर अलग-अलग तत्वों के लिए बाद के अनुरोध बहुत तेज़ होंगे क्योंकि ब्राउजर के कैश में पहले से ही छवि होगी।
CSS स्प्राइट्स उतने लोकप्रिय नहीं हैं जितने एक समय में थे
CSS स्प्राइट्स का अभी भी आमतौर पर साइट की गति में सुधार के लिए उपयोग किया जाता है, हालांकि वे पहले की तरह लोकप्रिय नहीं हो सकते हैं। उच्च बैंडविड्थ के कारण, webp प्रारूपों, छवि संपीड़न, सामग्री वितरण नेटवर्क (CDN), धीरे लोड हो रहा है, तथा मजबूत कैशिंग प्रौद्योगिकियां, हम उतने सीएसएस स्प्राइट नहीं देखते हैं जितने हम वेब पर देखते थे... हालांकि यह अभी भी एक शानदार रणनीति है। यह विशेष रूप से उपयोगी है यदि आपके पास एक ऐसा पृष्ठ है जो बहुत सी छोटी छवियों को संदर्भित कर रहा है।
सीएसएस स्प्राइट उदाहरण
CSS स्प्राइट्स का उपयोग करने के लिए, हमें CSS का उपयोग करके स्प्राइट छवि फ़ाइल में प्रत्येक व्यक्तिगत छवि की स्थिति को परिभाषित करने की आवश्यकता है। यह आमतौर पर सेट करके किया जाता है background-image
और background-position
स्प्राइट छवि का उपयोग करने वाले वेब पेज पर प्रत्येक तत्व के गुण। प्रेत के भीतर छवि के एक्स और वाई निर्देशांक निर्दिष्ट करके, हम अलग-अलग छवियों को पृष्ठ पर अलग-अलग तत्वों के रूप में प्रदर्शित कर सकते हैं। यहाँ एक उदाहरण है... हमारे पास एक छवि फ़ाइल में दो बटन हैं:
यदि हम चाहते हैं कि बाईं ओर की छवि प्रदर्शित हो, तो हम div प्रदान कर सकते हैं arrow-left
वर्ग के रूप में इसलिए निर्देशांक केवल उस पक्ष को प्रदर्शित करते हैं:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
और अगर हम दायाँ तीर प्रदर्शित करना चाहते हैं, तो हम अपने div के लिए क्लास सेट करेंगे arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
लाइट और डार्क मोड के लिए सीएसएस स्प्राइट्स
इसका एक दिलचस्प उपयोग लाइट और डार्क मोड के साथ है। शायद आपके पास एक लोगो या छवि है जिस पर गहरे रंग का टेक्स्ट है जो एक गहरे रंग की पृष्ठभूमि पर दिखाई नहीं दे रहा है। मैंने एक बटन का उदाहरण दिया जिसमें लाइट मोड के लिए एक सफेद केंद्र और डार्क मोड के लिए एक डार्क सेंटर है।
सीएसएस का उपयोग करके, मैं उपयुक्त छवि पृष्ठभूमि प्रदर्शित कर सकता हूं कि उपयोगकर्ता प्रकाश मोड या डार्क मोड का उपयोग कर रहा है या नहीं:
:root {
--sprite-image: url('sprite.png');
--sprite-width: 200px;
--sprite-height: 400px;
--sprite-x-light: 0;
--sprite-y-light: 0;
--sprite-x-dark: -200px;
--sprite-y-dark: 0;
}
@media (prefers-color-scheme: dark) {
:root {
--sprite-x-light: 200px;
--sprite-x-dark: 0;
}
}
.icon {
width: 32px;
height: 32px;
background: var(--sprite-image) no-repeat var(--sprite-x-light) var(--sprite-y-light);
}
.icon:hover {
background-position: var(--sprite-x-dark) var(--sprite-y-dark);
}
अपवाद: ईमेल क्लाइंट इसका समर्थन नहीं कर सकते हैं
कुछ ईमेल क्लाइंट, जैसे जीमेल, सीएसएस वेरिएबल्स का समर्थन नहीं करते हैं, जिनका उपयोग मैंने लाइट और डार्क मोड के बीच स्विच करने के लिए प्रदान किए गए उदाहरण में किया है। इसका मतलब है कि आपको अलग-अलग रंग योजनाओं के लिए स्प्राइट छवि के विभिन्न संस्करणों के बीच स्विच करने के लिए वैकल्पिक तकनीकों का उपयोग करने की आवश्यकता हो सकती है।
एक और सीमा यह है कि कुछ ईमेल क्लाइंट कुछ CSS गुणों का समर्थन नहीं करते हैं जो आमतौर पर CSS स्प्राइट्स में उपयोग किए जाते हैं, जैसे कि background-position
. यह स्प्राइट छवि फ़ाइल के भीतर अलग-अलग छवियों को स्थापित करना कठिन बना सकता है।