content Marketing

Otu esi eji CSS Sprite na ọkụ na ọnọdụ gbara ọchịchịrị

CSS sprites bụ usoro eji na mmepe weebụ iji belata ọnụ ọgụgụ Http arịrịọ nke ibe weebụ mere. Ha na-agụnye ijikọta ọtụtụ obere onyonyo n'ime otu faịlụ onyonyo buru ibu wee jiri CSS gosipụta akụkụ ụfọdụ nke onyonyo ahụ dị ka ihe dị iche iche na ibe weebụ.

Uru bụ isi nke iji CSS sprite bụ na ha nwere ike inye aka melite oge ibu ibe maka weebụsaịtị. Oge ọ bụla agbakwunyere onyonyo na ibe weebụ, ọ na-achọ arịrịọ HTTP dị iche, nke nwere ike belata usoro nbudata ahụ. Site na ijikọta otutu onyonyo n'ime otu onyonyo sprite, anyị nwere ike ibelata ọnụọgụ arịrịọ HTTP achọrọ iji buo ibe ahụ. Nke a nwere ike ime ka webụsaịtị dị ngwa ma na-anabata ngwa ngwa, ọkachasị maka saịtị nwere ọtụtụ obere onyonyo dị ka akara ngosi na bọtịnụ.

Iji CSS sprites na-enyekwara anyị ohere iji ohere nke caching nchọgharị. Mgbe onye ọrụ gara na webụsaịtị, ihe nchọgharị ha ga-echekwa onyonyo sprite mgbe arịrịọ mbụ ahụ gasịrị. Nke a pụtara na arịrịọ ndị na-esote maka ihe ndị dị n'otu n'otu na ibe weebụ na-eji onyonyo sprite ga-adị ngwa ngwa ebe ọ bụ na ihe nchọgharị ahụ enwelarị onyonyo na cache ya.

CSS Sprites adịghị ewu ewu ka ọ dịbu

A ka na-ejikarị sprites CSS iji kwalite ọsọ saịtị, n'agbanyeghị na ha nwere ike ọ gaghị ewu ewu dị ka ọ dịbu. N'ihi oke bandwidth, webp ụdị, image mkpakọ, netwọk nnyefe ọdịnaya (CDN), umengwụ loading, na ike caching teknụzụ, anyị anaghị ahụ ọtụtụ sprite CSS dị ka anyị na-emebu na webụ… n'agbanyeghị na ọ ka bụ nnukwu atụmatụ. Ọ bara uru karịsịa ma ọ bụrụ na ị nwere ibe na-ezo aka n'ọtụtụ obere onyonyo.

Ọmụmaatụ CSS Sprite

Iji jiri CSS sprite, anyị kwesịrị ịkọwa ọnọdụ nke onyonyo ọ bụla n'ime faịlụ onyonyo sprite site na iji CSS. A na-emekarị nke a site na ịtọ ntọala background-image na background-position Njirimara maka ihe ọ bụla na ibe weebụ nke na-eji ihe oyiyi sprite. Site n'ịkọwa nhazi x na y nke onyonyo a n'ime sprite, anyị nwere ike igosipụta onyonyo nke ọ bụla dịka ihe dị iche iche na ibe. Nke a bụ ọmụmaatụ… anyị nwere bọtịnụ abụọ na otu faịlụ onyonyo:

Ọmụmaatụ CSS Sprite

Ọ bụrụ na anyị chọrọ ka ihe oyiyi dị n'aka ekpe gosi, anyị nwere ike inye div na arrow-left dị ka klaasị ya mere nhazi ahụ na-egosipụta naanị akụkụ ahụ:

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

Ma ọ bụrụ na anyị chọrọ igosi akụ ziri ezi, anyị ga-edobe klas maka div anyị arrow-right.

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

CSS Sprites Maka ọkụ na ọnọdụ gbara ọchịchịrị

Otu ihe na-adọrọ mmasị na nke a bụ na ìhè na ọchịchịrị ụdịdị. Ikekwe ị nwere akara ngosi ma ọ bụ onyonyo nwere ederede gbara ọchịchịrị na ya nke anaghị ahụ n'okirikiri gbara ọchịchịrị. Emere m ihe atụ a nke bọtịnụ nwere etiti ọcha maka ọnọdụ ọkụ yana ebe gbara ọchịchịrị maka ọnọdụ gbara ọchịchịrị.

css sprite ìhè gbara ọchịchịrị

Iji CSS, enwere m ike igosipụta ndabere onyonyo dabara adaba dabere ma onye ọrụ na-eji ọnọdụ ọkụ ma ọ bụ ọnọdụ gbara ọchịchịrị:

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

Ewezuga: Ndị ahịa email enweghị ike ịkwado nke a

Ụfọdụ ndị ahịa email, dị ka Gmail, anaghị akwado mgbanwe CSS, nke a na-eji na ihe atụ m nyere iji gbanwee n'etiti ụdị ọkụ na ọchịchịrị. Nke a pụtara na ị nwere ike iji usoro ọzọ iji gbanwee n'etiti ụdị sprite dị iche iche maka atụmatụ agba dị iche iche.

Mmachi ọzọ bụ na ụfọdụ ndị ahịa email anaghị akwado ụfọdụ akụrụngwa CSS nke a na-ejikarị na sprites CSS, dị ka. background-position. Nke a nwere ike ime ka o sie ike idobe onyonyo nke ọ bụla n'ime faịlụ onyonyo sprite.

Douglas Karr

Douglas Karr bụ CMO Mepee ihe ọmụma na onye nchoputa nke Martech Zone. Douglas enyerela ọtụtụ mmalite MarTech aka nke ọma, nyere aka n'ịrụsi ọrụ ike nke ihe karịrị ijeri $ 5 na nnweta na ntinye ego nke Martech, ma na-aga n'ihu na-enyere ụlọ ọrụ aka n'imejuputa na imezi usoro ahịa na ahịa ha. Douglas bụ mgbanwe dijitalụ ama ama na mba ụwa na ọkachamara MarTech na ọkà okwu. Douglas bụkwa onye odee bipụtara nke ndu Dummie na akwụkwọ ndu azụmaahịa.

njikọ Articles

Gaa na bọtịnụ n'elu
nso

Achọpụtara ihe mgbochi

Martech Zone nwere ike ịnye gị ọdịnaya a n'efu n'ihi na anyị na-enweta saịtị anyị site na ego mgbasa ozi, njikọ ndị mmekọ, na nkwado. Ọ ga-amasị anyị ma ị ga-ewepụ ihe mgbochi mgbasa ozi gị ka ị na-elele saịtị anyị.