सामग्री मार्केटिङ

प्रकाश र गाढा मोडको साथ CSS Sprites कसरी प्रयोग गर्ने

CSS sprites को संख्या कम गर्न वेब विकास मा प्रयोग गरिने एक प्रविधि हो HTTP वेब पृष्ठ द्वारा गरिएको अनुरोध। तिनीहरूले एकल ठूलो छवि फाइलमा बहु साना छविहरू संयोजन गर्ने र त्यसपछि वेब पृष्ठमा व्यक्तिगत तत्वहरूको रूपमा छविको विशिष्ट खण्डहरू प्रदर्शन गर्न CSS प्रयोग गर्ने समावेश गर्दछ।

CSS sprites प्रयोग गर्ने प्राथमिक लाभ यो हो कि तिनीहरूले वेबसाइटको लागि पृष्ठ लोड समय सुधार गर्न मद्दत गर्न सक्छन्। वेब पृष्ठमा प्रत्येक पटक छवि लोड हुँदा, यसलाई एक अलग HTTP अनुरोध चाहिन्छ, जसले लोडिङ प्रक्रियालाई ढिलो गर्न सक्छ। एकल स्प्राइट छविमा धेरै छविहरू संयोजन गरेर, हामी पृष्ठ लोड गर्न आवश्यक HTTP अनुरोधहरूको संख्या घटाउन सक्छौं। यसले विशेष गरी धेरै साना तस्बिरहरू जस्तै आइकनहरू र बटनहरू भएका साइटहरूका लागि छिटो र थप उत्तरदायी वेबसाइटमा परिणाम ल्याउन सक्छ।

CSS sprites को प्रयोगले हामीलाई ब्राउजर क्यासिङको फाइदा लिन पनि अनुमति दिन्छ। जब प्रयोगकर्ताले वेबसाइट भ्रमण गर्दछ, तिनीहरूको ब्राउजरले पहिलो अनुरोध पछि स्प्राइट छवि क्यास गर्नेछ। यसको मतलब यो हो कि वेब पृष्ठमा व्यक्तिगत तत्वहरूको लागि पछिल्लो अनुरोधहरू जुन स्प्राइट छवि प्रयोग गर्दै छन् धेरै छिटो हुनेछ किनभने ब्राउजरसँग पहिले नै यसको क्यासमा छवि हुनेछ।

CSS Sprites पहिले जस्तै लोकप्रिय छैनन्

CSS स्प्राइटहरू अझै पनि साइट गति सुधार गर्न प्रयोग गरिन्छ, यद्यपि तिनीहरू पहिले जस्तै लोकप्रिय नहुन सक्छन्। उच्च ब्यान्डविथको कारण, वेबपे ढाँचाहरू, छवि कम्प्रेसन, सामग्री वितरण नेटवर्क (CDN), अल्छी लोडिंग, र बलियो क्यासिङ प्रविधिहरू, हामीले वेबमा प्रयोग गरेजति धेरै CSS स्प्राइटहरू देख्दैनौं... यद्यपि यो अझै उत्कृष्ट रणनीति हो। यो विशेष गरी उपयोगी छ यदि तपाईंसँग एउटा पृष्ठ छ जुन साना छविहरूको भीडलाई सन्दर्भ गर्दैछ।

CSS Sprite उदाहरण

CSS sprites प्रयोग गर्नको लागि, हामीले CSS प्रयोग गरेर स्प्राइट छवि फाइल भित्र प्रत्येक व्यक्तिगत छविको स्थिति परिभाषित गर्न आवश्यक छ। यो सामान्यतया सेट गरेर गरिन्छ background-imagebackground-position स्प्राइट छवि प्रयोग गर्ने वेब पृष्ठमा प्रत्येक तत्वका लागि गुणहरू। स्प्राइट भित्र छविको x र y निर्देशांकहरू निर्दिष्ट गरेर, हामी पृष्ठमा अलग-अलग तत्वहरूको रूपमा व्यक्तिगत छविहरू प्रदर्शन गर्न सक्छौं। यहाँ एउटा उदाहरण छ... हामीसँग एउटै छवि फाइलमा दुईवटा बटनहरू छन्:

CSS Sprite उदाहरण

यदि हामी बाँयामा छवि प्रदर्शन गर्न चाहन्छौं भने, हामी 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 स्प्राइट हल्का अँध्यारो

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। यसले स्प्राइट छवि फाइल भित्र व्यक्तिगत छविहरू राख्न गाह्रो बनाउन सक्छ।

Douglas Karr

Douglas Karr को CMO छ OpenINSightTS र को संस्थापक Martech Zone। डगलसले दर्जनौं सफल MarTech स्टार्टअपहरूलाई मद्दत गरेको छ, Martech अधिग्रहण र लगानीमा $ 5 बिलियन भन्दा बढीको लगनशीलतामा सहयोग गरेको छ, र कम्पनीहरूलाई उनीहरूको बिक्री र मार्केटिङ रणनीतिहरू कार्यान्वयन र स्वचालित गर्न मद्दत गर्न जारी छ। डगलस एक अन्तर्राष्ट्रिय मान्यता प्राप्त डिजिटल रूपान्तरण र MarTech विशेषज्ञ र वक्ता हो। डगलस डम्मीको गाईड र व्यापार नेतृत्व पुस्तकका प्रकाशित लेखक पनि हुन्।

सम्बन्धित लेख

शीर्ष बटनमा फर्कनुहोस्
बन्द

Adblock पत्ता लाग्यो

Martech Zone तपाइँलाई यो सामग्री कुनै पनि लागतमा उपलब्ध गराउन सक्षम छ किनभने हामीले हाम्रो साइटलाई विज्ञापन राजस्व, सम्बद्ध लिङ्कहरू, र प्रायोजनहरू मार्फत मुद्रीकरण गर्छौं। यदि तपाईंले हाम्रो साइट हेर्दै आफ्नो विज्ञापन अवरोधक हटाउनु भयो भने हामी प्रशंसा गर्नेछौं।