Mashandisiro eCSS Sprites ane Chiedza uye Rima Mode
CSS sprites inzira inoshandiswa mukuvandudza webhu kuderedza huwandu hwe HTTP zvikumbiro zvakaitwa newebhu peji. Zvinosanganisira kubatanidza mifananidzo midiki yakawanda kuita imwe hombe mufananidzo faira uyezve kushandisa CSS kuratidza chaiwo zvikamu zvemufananidzo iwoyo sezvinhu zvega pane peji rewebhu.
Kubatsira kwekutanga kwekushandisa CSS sprites ndeyekuti ivo vanogona kubatsira kuvandudza peji rekutakura nguva yewebhusaiti. Pese pese mufananidzo uchiiswa pawebhu peji, zvinoda imwe chikumbiro cheHTTP chakasiyana, chinogona kunonoka kurodha. Nekubatanidza mifananidzo yakawanda kuita imwe sprite mufananidzo, tinogona kuderedza nhamba yeHTTP zvikumbiro zvinodiwa kurodha peji. Izvi zvinogona kukonzera webhusaiti inokurumidza uye inopindura zvakanyanya, kunyanya kumasaiti ane mifananidzo midiki mizhinji senge ma icons nemabhatani.
Kushandisa CSS sprites zvakare kunotitendera kutora mukana webrowser caching. Kana mushandisi akashanyira webhusaiti, bhurawuza ravo rinochengeta iyo sprite mufananidzo mushure mekukumbira kwekutanga. Izvi zvinoreva kuti zvikumbiro zvinotevera zvezvinhu zvega pawebhu peji izvo zviri kushandisa sprite mufananidzo zvichakurumidza zvakanyanya sezvo bhurawuza rinenge rave nemufananidzo mune cache yayo.
CSS Sprites Haina Kuzivikanwa SezvaVaimbova
CSS sprites achiri anowanzo kushandiswa kuvandudza saiti kumhanya, kunyangwe angave asina mukurumbira sezvaaimboita. Nekuda kwepamusoro bandwidth, webhu mafomati, compression yemufananidzo, zviwanikwa zvekutumira network (CDN), nungo kurodha, uye yakasimba caching matekinoroji, hatisi kuona akawanda eCSS sprites sezvataimboita pawebhu… kunyangwe ichiri zano rakanaka. Zvinonyanya kubatsira kana iwe uine peji iri kunongedzera kuwanda kwemifananidzo midiki.
CSS Sprite Muenzaniso
Kuti tishandise CSS sprites, tinoda kutsanangura nzvimbo yemufananidzo wega wega mukati meiyo sprite mufananidzo faira uchishandisa CSS. Izvi zvinonyanya kuitwa nekuseta iyo background-image
uye background-position
zvivakwa zvechimwe nechimwe chinhu chiri pawebhu peji inoshandisa iyo sprite mufananidzo. Nekutsanangudza x uye y kurongeka kwemufananidzo mukati me sprite, tinogona kuratidza mifananidzo yega sezvikamu zvakasiyana pane peji. Heino muenzaniso… tine mabhatani maviri mufaira remufananidzo mumwe chete:
Kana tichida kuti mufananidzo uri kuruboshwe uratidzwe, tinogona kupa div nayo arrow-left
sekirasi saka zvinorongeka zvinongoratidza divi iro:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
Uye kana isu tichishuvira kuratidza museve chaiwo, isu taiseta kirasi yedu div arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
CSS Sprites YeChiedza uye Rima Modhi
Imwe inonakidza kushandiswa kweiyi ine chiedza uye nerima modes. Pamwe iwe une logo kana mufananidzo une mavara akasviba pairi asingaonekwe pane yakasviba kumashure. Ndakaita uyu muenzaniso webhatani rine chena nzvimbo yechiedza modhi uye yakasviba nzvimbo yerima mode.
Ndichishandisa CSS, ndinogona kuratidza iyo yakakodzera mufananidzo kumashure zvichienderana nekuti mushandisi ari kushandisa mwenje modhi kana rima modhi:
: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);
}
Kunze kwe: Vatengi veEmail Vanogona Kusatsigira Izvi
Vamwe vatengi veemail, seGmail, havatsigire maCSS akasiyana, ayo anoshandiswa mumuenzaniso wandakapa kushandura pakati pechiedza nerima modes. Izvi zvinoreva kuti ungangoda kushandisa mamwe maitiro ekuchinja pakati peakasiyana mavhezheni emufananidzo we sprite kune akasiyana mavara zvirongwa.
Chimwe chinodzikisira ndechekuti vamwe vatengi veemail havatsigire zvimwe zveCSS zvivakwa zvinowanzo shandiswa muCSS sprites, senge. background-position
. Izvi zvinogona kuita kuti zviome kuisa mifananidzo yega mukati meiyo sprite mufananidzo faira.