లైట్ మరియు డార్క్ మోడ్తో CSS స్ప్రిట్లను ఎలా ఉపయోగించాలి
CSS స్ప్రైట్స్ అనేది వెబ్ డెవలప్మెంట్లో సంఖ్యను తగ్గించడానికి ఉపయోగించే ఒక టెక్నిక్ HTTP వెబ్ పేజీ ద్వారా చేసిన అభ్యర్థనలు. అవి బహుళ చిన్న చిత్రాలను ఒకే పెద్ద ఇమేజ్ ఫైల్గా కలపడం మరియు ఆ చిత్రం యొక్క నిర్దిష్ట విభాగాలను వెబ్ పేజీలో వ్యక్తిగత మూలకాలుగా ప్రదర్శించడానికి CSSని ఉపయోగించడం వంటివి కలిగి ఉంటాయి.
CSS స్ప్రిట్లను ఉపయోగించడం యొక్క ప్రాథమిక ప్రయోజనం ఏమిటంటే అవి వెబ్సైట్ కోసం పేజీ లోడ్ సమయాన్ని మెరుగుపరచడంలో సహాయపడతాయి. వెబ్ పేజీలో ఇమేజ్ లోడ్ చేయబడిన ప్రతిసారీ, దానికి ప్రత్యేక HTTP అభ్యర్థన అవసరం, ఇది లోడ్ ప్రక్రియను నెమ్మదిస్తుంది. బహుళ చిత్రాలను ఒకే స్ప్రైట్ ఇమేజ్గా కలపడం ద్వారా, మేము పేజీని లోడ్ చేయడానికి అవసరమైన HTTP అభ్యర్థనల సంఖ్యను తగ్గించగలము. ఇది వేగవంతమైన మరియు మరింత ప్రతిస్పందించే వెబ్సైట్కి దారి తీస్తుంది, ముఖ్యంగా చిహ్నాలు మరియు బటన్ల వంటి అనేక చిన్న చిత్రాలతో కూడిన సైట్ల కోసం.
CSS స్ప్రిట్లను ఉపయోగించడం వలన బ్రౌజర్ కాషింగ్ యొక్క ప్రయోజనాన్ని కూడా పొందవచ్చు. వినియోగదారు వెబ్సైట్ను సందర్శించినప్పుడు, వారి బ్రౌజర్ మొదటి అభ్యర్థన తర్వాత స్ప్రైట్ చిత్రాన్ని కాష్ చేస్తుంది. బ్రౌజర్ ఇప్పటికే దాని కాష్లో చిత్రాన్ని కలిగి ఉన్నందున స్ప్రైట్ ఇమేజ్ని ఉపయోగిస్తున్న వెబ్ పేజీలోని వ్యక్తిగత మూలకాల కోసం తదుపరి అభ్యర్థనలు చాలా వేగంగా జరుగుతాయని దీని అర్థం.
CSS స్ప్రిట్లు ఒకప్పుడు ఉన్నంత ప్రజాదరణ పొందలేదు
CSS స్ప్రిట్లు ఇప్పటికీ సైట్ వేగాన్ని మెరుగుపరచడానికి సాధారణంగా ఉపయోగించబడుతున్నాయి, అయినప్పటికీ అవి ఒకప్పుడు ఉన్నంత ప్రజాదరణ పొందకపోవచ్చు. అధిక బ్యాండ్విడ్త్ కారణంగా, webp ఫార్మాట్లు, ఇమేజ్ కంప్రెషన్, కంటెంట్ డెలివరీ నెట్వర్క్లు (CDN), సోమరితనం లోడింగ్మరియు బలమైన కాషింగ్ సాంకేతికతలు, మేము వెబ్లో ఉపయోగించినన్ని CSS స్ప్రిట్లను చూడలేము… అయినప్పటికీ ఇది ఇప్పటికీ గొప్ప వ్యూహం. మీరు అనేక చిన్న చిత్రాలను సూచించే పేజీని కలిగి ఉంటే ఇది చాలా ఉపయోగకరంగా ఉంటుంది.
CSS స్ప్రైట్ ఉదాహరణ
CSS స్ప్రిట్లను ఉపయోగించడానికి, మేము 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 స్ప్రిట్స్
దీని యొక్క ఒక ఆసక్తికరమైన ఉపయోగం కాంతి మరియు చీకటి మోడ్లతో ఉంటుంది. బహుశా మీరు చీకటి నేపథ్యంలో కనిపించని చీకటి వచనాన్ని కలిగి ఉన్న లోగో లేదా చిత్రాన్ని కలిగి ఉండవచ్చు. నేను లైట్ మోడ్ కోసం తెల్లటి కేంద్రం మరియు డార్క్ మోడ్ కోసం డార్క్ సెంటర్ని కలిగి ఉన్న బటన్కి ఈ ఉదాహరణ చేసాను.
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
. ఇది స్ప్రైట్ ఇమేజ్ ఫైల్లో వ్యక్తిగత చిత్రాలను ఉంచడం కష్టతరం చేస్తుంది.