Maudhui ya masoko

Jinsi ya Kutumia Sprites za CSS zenye Hali ya Mwanga na Giza

CSS sprites ni mbinu inayotumika katika ukuzaji wa wavuti ili kupunguza idadi ya HTTP maombi yaliyotolewa na ukurasa wa wavuti. Yanahusisha kuchanganya picha nyingi ndogo hadi faili moja kubwa ya picha na kisha kutumia CSS kuonyesha sehemu mahususi za picha hiyo kama vipengele mahususi kwenye ukurasa wa wavuti.

Faida kuu ya kutumia sprites za CSS ni kwamba zinaweza kusaidia kuboresha muda wa kupakia ukurasa kwa tovuti. Kila wakati picha inapopakiwa kwenye ukurasa wa wavuti, inahitaji ombi tofauti la HTTP, ambalo linaweza kupunguza kasi ya upakiaji. Kwa kuchanganya picha nyingi katika picha moja ya sprite, tunaweza kupunguza idadi ya maombi ya HTTP yanayohitajika kupakia ukurasa. Hii inaweza kusababisha tovuti ya haraka na inayojibu zaidi, hasa kwa tovuti zilizo na picha nyingi ndogo kama vile ikoni na vitufe.

Kutumia sprites za CSS pia huturuhusu kuchukua fursa ya uhifadhi wa kivinjari. Mtumiaji anapotembelea tovuti, kivinjari chake kitahifadhi picha ya sprite baada ya ombi la kwanza. Hii ina maana kwamba maombi ya baadae ya vipengele vya mtu binafsi kwenye ukurasa wa wavuti vinavyotumia picha ya sprite yatakuwa haraka zaidi kwani kivinjari kitakuwa tayari na picha kwenye kache yake.

CSS Sprites Sio Maarufu Kama Walivyokuwa Hapo awali

Sprites za CSS bado hutumiwa sana kuboresha kasi ya tovuti, ingawa zinaweza zisiwe maarufu kama zilivyokuwa hapo awali. Kwa sababu ya bandwidth ya juu, webp miundo, ukandamizaji wa picha, mitandao ya utoaji maudhui (CDN), upakiaji wavivu, na caching yenye nguvu teknolojia, hatuoni sprites nyingi za CSS kama tulivyokuwa tukiona kwenye wavuti… ingawa bado ni mkakati mzuri. Ni muhimu sana ikiwa una ukurasa unaorejelea wingi wa picha ndogo.

Mfano wa CSS Sprite

Ili kutumia Sprites za CSS, tunahitaji kufafanua nafasi ya kila picha ya kibinafsi ndani ya faili ya picha ya sprite kwa kutumia CSS. Hii kawaida hufanywa kwa kuweka background-image na background-position mali kwa kila kipengele kwenye ukurasa wa wavuti unaotumia picha ya sprite. Kwa kubainisha viwianishi vya x na y vya picha ndani ya sprite, tunaweza kuonyesha picha binafsi kama vipengele tofauti kwenye ukurasa. Huu hapa mfano... tuna vitufe viwili katika faili moja ya picha:

Mfano wa CSS Sprite

Ikiwa tunataka picha iliyo upande wa kushoto ionyeshwe, tunaweza kutoa div nayo arrow-left kama darasa kwa hivyo kuratibu zinaonyesha upande huo tu:

.arrow-left {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat 0 0;
}

Na ikiwa tunataka kuonyesha mshale unaofaa, tungeweka darasa kwa div yetu arrow-right.

.arrow-right {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat -200px 0;
}

Sprites za CSS za Hali ya Mwanga na Giza

Moja ya kuvutia ya matumizi ya hii ni pamoja na mwanga na giza modes. Labda una nembo au picha ambayo ina maandishi meusi ambayo hayaonekani kwenye mandharinyuma meusi. Nilifanya mfano huu wa kitufe ambacho kina kituo cheupe cha hali ya mwanga na kituo cha giza cha hali ya giza.

css sprite mwanga giza

Kwa kutumia CSS, ninaweza kuonyesha mandharinyuma ya picha inayofaa kulingana na ikiwa mtumiaji anatumia hali nyepesi au hali nyeusi:

: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);
}

Isipokuwa: Wateja wa Barua Pepe Huenda Wasitumie Hili

Baadhi ya wateja wa barua pepe, kama vile Gmail, hawatumii vigeu vya CSS, ambavyo hutumika katika mfano niliotoa kubadili kati ya modi nyepesi na nyeusi. Hii ina maana kwamba unaweza kuhitaji kutumia mbinu mbadala kubadili kati ya matoleo tofauti ya picha ya sprite kwa mipango tofauti ya rangi.

Kizuizi kingine ni kwamba wateja wengine wa barua pepe hawatumii mali fulani za CSS ambazo hutumiwa sana katika mifumo ya CSS, kama vile. background-position. Hii inaweza kufanya iwe vigumu kuweka picha za kibinafsi ndani ya faili ya picha ya sprite.

Douglas Karr

Douglas Karr ni CMO ya Fungua MAELEZO na mwanzilishi wa Martech Zone. Douglas amesaidia kampuni nyingi za kuanzisha MarTech zilizofaulu, amesaidia katika bidii inayofaa ya zaidi ya $5 bil katika ununuzi na uwekezaji wa Martech, na anaendelea kusaidia kampuni katika kutekeleza na kuelekeza mikakati yao ya uuzaji na uuzaji kiotomatiki. Douglas ni mtaalamu wa mabadiliko ya kidijitali anayetambulika kimataifa na mtaalam wa MarTech na spika. Douglas pia ni mwandishi aliyechapishwa wa mwongozo wa Dummie na kitabu cha uongozi wa biashara.

Related Articles

Rudi kwenye kifungo cha juu
karibu

Adblock Imegunduliwa

Martech Zone inaweza kukupa maudhui haya bila gharama kwa sababu tunachuma mapato ya tovuti yetu kupitia mapato ya matangazo, viungo vya washirika na ufadhili. Tutashukuru ikiwa ungeondoa kizuizi chako cha matangazo unapotazama tovuti yetu.