प्रकाश र गाढा मोडको साथ CSS Sprites कसरी प्रयोग गर्ने
CSS sprites को संख्या कम गर्न वेब विकास मा प्रयोग गरिने एक प्रविधि हो HTTP वेब पृष्ठ द्वारा गरिएको अनुरोध। तिनीहरूले एकल ठूलो छवि फाइलमा बहु साना छविहरू संयोजन गर्ने र त्यसपछि वेब पृष्ठमा व्यक्तिगत तत्वहरूको रूपमा छविको विशिष्ट खण्डहरू प्रदर्शन गर्न CSS प्रयोग गर्ने समावेश गर्दछ।
CSS sprites प्रयोग गर्ने प्राथमिक लाभ यो हो कि तिनीहरूले वेबसाइटको लागि पृष्ठ लोड समय सुधार गर्न मद्दत गर्न सक्छन्। वेब पृष्ठमा प्रत्येक पटक छवि लोड हुँदा, यसलाई एक अलग HTTP अनुरोध चाहिन्छ, जसले लोडिङ प्रक्रियालाई ढिलो गर्न सक्छ। एकल स्प्राइट छविमा धेरै छविहरू संयोजन गरेर, हामी पृष्ठ लोड गर्न आवश्यक HTTP अनुरोधहरूको संख्या घटाउन सक्छौं। यसले विशेष गरी धेरै साना तस्बिरहरू जस्तै आइकनहरू र बटनहरू भएका साइटहरूका लागि छिटो र थप उत्तरदायी वेबसाइटमा परिणाम ल्याउन सक्छ।
CSS sprites को प्रयोगले हामीलाई ब्राउजर क्यासिङको फाइदा लिन पनि अनुमति दिन्छ। जब प्रयोगकर्ताले वेबसाइट भ्रमण गर्दछ, तिनीहरूको ब्राउजरले पहिलो अनुरोध पछि स्प्राइट छवि क्यास गर्नेछ। यसको मतलब यो हो कि वेब पृष्ठमा व्यक्तिगत तत्वहरूको लागि पछिल्लो अनुरोधहरू जुन स्प्राइट छवि प्रयोग गर्दै छन् धेरै छिटो हुनेछ किनभने ब्राउजरसँग पहिले नै यसको क्यासमा छवि हुनेछ।
CSS Sprites पहिले जस्तै लोकप्रिय छैनन्
CSS स्प्राइटहरू अझै पनि साइट गति सुधार गर्न प्रयोग गरिन्छ, यद्यपि तिनीहरू पहिले जस्तै लोकप्रिय नहुन सक्छन्। उच्च ब्यान्डविथको कारण, वेबपे ढाँचाहरू, छवि कम्प्रेसन, सामग्री वितरण नेटवर्क (CDN), अल्छी लोडिंग, र बलियो क्यासिङ प्रविधिहरू, हामीले वेबमा प्रयोग गरेजति धेरै CSS स्प्राइटहरू देख्दैनौं... यद्यपि यो अझै उत्कृष्ट रणनीति हो। यो विशेष गरी उपयोगी छ यदि तपाईंसँग एउटा पृष्ठ छ जुन साना छविहरूको भीडलाई सन्दर्भ गर्दैछ।
CSS Sprite उदाहरण
CSS sprites प्रयोग गर्नको लागि, हामीले CSS प्रयोग गरेर स्प्राइट छवि फाइल भित्र प्रत्येक व्यक्तिगत छविको स्थिति परिभाषित गर्न आवश्यक छ। यो सामान्यतया सेट गरेर गरिन्छ background-image
र background-position
स्प्राइट छवि प्रयोग गर्ने वेब पृष्ठमा प्रत्येक तत्वका लागि गुणहरू। स्प्राइट भित्र छविको x र y निर्देशांकहरू निर्दिष्ट गरेर, हामी पृष्ठमा अलग-अलग तत्वहरूको रूपमा व्यक्तिगत छविहरू प्रदर्शन गर्न सक्छौं। यहाँ एउटा उदाहरण छ... हामीसँग एउटै छवि फाइलमा दुईवटा बटनहरू छन्:
यदि हामी बाँयामा छवि प्रदर्शन गर्न चाहन्छौं भने, हामी 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;
}
CSS Sprites प्रकाश र गाढा मोडको लागि
यसको एउटा चाखलाग्दो प्रयोग प्रकाश र गाढा मोडहरूमा छ। सायद तपाईंसँग लोगो वा छवि छ जसमा कालो पाठ छ जुन अँध्यारो पृष्ठभूमिमा देखिँदैन। मैले एउटा बटनको यो उदाहरण गरें जसमा लाइट मोडको लागि सेतो केन्द्र र गाढा मोडको लागि अँध्यारो केन्द्र छ।
CSS प्रयोग गरेर, म प्रयोगकर्ताले लाइट मोड वा गाढा मोड प्रयोग गरिरहेको छ भन्ने आधारमा उपयुक्त छवि पृष्ठभूमि प्रदर्शन गर्न सक्छु:
: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);
}
अपवाद: इमेल क्लाइन्टहरूले यसलाई समर्थन नगर्न सक्छन्
केही इमेल क्लाइन्टहरू, जस्तै Gmail, CSS चरहरूलाई समर्थन गर्दैन, जुन मैले प्रकाश र गाढा मोडहरू बीच स्विच गर्न प्रदान गरेको उदाहरणमा प्रयोग गरिन्छ। यसको मतलब तपाईले विभिन्न रङ योजनाहरूको लागि स्प्राइट छविको विभिन्न संस्करणहरू बीच स्विच गर्न वैकल्पिक प्रविधिहरू प्रयोग गर्न आवश्यक पर्दछ।
अर्को सीमितता यो हो कि केहि इमेल क्लाइन्टहरूले निश्चित CSS गुणहरूलाई समर्थन गर्दैनन् जुन सामान्यतया CSS स्प्राइटहरूमा प्रयोग गरिन्छ, जस्तै background-position
। यसले स्प्राइट छवि फाइल भित्र व्यक्तिगत छविहरू राख्न गाह्रो बनाउन सक्छ।