प्रकाश आणि गडद मोडसह 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 निर्देशांक निर्दिष्ट करून, आम्ही पृष्ठावर स्वतंत्र घटक म्हणून वैयक्तिक प्रतिमा प्रदर्शित करू शकतो. येथे एक उदाहरण आहे... आमच्याकडे एका इमेज फाइलमध्ये दोन बटणे आहेत:
आम्हाला डावीकडील प्रतिमा प्रदर्शित करायची असल्यास, आम्ही 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 sprites मध्ये वापरले जातात, जसे की background-position
. यामुळे स्प्राइट इमेज फाइलमध्ये वैयक्तिक प्रतिमा ठेवणे कठीण होऊ शकते.