Marketing Content

Mokhoa oa ho Sebelisa CSS Sprites Ka Leseli le Mokhoa o Lefifi

CSS sprites ke mokhoa o sebelisoang ntlafatsong ea marang-rang ho fokotsa palo ea http likopo tse entsoeng ke leqephe la tepo. Li kenyelletsa ho kopanya litšoantšo tse nyane tse ngata faeleng e le 'ngoe e kholoanyane ea setšoantšo ebe ho sebelisoa CSS ho bonts'a likarolo tse itseng tsa setšoantšo seo e le likarolo tsa motho ka mong leqepheng la webo.

Molemo o ka sehloohong oa ho sebelisa li-sprites tsa CSS ke hore li ka thusa ho ntlafatsa nako ea mojaro oa leqephe bakeng sa sebaka sa marang-rang. Nako le nako ha setšoantšo se kentsoe leqepheng la tepo, se hloka kopo e arohaneng ea HTTP, e ka fokotsang ts'ebetso ea ho jarolla. Ka ho kopanya litšoantšo tse ngata ho setšoantšo se le seng sa sprite, re ka fokotsa palo ea likopo tsa HTTP tse hlokahalang ho kenya leqephe. Sena se ka fella ka webosaete e potlakileng le e arabelang haholoanyane, haholo bakeng sa libaka tse nang le litšoantšo tse nyane joalo ka li-icon le likonopo.

Ho sebelisa CSS sprites ho boetse ho re lumella ho nka monyetla ka caching ea sebatli. Ha mosebelisi a etela sebaka sa marang-rang, sebatli sa bona se tla boloka setšoantšo sa sprite kamora kopo ea pele. Sena se bolela hore likopo tse latelang tsa likarolo tsa motho ka mong leqepheng la sebaka sa marang-rang tse sebelisang setšoantšo sa sprite li tla potlaka haholo kaha sebatli se tla be se se se na le setšoantšo ka har'a cache ea sona.

Li-Sprites tsa CSS ha li Tumme Joalo ka ha li ne li Tumme

Li-sprites tsa CSS li ntse li sebelisoa hangata ho ntlafatsa lebelo la sebaka, leha li kanna tsa se ratoe joalo ka ha li kile tsa tsebahala. Ka lebaka la bandwidth e phahameng, web lifomate, compression ea setšoantšo, marangrang a ho fana ka litaba (CDN), ho laolla botsoa, 'me matla caching mahlale, ha re bone li-sprites tse ngata tsa CSS joalo ka ha re ne re tloaetse ho webosaete… leha e ntse e le leano le leholo. E bohlokoa haholo haeba u na le leqephe le buang ka bongata ba litšoantšo tse nyane.

Mohlala oa CSS Sprite

Ho sebelisa CSS sprites, re hloka ho hlalosa boemo ba setšoantšo ka seng ka har'a faele ea setšoantšo sa sprite re sebelisa CSS. Hangata sena se etsoa ka ho seta background-image 'me background-position thepa bakeng sa ntho e 'ngoe le e 'ngoe leqepheng la websaete e sebelisang setšoantšo sa sprite. Ka ho hlakisa likhokahano tsa x le y tsa setšoantšo ka har'a sprite, re ka bonts'a litšoantšo ka bomong e le likarolo tse arohaneng leqepheng. Mohlala ke ona... re na le likonopo tse peli faeleng e le 'ngoe ea setšoantšo:

Mohlala oa CSS Sprite

Haeba re batla hore setšoantšo se ka letsohong le letšehali se bontšoe, re ka fana ka div ka arrow-left joalo ka sehlopha kahoo likhokahano li bonts'a lehlakore leo feela:

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

'Me haeba re lakatsa ho hlahisa motsu o nepahetseng, re ka hlophisa sehlopha sa div ea rona arrow-right.

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

CSS Sprites Bakeng sa Leseli le Mokhoa o Lefifi

Tšebeliso e 'ngoe e khahlisang ea sena ke ka mekhoa e bobebe le e lefifi. Mohlomong u na le logo kapa setšoantšo se nang le mongolo o lefifi o sa bonahaleng bokaholimong bo lefifi. Ke entse mohlala ona oa konopo e nang le setsi se tšoeu bakeng sa mokhoa o khanyang le setsi se lefifi sa mokhoa o lefifi.

css sprite leseli le lefifi

Ke sebelisa CSS, nka bonts'a bokamorao ba setšoantšo bo nepahetseng ho latela hore na mosebelisi o sebelisa mokhoa o bobebe kapa mokhoa o lefifi:

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

Mokhelo: Bareki ba Imeile ba kanna ba se Tšehetsa Sena

Bareki ba bang ba lengolo-tsoibila, joalo ka Gmail, ha ba tšehetse mefuta-futa ea CSS, e sebelisoang mohlaleng oo ke faneng ka oona ho fetola pakeng tsa mekhoa e khanyang le e lefifi. Sena se bolela hore o kanna oa hloka ho sebelisa mekhoa e meng ho fetola lipakeng tsa mefuta e fapaneng ea setšoantšo sa sprite bakeng sa merero e fapaneng ea mebala.

Khaello e 'ngoe ke hore bareki ba bang ba lengolo-tsoibila ha ba tšehetse thepa e itseng ea CSS e sebelisoang hangata ho CSS sprites, joalo ka. background-position. Sena se ka etsa hore ho be thata ho beha litšoantšo ka bomong ka har'a faele ea setšoantšo sa sprite.

Douglas Karr

Douglas Karr ke CMO ea Bula LITLHAKISO le mothehi oa Martech Zone. Douglas o thusitse batho ba bangata ba atlehileng ho qala ka MarTech, o thusitse boitelong bo nepahetseng ba chelete e fetang $5 bilione ho reka le matsete a Martech, mme o ntse a tsoela pele ho thusa lik'hamphani ho kenya ts'ebetsong le ho iketsetsa maano a bona a ho rekisa le ho bapatsa. Douglas ke setsebi le sebui sa MarTech se tsebahalang lefatšeng ka bophara. Douglas hape ke sengoli se hatisitsoeng sa tataiso ea Dummie le buka ea boetapele ba khoebo.

Related Articles

Konopo ea holimo
Close

Adblock e fumanwe

Martech Zone e khona ho u fa litaba tsena ntle ho tefo hobane re etsa chelete sebakeng sa rona sa marang-rang ka lekeno la lipapatso, likhokahano tsa kopanelo le lithuso tsa lichelete. Re ka thabela ha o ka tlosa se thibelang lipapatso ha u ntse u sheba sebaka sa rona sa marang-rang.