Paano Gumamit ng CSS Sprites Sa Light And Dark Mode
CSS sprites ay isang pamamaraan na ginagamit sa web development upang bawasan ang bilang ng HTTP mga kahilingang ginawa ng isang web page. Kasama sa mga ito ang pagsasama-sama ng maraming maliliit na larawan sa isang solong mas malaking file ng imahe at pagkatapos ay paggamit ng CSS upang ipakita ang mga partikular na seksyon ng larawang iyon bilang mga indibidwal na elemento sa web page.
Ang pangunahing pakinabang ng paggamit ng CSS sprites ay makakatulong ang mga ito na mapabuti ang oras ng pag-load ng page para sa isang website. Sa tuwing na-load ang isang imahe sa isang web page, nangangailangan ito ng hiwalay na kahilingan sa HTTP, na maaaring makapagpabagal sa proseso ng pag-load. Sa pamamagitan ng pagsasama-sama ng maraming larawan sa isang sprite na larawan, maaari naming bawasan ang bilang ng mga kahilingan sa HTTP na kailangan upang mai-load ang pahina. Maaari itong magresulta sa isang mas mabilis at mas tumutugon na website, lalo na para sa mga site na may maraming maliliit na larawan tulad ng mga icon at button.
Ang paggamit ng CSS sprites ay nagpapahintulot din sa amin na samantalahin ang pag-cache ng browser. Kapag bumisita ang isang user sa isang website, i-cache ng kanilang browser ang imahe ng sprite pagkatapos ng unang kahilingan. Nangangahulugan ito na ang mga kasunod na kahilingan para sa mga indibidwal na elemento sa web page na gumagamit ng sprite na imahe ay magiging mas mabilis dahil ang browser ay mayroon nang larawan sa cache nito.
Ang CSS Sprites ay Hindi Sikat Gaya ng Noon
Karaniwang ginagamit pa rin ang mga CSS sprite para pahusayin ang bilis ng site, bagama't maaaring hindi na sila kasing sikat ng dati. Dahil sa mataas na bandwidth, webp mga format, compression ng imahe, mga network ng paghahatid ng nilalaman (CDN), tamad na paglo-load, at malakas na pag-cache teknolohiya, hindi na kami nakakakita ng kasing dami ng CSS sprite gaya ng dati sa web… kahit na isa pa rin itong mahusay na diskarte. Ito ay lalong kapaki-pakinabang kung mayroon kang isang pahina na tumutukoy sa maraming maliliit na larawan.
Halimbawa ng CSS Sprite
Upang gumamit ng CSS sprites, kailangan nating tukuyin ang posisyon ng bawat indibidwal na larawan sa loob ng sprite image file gamit ang CSS. Ito ay karaniwang ginagawa sa pamamagitan ng pagtatakda ng background-image
at background-position
mga katangian para sa bawat elemento sa web page na gumagamit ng sprite na imahe. Sa pamamagitan ng pagtukoy sa mga x at y na coordinate ng imahe sa loob ng sprite, maaari naming ipakita ang mga indibidwal na larawan bilang magkahiwalay na elemento sa pahina. Narito ang isang halimbawa... mayroon kaming dalawang button sa isang file ng larawan:
Kung gusto naming ipakita ang larawan sa kaliwa, maaari naming ibigay ang div arrow-left
bilang klase kaya ipinapakita lamang ng mga coordinate ang panig na iyon:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
At kung gusto naming ipakita ang kanang arrow, itatakda namin ang klase para sa aming div arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
CSS Sprites Para sa Light And Dark Mode
Ang isang kawili-wiling paggamit nito ay sa mga light at dark mode. Marahil ay mayroon kang logo o larawan na may madilim na text dito na hindi nakikita sa madilim na background. Ginawa ko ang halimbawang ito ng isang button na may puting center para sa light mode at isang dark center para sa dark mode.
Gamit ang CSS, maipapakita ko ang naaangkop na background ng larawan batay sa kung gumagamit ang user ng 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);
}
Exception: Maaaring Hindi Ito Suporta ng Mga Email Client
Ang ilang email client, gaya ng Gmail, ay hindi sumusuporta sa mga variable ng CSS, na ginagamit sa halimbawang ibinigay ko upang lumipat sa pagitan ng light at dark mode. Nangangahulugan ito na maaaring kailanganin mong gumamit ng mga alternatibong pamamaraan upang lumipat sa pagitan ng iba't ibang bersyon ng sprite na imahe para sa iba't ibang mga scheme ng kulay.
Ang isa pang limitasyon ay hindi sinusuportahan ng ilang email client ang ilang partikular na katangian ng CSS na karaniwang ginagamit sa mga CSS sprite, gaya ng background-position
. Ito ay maaaring maging mahirap na iposisyon ang mga indibidwal na larawan sa loob ng sprite image file.