Me pehea te whakamahi i te CSS Sprites me te Aratau Maama me te pouri
CSS Ko te sprites he tikanga e whakamahia ana i roto i te whanaketanga paetukutuku hei whakaiti i te maha o HTTP nga tono i mahia e tetahi wharangi paetukutuku. Ka uru ki te whakakotahi i nga whakaahua iti maha ki roto i te konae ahua nui ake ka whakamahi CSS hei whakaatu i nga waahanga motuhake o taua ahua hei huānga takitahi ki te wharangi paetukutuku.
Ko te painga tuatahi o te whakamahi i nga sprites CSS ko te mea ka taea e raatau te whakapai ake i te waa uta whaarangi mo te paetukutuku. I nga wa katoa ka utaina he ahua ki runga i te wharangi paetukutuku, me tono he tono HTTP motuhake, ka taea te whakaroa i te mahi uta. Ma te whakakotahi i nga whakaahua maha ki te ahua sprite kotahi, ka taea e tatou te whakaiti i te maha o nga tono HTTP e hiahiatia ana hei uta i te wharangi. Ma tenei ka puta ake he paetukutuku tere me te aro ake, ina koa mo nga waahi maha nga whakaahua iti penei i nga tohu me nga paatene.
Ma te whakamahi i nga sprites CSS ka taea hoki e tatou te whakamahi i te keteroki tirotiro. Ina toro atu te kaiwhakamahi ki tetahi paetukutuku, ka huna e to kaitirotiro te ahua sprite i muri i te tono tuatahi. Ko te tikanga ko nga tono a muri ake mo nga huānga takitahi kei runga i te wharangi paetukutuku e whakamahi ana i te ahua sprite ka tere ake na te mea kei te kaitirotiro te ahua kei roto i tana keteroki.
Ko nga Sprites CSS Kaore i te rongonui pera i mua
Kei te whakamahia tonu nga sprite CSS ki te whakapai ake i te tere o te waahi, ahakoa kaore pea i te rongonui pera i mua. Na te nui o te bandwidth, webp whakatakotoranga, pikitia pikitia, whatunga tuku ihirangi (CDN), utanga mangere, a keteroki kaha hangarau, kaore matou e kite i te maha o nga sprites CSS pera i mua i a matou i runga ipurangi… ahakoa he rautaki pai tonu. He tino whai hua mena kei a koe he wharangi e tohutoro ana i te tini o nga whakaahua iti.
CSS Sprite Tauira
Hei whakamahi i nga sprites CSS, me tautuhi te tuunga o ia ahua takitahi i roto i te konae whakaahua sprite ma te whakamahi CSS. Ka mahia tenei ma te whakarite i te background-image
a background-position
āhuatanga mō ia huānga i te whārangi tukutuku e whakamahi ana i te ahua sprite. Ma te tautuhi i nga taunga x me y o te ahua i roto i te sprite, ka taea e taatau te whakaatu i nga whakaahua takitahi hei waahanga motuhake i te wharangi. Anei tetahi tauira… e rua nga paatene kei roto i te konae whakaahua kotahi:
Mena e hiahia ana matou kia whakaatuhia te ahua kei te taha maui, ka taea e matou te whakarato i te div arrow-left
hei karaehe ka whakaatu noa nga taunga i tera taha:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
A, ki te pirangi matou ki te whakaatu i te pere matau, ka whakatauhia e matou te karaehe mo to maatau div arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
CSS Sprites Mo te Aratau Maama me te Pouri
Ko tetahi whakamahinga pai o tenei ko nga ahuatanga marama me te pouri. Tena pea kei a koe he tohu, he ahua ranei he tuhinga pouri kei runga kaore e kitea i te papamuri pouri. I mahia e au tenei tauira o te paatene he pokapu ma mo te aratau marama me tetahi pokapu pouri mo te aratau pouri.
Ma te whakamahi i te CSS, ka taea e au te whakaatu i te papamuri whakaahua e tika ana i runga i te mea kei te whakamahi te kaiwhakamahi i te aratau marama, i te aratau pouri ranei:
: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);
}
Okotahi: Kaore pea nga Kaitaki imeera e tautoko i tenei
Ko etahi o nga kaihoko imeera, penei i a Gmail, kaore i te tautoko i nga taurangi CSS, e whakamahia ana i roto i te tauira i hoatu e ahau ki te huri i waenga i nga momo marama me te pouri. Ko te tikanga ka hiahia pea koe ki te whakamahi i nga tikanga rereke hei huri i waenga i nga momo momo ahua o te ahua sprite mo nga kaupapa tae rereke.
Ko tetahi atu herenga ko etahi o nga kaihoko imeera kaore i te tautoko i etahi ahuatanga CSS e whakamahia ana i roto i nga sprite CSS, penei i background-position
. He uaua tenei ki te tuu i nga whakaahua takitahi ki roto i te konae whakaahua sprite.