Content Suuq

Sida Loo Isticmaalo CSS Sprites Leh Iyo Qaab Madow

CSS sprites waa farsamo loo isticmaalo horumarinta webka si loo yareeyo tirada HTTP codsiyada uu sameeyay bog shabakad. Waxay ku lug leeyihiin in la isku daro sawiro yar yar oo la mid ah hal fayl oo weyn ka dibna la isticmaalo CSS si ay u muujiyaan qaybo gaar ah oo sawirkaas ah sida xubno shakhsi ah bogga shabakadda.

Faa'iidada aasaasiga ah ee isticmaalka sprites CSS waa in ay gacan ka geysan karaan hagaajinta wakhtiga rarista bogga shabakadda. Mar kasta oo sawir lagu shubo bogga shabakadda, waxa ay u baahan tahay codsi HTTP gaar ah, kaas oo hoos u dhigi kara habka wax-soo-saarka. Marka la isku daro sawirro badan hal sawir oo sprite ah, waxaan yareyn karnaa tirada codsiyada HTTP ee loo baahan yahay si loo soo geliyo bogga. Tani waxay dhalin kartaa degel deg deg ah oo ka jawaab celin badan, gaar ahaan bogagga leh sawirro yar yar oo badan sida calaamadaha iyo badhamada.

Isticmaalka sprites CSS sidoo kale waxay noo ogolaanaysaa inaan ka faa'iidaysanno kaydinta browserka. Marka isticmaaluhu uu booqdo mareegaha, browserkoodu wuxuu kaydin doonaa sawirka sprite ka dib codsiga ugu horreeya. Tani waxay ka dhigan tahay in codsiyada soo socda ee walxaha shakhsi ahaaneed ee bogga shabakadda ee isticmaalaya sawirka sprite ay aad u dhaqso badan doonaan maaddaama browserku uu hore u lahaan doono sawirka khasnaddiisa.

CSS Sprites maaha kuwo caan ah sidii ay ahaan jireen

CSS sprites ayaa weli sida caadiga ah loo isticmaalaa si loo hagaajiyo xawaaraha goobta, in kasta oo laga yaabo in ayan caan ahayn sidii ay markii hore ahaayeen. Sababtoo ah xawaaraha sare ee xawaaraha, webp qaabab, faafidda sawirka, shabakadaha gudbinta nuxurka (CDN), rar caajis ah, Iyo kaydin xoog leh teknoolajiyada, uma aragno inta badan CSS sprites sidii aan ku isticmaali jirnay shabakadda… in kasta oo ay weli tahay istiraatiijiyad weyn. Aad bay faa'iido u leedahay haddii aad leedahay bog tixraacaya sawirro yaryar oo badan.

Tusaalaha CSS Sprite

Si loo isticmaalo sprites CSS, waxaan u baahanahay inaan qeexno booska sawir kasta oo ku jira faylka sawirka sprite iyadoo la adeegsanayo CSS. Tan waxaa caadi ahaan lagu sameeyaa iyadoo la dejinayo background-image iyo background-position sifooyinka shay kasta oo ku yaal bogga shabakadda ee isticmaala sawirka sprite. Marka la qeexo x iyo y isku-duwayaasha sawirka gudaha sprite, waxaan ku soo bandhigi karnaa sawirro gaar ah sida walxo gaar ah bogga. Waa kan tusaale… waxaan ku haynaa laba badhan hal fayl sawir ah:

Tusaalaha CSS Sprite

Haddii aan rabno in sawirka bidixda ku yaal la muujiyo, waxaan ku siin karnaa div-ga arrow-left sida fasalka sidaas darteed isku-duwayaasha ayaa kaliya muujinaya dhinacaas:

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

Oo haddii aan rabno inaan soo bandhigno falaarta saxda ah, waxaan u dejin doonnaa fasalka si aan u leexino arrow-right.

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

CSS Sprites ee iftiinka iyo qaabka mugdiga ah

Mid ka mid ah isticmaalka xiisaha leh ee tan waa iftiinka iyo qaababka mugdiga ah. Waxaa laga yaabaa inaad leedahay calaamad ama sawir ay ku qoran tahay qoraal mugdi ah oo aan ka muuqan meel madow. Waxaan sameeyay tusaalahan badhanka leh xarun cad oo loogu talagalay qaabka iftiinka iyo xarun mugdi ah oo mugdi ah.

css sprite iftiin madow

Isticmaalka CSS, waxaan soo bandhigi karaa asalka sawirka ku habboon iyadoo ku saleysan haddii isticmaaluhu uu isticmaalayo qaabka iftiinka ama qaab mugdi ah:

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

Marka laga reebo: Macaamiisha Iimaylku ma taageeri karaan tan

Qaar ka mid ah macaamiisha iimaylka, sida Gmail, ma taageeraan doorsoomayaasha CSS, kuwaas oo loo isticmaalo tusaalaha aan bixiyay si loogu kala beddelo hababka iftiinka iyo mugdiga. Tani waxay ka dhigan tahay in laga yaabo inaad u baahato inaad isticmaasho farsamooyin kale si aad u kala beddesho noocyada kala duwan ee sawirka sprite ee nidaamyada midabada kala duwan.

Xaddidaad kale ayaa ah in macaamiisha iimaylka qaarkood aysan taageerin qaar ka mid ah guryaha CSS ee sida caadiga ah loo isticmaalo sprites CSS, sida background-position. Tani waxay adkeyn kartaa in la dhigo sawirada gaarka ah gudaha faylka sawirka sprite.

Douglas Karr

Douglas Karr waa CMO INSIGHTS iyo aasaasihii Martech Zone. Douglas waxa uu caawiyay daraasiin guulo bilaabay MarTech, waxa uu ka caawiyay dadaalka saxda ah ee ka badan $5 bilyan ee iibsiga iyo maalgashiga Martech, waxana uu sii wadaa in uu ka caawiyo shirkadaha hirgelinta iyo habaynta xeeladahooda iibka iyo suuqgeynta. Douglas waa isbeddel dhijitaal ah oo caalami ah oo la aqoonsan yahay iyo khabiir MarTech iyo afhayeenka. Douglas sidoo kale waa qoraa la daabacay ee hagaha Dummie iyo buug hogaaminta ganacsiga.

Qodobbo la xiriira

Gadaal u laab
Close

Adblock waa la ogaaday

Martech Zone wuxuu awoodaa inuu ku siiyo macluumaadkan lacag la'aan sababtoo ah waxaanu ka galnay boggayaga dakhliga xayaysiiska, xidhiidhada xiriirka, iyo kafaalaqaadyada. Waanu qadarin lahayn haddii aad ka saari lahayd xannibaadahaaga xayaysiisyada markaad aragto boggayaga.