Isetshenziswa Kanjani I-CSS Sprites Ngemodi Ekhanyayo Nemnyama
CSS ama-sprites ayindlela esetshenziswa ekuthuthukisweni kwewebhu ukunciphisa inani HTTP izicelo ezenziwe yikhasi lewebhu. Kubandakanya ukuhlanganisa izithombe eziningi ezincane zibe ifayela elilodwa elikhulu lesithombe bese usebenzisa i-CSS ukuze ubonise izingxenye ezithile zaleso sithombe njengama-elementi angawodwana ekhasini lewebhu.
Inzuzo eyinhloko yokusebenzisa ama-CSS sprites ukuthi angasiza ekuthuthukiseni isikhathi sokulayisha ikhasi kuwebhusayithi. Ngaso sonke isikhathi uma isithombe silayishwa ekhasini lewebhu, sidinga isicelo esihlukile se-HTTP, esinganciphisa inqubo yokulayisha. Ngokuhlanganisa izithombe eziningi zibe isithombe esisodwa se-sprite, singehlisa inani lezicelo ze-HTTP ezidingekayo ukuze kulayishwe ikhasi. Lokhu kungaholela kuwebhusayithi esheshayo nesabelayo, ikakhulukazi kumasayithi anezithombe eziningi ezincane njengezithonjana nezinkinobho.
Ukusebenzisa i-CSS sprites futhi kusivumela ukuthi sisebenzise i-caching yesiphequluli. Uma umsebenzisi evakashela iwebhusayithi, isiphequluli sakhe sizogcina inqolobane yesithombe se-sprite ngemuva kwesicelo sokuqala. Lokhu kusho ukuthi izicelo ezilandelayo zezinto ezingazodwana ekhasini lewebhu ezisebenzisa isithombe se-sprite zizoshesha kakhulu njengoba isiphequluli sesizovele sinaso isithombe kunqolobane yaso.
I-CSS Sprites Awadumile Njengoba Yake Yaduma
Ama-CSS sprites asasetshenziswa kakhulu ukuthuthukisa isivinini sesayithi, nakuba engase angadumile njengoba ayekade edumile. Ngenxa yomkhawulokudonsa ophezulu, iwebhu amafomu, Ukuminyaniswa kwesithombe, amanethiwekhi okulethwa kokuqukethwe (CDN), ukulayisha ubuvila, Futhi ukulondoloza isikhashana okuqinile ubuchwepheshe, asiwaboni ama-sprite e-CSS amaningi njengoba besivame ukubona kuwebhu… noma kuseyisu elihle. Kuwusizo ikakhulukazi uma unekhasi elibhekisela kunqwaba yezithombe ezincane.
Isibonelo se-CSS Sprite
Ukuze usebenzise i-CSS sprites, sidinga ukuchaza indawo yesithombe ngasinye ngaphakathi kwefayela lesithombe se-sprite sisebenzisa i-CSS. Lokhu ngokuvamile kwenziwa ngokusetha i- background-image
futhi background-position
izici zesici ngasinye ekhasini lewebhu elisebenzisa isithombe se-sprite. Ngokucacisa izixhumanisi ze-x kanye no-y zesithombe ngaphakathi kwe-sprite, singabonisa izithombe ngazinye njengama-elementi ahlukene ekhasini. Nasi isibonelo... sinezinkinobho ezimbili efayeleni lesithombe esisodwa:
Uma sifuna ukuthi isithombe esingakwesokunxele siboniswe, singahlinzeka nge-div arrow-left
njengeklasi ngakho izixhumanisi zibonisa kuphela lolo hlangothi:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
Futhi uma sifisa ukubonisa umcibisholo olungile, singasethela ikilasi le-div yethu arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
I-CSS Sprites Yemodi Ekhanyayo Nemnyama
Ukusetshenziswa okukodwa kwalokhu kunezindlela ezikhanyayo nezimnyama. Mhlawumbe unelogo noma isithombe esinombhalo omnyama kuso ongabonakali kungemuva elimnyama. Ngenze lesi sibonelo senkinobho enesikhungo esimhlophe semodi yokukhanya kanye nesikhungo esimnyama semodi emnyama.
Ngisebenzisa i-CSS, ngingabonisa ingemuva lesithombe elifanele ngokusekelwe ekutheni umsebenzisi usebenzisa imodi ekhanyayo noma imodi emnyama:
: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);
}
Okuhlukile: Amaklayenti E-imeyili Angase Angakusekeli Lokhu
Amanye amaklayenti e-imeyili, njenge-Gmail, awasekeli okuguquguqukayo kwe-CSS, asetshenziswa esibonelweni engisinikezile ukushintsha phakathi kwemodi ekhanyayo nemnyama. Lokhu kusho ukuthi kungase kudingeke ukuthi usebenzise ezinye izindlela ukuze ushintshe phakathi kwezinguqulo ezihlukene zesithombe se-sprite ukuze uthole izikimu zemibala ehlukene.
Omunye umkhawulo ukuthi amanye amaklayenti e-imeyili awasekeli izakhiwo ezithile ze-CSS ezivame ukusetshenziswa ku-CSS sprites, njenge background-position
. Lokhu kungenza kube nzima ukubeka izithombe ngazinye ngaphakathi kwefayela lesithombe se-sprite.