सामग्री विपणन

प्रकाश आणि गडद मोडसह CSS Sprites कसे वापरावे

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

CSS sprites वापरण्याचा प्राथमिक फायदा असा आहे की ते वेबसाइटसाठी पृष्ठ लोड वेळ सुधारण्यास मदत करू शकतात. प्रत्येक वेळी वेब पृष्ठावर प्रतिमा लोड केल्यावर, त्यास वेगळ्या HTTP विनंतीची आवश्यकता असते, ज्यामुळे लोडिंग प्रक्रिया मंद होऊ शकते. एका स्प्राईट प्रतिमेमध्ये अनेक प्रतिमा एकत्रित करून, आम्ही पृष्ठ लोड करण्यासाठी आवश्यक HTTP विनंत्या कमी करू शकतो. याचा परिणाम जलद आणि अधिक प्रतिसाद देणारी वेबसाइट बनू शकते, विशेषत: चिन्ह आणि बटणे यासारख्या अनेक लहान प्रतिमा असलेल्या साइटसाठी.

CSS sprites वापरणे आम्हाला ब्राउझर कॅशिंगचा लाभ घेण्यास देखील अनुमती देते. जेव्हा वापरकर्ता वेबसाइटला भेट देतो, तेव्हा त्यांचा ब्राउझर पहिल्या विनंतीनंतर स्प्राईट इमेज कॅशे करेल. याचा अर्थ असा की स्प्राइट इमेज वापरत असलेल्या वेब पेजवरील वैयक्तिक घटकांसाठी त्यानंतरच्या विनंत्या खूप जलद होतील कारण ब्राउझरच्या कॅशेमध्ये प्रतिमा आधीपासूनच असेल.

CSS Sprites पूर्वीप्रमाणे लोकप्रिय नाहीत

CSS स्प्राइट्स अजूनही सामान्यतः साइट गती सुधारण्यासाठी वापरले जातात, जरी ते पूर्वीसारखे लोकप्रिय नसतील. उच्च बँडविड्थमुळे, वेबप स्वरूप, प्रतिमा संक्षेप, सामग्री वितरण नेटवर्क (जागा), आळशी लोडिंगआणि मजबूत कॅशिंग तंत्रज्ञान, आम्ही वेबवर वापरत होतो तितके CSS स्प्राइट्स आम्हाला दिसत नाहीत… तरीही हे एक उत्तम धोरण आहे. तुमच्याकडे अनेक लहान प्रतिमांचा संदर्भ देत असलेले पृष्ठ असल्यास ते विशेषतः उपयुक्त आहे.

CSS Sprite उदाहरण

CSS sprites वापरण्यासाठी, आम्हाला CSS वापरून स्प्राईट इमेज फाइलमध्ये प्रत्येक वैयक्तिक प्रतिमेची स्थिती परिभाषित करणे आवश्यक आहे. हे सामान्यत: सेट करून केले जाते background-image आणि background-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 sprite प्रकाश गडद

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 sprites मध्ये वापरले जातात, जसे की background-position. यामुळे स्प्राइट इमेज फाइलमध्ये वैयक्तिक प्रतिमा ठेवणे कठीण होऊ शकते.

Douglas Karr

Douglas Karr चे CMO आहे ओपनइनसाइट्स आणि चे संस्थापक Martech Zone. डग्लसने डझनभर यशस्वी MarTech स्टार्टअप्सना मदत केली आहे, Martech अधिग्रहण आणि गुंतवणुकीमध्ये $5 बिलियन पेक्षा जास्त योग्य परिश्रमात मदत केली आहे आणि कंपन्यांना त्यांच्या विक्री आणि विपणन धोरणांची अंमलबजावणी आणि स्वयंचलित करण्यात मदत करणे सुरू ठेवले आहे. डग्लस हा आंतरराष्ट्रीय स्तरावर मान्यताप्राप्त डिजिटल ट्रान्सफॉर्मेशन आणि MarTech तज्ञ आणि स्पीकर आहे. डग्लस हे डमीच्या मार्गदर्शक आणि व्यवसाय नेतृत्व पुस्तकाचे प्रकाशित लेखक देखील आहेत.

संबंधित लेख

परत शीर्षस्थानी बटण
बंद

अॅडब्लॉक आढळले

Martech Zone तुम्हाला ही सामग्री कोणत्याही खर्चाशिवाय प्रदान करण्यात सक्षम आहे कारण आम्ही आमच्या साइटवर जाहिरात महसूल, संलग्न दुवे आणि प्रायोजकत्वाद्वारे कमाई करतो. तुम्ही आमची साइट पाहता तेव्हा तुमचा अॅड ब्लॉकर काढून टाकल्यास आम्ही कृतज्ञ आहोत.