Content Marketing

Yadda Ake Amfani da CSS Sprites Tare da Haske da Yanayin Duhu

CSS sprites wata dabara ce da ake amfani da ita wajen haɓaka gidan yanar gizon don rage adadin HTTP buƙatun da shafin yanar gizon ya yi. Sun ƙunshi haɗa ƙananan hotuna masu yawa zuwa fayil ɗin hoto mai girma guda ɗaya sannan kuma amfani da CSS don nuna takamaiman sassan wannan hoton azaman abubuwa ɗaya akan shafin yanar gizon.

Babban fa'idar yin amfani da sprites na CSS shine cewa zasu iya taimakawa haɓaka lokacin ɗaukar shafin don gidan yanar gizon. Duk lokacin da aka loda hoto a shafin yanar gizon, yana buƙatar buƙatun HTTP daban, wanda zai iya rage aikin lodawa. Ta hanyar haɗa hotuna da yawa zuwa hoton sprite guda ɗaya, za mu iya rage adadin buƙatun HTTP da ake buƙata don loda shafin. Wannan na iya haifar da gidan yanar gizo mai sauri kuma mai saurin amsawa, musamman ga rukunin yanar gizon da ke da ƙananan hotuna da yawa kamar gumaka da maɓalli.

Amfani da CSS sprites kuma yana ba mu damar yin amfani da caching browser. Lokacin da mai amfani ya ziyarci gidan yanar gizon, burauzar su zai adana hoton sprite bayan buƙatun farko. Wannan yana nufin cewa buƙatun na gaba don abubuwan daidaikun mutane akan shafin yanar gizon da ke amfani da hoton sprite za su yi sauri da sauri tunda mai bincike ya riga ya sami hoton a ma'ajin sa.

CSS Sprites Ba Su San Shahararsu Kamar Yadda Suka Da Ba

CSS sprites har yanzu ana amfani da su don inganta saurin rukunin yanar gizon, kodayake ƙila ba za su shahara kamar yadda suke a da ba. Saboda babban bandwidth. webp Formats, matsin lambar, hanyoyin sadarwar sadar da abun ciki (CDN), ragwan lodi, Da kuma mai ƙarfi caching fasahohi, ba ma ganin yawan CSS sprites kamar yadda muka saba akan yanar gizo… kodayake har yanzu babbar dabara ce. Yana da amfani musamman idan kuna da shafi wanda ke yin nuni ga ɗimbin ƙananan hotuna.

Misalin CSS Sprite

Don amfani da CSS sprites, muna buƙatar ayyana matsayin kowane hoto a cikin fayil ɗin hoton sprite ta amfani da CSS. Ana yin wannan yawanci ta hanyar saita background-image da kuma background-position kaddarorin ga kowane kashi akan shafin yanar gizon da ke amfani da hoton sprite. Ta hanyar ƙididdige haɗin gwiwar x da y na hoton a cikin sprite, za mu iya nuna hotuna ɗaya a matsayin abubuwa daban a shafin. Ga misali… muna da maɓalli biyu a cikin fayil ɗin hoto guda ɗaya:

Misalin CSS Sprite

Idan muna son hoton da ke hagu ya nuna, za mu iya samar da div tare da arrow-left a matsayin ajin don haka haɗin gwiwar kawai suna nuna wannan gefen:

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

Kuma idan muna son nuna kibiya madaidaiciya, za mu saita ajin don div ɗinmu zuwa arrow-right.

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

CSS Sprites Don Haske da Yanayin Duhu

Ɗayan amfani mai ban sha'awa na wannan shine tare da haske da yanayin duhu. Wataƙila kana da tambari ko hoto mai duhun rubutu a kai wanda ba a iya gani a bangon duhu. Na yi wannan misalin maɓalli wanda ke da farar cibiyar yanayin haske da cibiyar duhu don yanayin duhu.

css sprite haske duhu

Amfani da CSS, Zan iya nuna madaidaicin hoton da ya dace dangane da ko mai amfani yana amfani da yanayin haske ko yanayin duhu:

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

Banda: Abokan Ciniki na Imel ƙila ba za su goyi bayan Wannan ba

Wasu abokan ciniki na imel, kamar Gmel, ba sa goyan bayan masu canjin CSS, waɗanda ake amfani da su a cikin misalin da na bayar don canzawa tsakanin yanayin haske da duhu. Wannan yana nufin cewa ƙila kuna buƙatar amfani da wasu dabaru don canzawa tsakanin nau'ikan nau'ikan hoton sprite don tsarin launi daban-daban.

Wani iyakance shi ne cewa wasu abokan cinikin imel ba sa goyan bayan wasu kaddarorin CSS waɗanda aka saba amfani da su a cikin CSS sprites, kamar su. background-position. Wannan na iya yin wahala a sanya hotuna ɗaya a cikin fayil ɗin hoton sprite.

Douglas Karr

Douglas Karr shine CMO Bude INSIGHTS kuma wanda ya kafa Martech Zone. Douglas ya taimaka da yawa na nasara MarTech farawa, ya taimaka a cikin ƙwazo na sama da $5 biliyan a Martech saye da zuba jari, kuma ya ci gaba da taimaka wa kamfanoni wajen aiwatar da sarrafa sarrafa tallace-tallace da dabarun talla. Douglas ƙwararren ƙwararren dijital ne na duniya kuma ƙwararren MarTech kuma mai magana. Douglas kuma marubuci ne da aka buga na jagorar Dummie da kuma littafin jagoranci na kasuwanci.

shafi Articles

Komawa zuwa maɓallin kewayawa
Close

An Gano Adblock

Martech Zone zai iya ba ku wannan abun cikin ba tare da farashi ba saboda muna yin monetize da rukunin yanar gizon mu ta hanyar kudaden talla, hanyoyin haɗin gwiwa, da tallafi. Za mu yi godiya idan za ku cire mai hana tallan ku yayin da kuke duba rukunin yanar gizon mu.