Content Marketing

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:

Ohatra CSS Sprite

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.

css sprite mazava 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.

Douglas Karr

Douglas Karr dia CMO ny OpenINSIGHTS ary ny mpanorina ny Martech Zone. Nanampy tamin'ny fanombohana MarTech am-polony maro i Douglas, nanampy tamin'ny fahazotoana mitentina 5 miliara dolara amin'ny fividianana sy fampiasam-bola Martech, ary manohy manampy ireo orinasa amin'ny fampiharana sy ny automatique ny paikady momba ny varotra sy ny varotra. Douglas dia fanovàna nomerika eken'ny sehatra iraisam-pirenena ary manampahaizana sy mpandahateny MarTech. Douglas dia mpanoratra navoakan'ny torolàlana Dummie ary boky fitarihana orinasa.

Related Articles

Miverina amin'ny bokotra ambony
akaiky

Adblock hita

Martech Zone dia afaka manome anao ity votoaty ity tsy misy vidiny satria ataonay vola ny tranokalanay amin'ny alàlan'ny fidiram-bolan'ny doka, ny rohy mifandray, ary ny fanohanana. Mankasitraka izahay raha esorinao ny fanakanana dokao rehefa mijery ny tranokalanay ianao.