Ahoana ny fampiasana CSS Sprite miaraka amin'ny maody maivana sy maizina
CSS sprites dia teknika ampiasaina amin'ny fampivoarana tranonkala mba hampihenana ny isan'ny HTTP fangatahana nataon'ny pejy web. Tafiditra amin'izy ireo ny fampifangaroana sary kely maromaro ho rakitra sary lehibe iray ary avy eo mampiasa CSS mba hampisehoana fizarana manokana amin'io sary io ho singa tsirairay ao amin'ny pejin-tranonkala.
Ny tombony voalohany amin'ny fampiasana CSS sprites dia ny ahafahan'izy ireo manampy amin'ny fanatsarana ny fotoana fandefasana pejy ho an'ny tranokala. Isaky ny asiana sary iray ao amin'ny pejin-tranonkala iray dia mitaky fangatahana HTTP mitokana izy io, izay mety hampiadana ny fizotran'ny fampidinana. Amin'ny fampifangaroana sary maromaro ho sary sprite tokana, dia afaka mampihena ny isan'ny fangatahana HTTP ilaina hampidirana ny pejy isika. Mety hiteraka tranokala haingana kokoa sy mandray andraikitra kokoa izany, indrindra ho an'ny tranokala misy sary kely maro toy ny kisary sy bokotra.
Ny fampiasana CSS sprites dia ahafahantsika manararaotra ny caching navigateur. Rehefa mitsidika vohikala ny mpampiasa iray, ny mpitety tranonkalany dia hanao cache ny sary sprite aorian'ny fangatahana voalohany. Midika izany fa ny fangatahana manaraka ho an'ny singa tsirairay ao amin'ny pejin-tranonkala izay mampiasa ny sary sprite dia ho haingana kokoa satria ny navigateur dia efa manana ny sary ao amin'ny cache.
Ny CSS Sprites dia tsy malaza tahaka ny taloha
Ny CSS sprites dia mbola ampiasaina matetika hanatsarana ny hafainganam-pandehan'ny tranonkala, na dia mety tsy ho malaza toy ny taloha aza izy ireo. Noho ny haavon'ny bandwidth, Malagasy endrika, famatrarana sary, tambajotra fanaterana votoaty (CDN), mampiditra kamo, ary caching matanjaka teknolojia, tsy mahita sprite CSS betsaka toy ny taloha izahay amin'ny tranonkala… na dia mbola tetika tsara aza izany. Tena ilaina izany raha manana pejy miresaka sary kely marobe ianao.
Ohatra CSS Sprite
Raha hampiasa CSS sprites dia mila mamaritra ny toeran'ny sary tsirairay ao anatin'ny rakitra sary sprite mampiasa CSS isika. Izany dia atao matetika amin'ny fametrahana ny background-image
ary background-position
fananana ho an'ny singa tsirairay ao amin'ny pejin-tranonkala izay mampiasa ny sary sprite. Amin'ny alalan'ny famaritana ny x sy y koordinate amin'ny sary ao anatin'ny sprite, dia afaka mampiseho sary tsirairay ho singa misaraka amin'ny pejy. Ity misy ohatra… manana bokotra roa ao anaty rakitra iray isika:
Raha tiantsika haseho ny sary eo ankavia, dia afaka manome ny div amin'ny arrow-left
toy ny kilasy ka ny koordinate dia mampiseho an'io lafiny io ihany:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
Ary raha tiantsika ny hampiseho ny zana-tsipìka havanana, dia apetrakay ny kilasy ho an'ny div arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
CSS Sprites ho an'ny maody maivana sy maizina
Ny fampiasana iray mahaliana amin'ity dia miaraka amin'ny maody maivana sy maizina. Angamba ianao manana logo na sary misy soratra maizina tsy hita amin'ny ambadika maizina. Nanao ity ohatra amin'ny bokotra iray ity aho izay misy foibe fotsy ho an'ny maody maivana ary afovoany maizina ho an'ny maody maizina.
Amin'ny fampiasana CSS, azoko atao ny mampiseho ny mombamomba ny sary mifanaraka amin'ny hoe mampiasa maody maivana na maody maizina ny mpampiasa:
: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: Mety tsy hanohana an'ity ny mpanjifa mailaka
Ny mpanjifa mailaka sasany, toa an'i Gmail, dia tsy manohana ny fari-piadidiana CSS, izay ampiasaina amin'ny ohatra nomeko hifindra eo amin'ny maody maivana sy maizina. Midika izany fa mety mila mampiasa teknika hafa ianao mba hifindra eo amin'ny dikan-teny samihafa amin'ny sary sprite ho an'ny rafitra loko samihafa.
Famerana iray hafa dia ny mpanjifa mailaka sasany tsy mahazaka fananana CSS sasany izay matetika ampiasaina amin'ny CSS sprites, toy ny background-position
. Mety hanasarotra ny fametrahana sary tsirairay ao anatin'ny rakitra sary sprite izany.