Giunsa Paggamit ang CSS Sprite nga adunay Light And Dark Mode
CSS Ang mga sprite usa ka teknik nga gigamit sa pagpalambo sa web aron makunhuran ang gidaghanon sa http mga hangyo nga gihimo sa usa ka web page. Naglakip kini sa paghiusa sa daghang gagmay nga mga imahe ngadto sa usa ka mas dako nga file sa imahe ug dayon gamit ang CSS aron ipakita ang piho nga mga seksyon sa kana nga imahe ingon indibidwal nga mga elemento sa web page.
Ang nag-unang kaayohan sa paggamit sa CSS sprites mao nga kini makatabang sa pagpalambo sa oras sa pagkarga sa panid alang sa usa ka website. Sa matag higayon nga ang usa ka imahe gikarga sa usa ka web page, kini nanginahanglan usa ka bulag nga hangyo sa HTTP, nga makapahinay sa proseso sa pagkarga. Pinaagi sa paghiusa sa daghang mga imahe sa usa ka sprite nga imahe, mahimo naton makunhuran ang gidaghanon sa mga hangyo sa HTTP nga gikinahanglan aron makarga ang panid. Kini mahimong moresulta sa usa ka mas paspas ug mas responsive nga website, ilabi na sa mga site nga adunay daghang gagmay nga mga hulagway sama sa mga icon ug mga buton.
Ang paggamit sa CSS sprites usab nagtugot kanato sa pagpahimulos sa browser caching. Kung ang usa ka tiggamit mobisita sa usa ka website, ang ilang browser mag-cache sa sprite nga imahe pagkahuman sa una nga hangyo. Kini nagpasabot nga ang mosunod nga mga hangyo alang sa tagsa-tagsa nga mga elemento sa web page nga naggamit sa sprite nga larawan mahimong mas paspas tungod kay ang browser aduna nay hulagway sa iyang cache.
Ang CSS Sprites Dili Ingon Kapopular Sama Kaniadto
Ang mga CSS sprite kay kasagarang gigamit sa pagpausbaw sa katulin sa site, bisan pa nga dili na sila sama ka sikat kaniadto. Tungod sa taas nga bandwidth, webp mga porma, pagpugong sa imahe, mga network sa paghatod sa sulod (CDN), tapulan ang pagkarga, Ug kusog nga caching teknolohiya, dili na namo makita ang daghang CSS sprites sama sa among naandan sa web… bisan pa nga kini usa ka maayo nga estratehiya. Kini labi ka mapuslanon kung ikaw adunay usa ka panid nga naghisgot sa daghang gagmay nga mga imahe.
Pananglitan sa CSS Sprite
Aron magamit ang CSS sprites, kinahanglan natong ipasabot ang posisyon sa matag indibidwal nga hulagway sulod sa sprite image file gamit ang CSS. Kasagaran kini gihimo pinaagi sa pag-set sa background-image
ug background-position
mga kabtangan alang sa matag elemento sa web page nga naggamit sa sprite nga imahe. Pinaagi sa pagpiho sa x ug y nga mga coordinate sa imahe sulod sa sprite, mahimo natong ipakita ang tagsa-tagsa nga mga hulagway isip bulag nga mga elemento sa panid. Ania ang usa ka pananglitan… kami adunay duha ka mga buton sa usa ka file sa imahe:
Kung gusto namon nga ipakita ang imahe sa wala, mahimo namon mahatagan ang div arrow-left
ingon nga klase aron ang mga koordinasyon nagpakita lamang sa kana nga kilid:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
Ug kung gusto namong ipakita ang tuo nga pana, among ibutang ang klase para sa among div arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
CSS Sprites Para sa Kahayag Ug Mangitngit nga Mode
Usa ka makapaikag nga paggamit niini mao ang kahayag ug ngitngit nga mga mode. Tingali adunay ka logo o imahe nga adunay itom nga teksto nga dili makita sa ngitngit nga background. Gibuhat nako kini nga pananglitan sa usa ka buton nga adunay puti nga sentro alang sa light mode ug usa ka ngitngit nga sentro alang sa ngitngit nga mode.
Gamit ang CSS, mahimo nakong ipakita ang angay nga background sa imahe base kung ang gumagamit naggamit sa light mode o dark mode:
: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);
}
Eksepsiyon: Ang mga Kliyente sa Email Mahimong Dili Mosuporta Niini
Ang ubang mga kliyente sa email, sama sa Gmail, wala mosuporta sa CSS variables, nga gigamit sa pananglitan nga akong gihatag sa pagbalhin tali sa kahayag ug ngitngit nga mga mode. Kini nagpasabot nga kinahanglan nimo nga mogamit ug alternatibong mga teknik sa pagbalhin tali sa lain-laing bersyon sa sprite image para sa lain-laing color scheme.
Ang laing limitasyon mao nga ang pipila ka mga email client wala mosuporta sa pipila ka CSS properties nga sagad gigamit sa CSS sprites, sama sa background-position
. Kini makapalisud sa pagpahimutang sa indibidwal nga mga hulagway sulod sa sprite image file.