Content Marketing

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:

Pananglitan sa CSS Sprite

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.

css sprite kahayag ngitngit

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.

Douglas Karr

Douglas Karr mao ang CMO sa OpenINSIGHTS ug ang nagtukod sa Martech Zone. Gitabangan ni Douglas ang daghang mga malampuson nga mga pagsugod sa MarTech, nakatabang sa tungod sa kakugi nga kapin sa $5 bilyon sa mga pagkuha ug pamuhunan sa Martech, ug nagpadayon sa pagtabang sa mga kompanya sa pagpatuman ug pag-automate sa ilang mga estratehiya sa pagbaligya ug pagpamaligya. Si Douglas usa ka internasyonal nga giila nga digital nga pagbag-o ug eksperto ug mamumulong sa MarTech. Si Douglas usa usab ka gipatik nga tagsulat sa usa ka giya ni Dummie ug usa ka libro sa pagpangulo sa negosyo.

Nalangkit nga mga Artikulo

Balik sa ibabaw nga button
Close

Nakit-an ang Adblock

Martech Zone makahatag kanimo niini nga sulod nga walay bayad tungod kay among gi-monetize ang among site pinaagi sa ad revenue, affiliate links, ug sponsorships. Mapasalamaton kami kung imong tangtangon ang imong ad blocker samtang imong gitan-aw ang among site.