Marketing ihirangi

Me pehea te whakamahi i te CSS Sprites me te Aratau Maama me te pouri

CSS Ko te sprites he tikanga e whakamahia ana i roto i te whanaketanga paetukutuku hei whakaiti i te maha o HTTP nga tono i mahia e tetahi wharangi paetukutuku. Ka uru ki te whakakotahi i nga whakaahua iti maha ki roto i te konae ahua nui ake ka whakamahi CSS hei whakaatu i nga waahanga motuhake o taua ahua hei huānga takitahi ki te wharangi paetukutuku.

Ko te painga tuatahi o te whakamahi i nga sprites CSS ko te mea ka taea e raatau te whakapai ake i te waa uta whaarangi mo te paetukutuku. I nga wa katoa ka utaina he ahua ki runga i te wharangi paetukutuku, me tono he tono HTTP motuhake, ka taea te whakaroa i te mahi uta. Ma te whakakotahi i nga whakaahua maha ki te ahua sprite kotahi, ka taea e tatou te whakaiti i te maha o nga tono HTTP e hiahiatia ana hei uta i te wharangi. Ma tenei ka puta ake he paetukutuku tere me te aro ake, ina koa mo nga waahi maha nga whakaahua iti penei i nga tohu me nga paatene.

Ma te whakamahi i nga sprites CSS ka taea hoki e tatou te whakamahi i te keteroki tirotiro. Ina toro atu te kaiwhakamahi ki tetahi paetukutuku, ka huna e to kaitirotiro te ahua sprite i muri i te tono tuatahi. Ko te tikanga ko nga tono a muri ake mo nga huānga takitahi kei runga i te wharangi paetukutuku e whakamahi ana i te ahua sprite ka tere ake na te mea kei te kaitirotiro te ahua kei roto i tana keteroki.

Ko nga Sprites CSS Kaore i te rongonui pera i mua

Kei te whakamahia tonu nga sprite CSS ki te whakapai ake i te tere o te waahi, ahakoa kaore pea i te rongonui pera i mua. Na te nui o te bandwidth, webp whakatakotoranga, pikitia pikitia, whatunga tuku ihirangi (CDN), utanga mangere, a keteroki kaha hangarau, kaore matou e kite i te maha o nga sprites CSS pera i mua i a matou i runga ipurangi… ahakoa he rautaki pai tonu. He tino whai hua mena kei a koe he wharangi e tohutoro ana i te tini o nga whakaahua iti.

CSS Sprite Tauira

Hei whakamahi i nga sprites CSS, me tautuhi te tuunga o ia ahua takitahi i roto i te konae whakaahua sprite ma te whakamahi CSS. Ka mahia tenei ma te whakarite i te background-image a background-position āhuatanga mō ia huānga i te whārangi tukutuku e whakamahi ana i te ahua sprite. Ma te tautuhi i nga taunga x me y o te ahua i roto i te sprite, ka taea e taatau te whakaatu i nga whakaahua takitahi hei waahanga motuhake i te wharangi. Anei tetahi tauira… e rua nga paatene kei roto i te konae whakaahua kotahi:

CSS Sprite Tauira

Mena e hiahia ana matou kia whakaatuhia te ahua kei te taha maui, ka taea e matou te whakarato i te div arrow-left hei karaehe ka whakaatu noa nga taunga i tera taha:

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

A, ki te pirangi matou ki te whakaatu i te pere matau, ka whakatauhia e matou te karaehe mo to maatau div arrow-right.

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

CSS Sprites Mo te Aratau Maama me te Pouri

Ko tetahi whakamahinga pai o tenei ko nga ahuatanga marama me te pouri. Tena pea kei a koe he tohu, he ahua ranei he tuhinga pouri kei runga kaore e kitea i te papamuri pouri. I mahia e au tenei tauira o te paatene he pokapu ma mo te aratau marama me tetahi pokapu pouri mo te aratau pouri.

css sprite marama pouri

Ma te whakamahi i te CSS, ka taea e au te whakaatu i te papamuri whakaahua e tika ana i runga i te mea kei te whakamahi te kaiwhakamahi i te aratau marama, i te aratau pouri ranei:

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

Okotahi: Kaore pea nga Kaitaki imeera e tautoko i tenei

Ko etahi o nga kaihoko imeera, penei i a Gmail, kaore i te tautoko i nga taurangi CSS, e whakamahia ana i roto i te tauira i hoatu e ahau ki te huri i waenga i nga momo marama me te pouri. Ko te tikanga ka hiahia pea koe ki te whakamahi i nga tikanga rereke hei huri i waenga i nga momo momo ahua o te ahua sprite mo nga kaupapa tae rereke.

Ko tetahi atu herenga ko etahi o nga kaihoko imeera kaore i te tautoko i etahi ahuatanga CSS e whakamahia ana i roto i nga sprite CSS, penei i background-position. He uaua tenei ki te tuu i nga whakaahua takitahi ki roto i te konae whakaahua sprite.

Douglas Karr

Douglas Karr he CMO o OpenINSIGHTS me te kaiwhakarewa o te Martech Zone. Kua awhina a Douglas i te tini o nga tiimatanga angitu a MarTech, kua awhina i te whakapau kaha ki te neke atu i te $5 piriona i roto i nga hokonga me nga haumitanga a Martech, me te awhina tonu i nga kamupene ki te whakatinana me te whakaaunoa i a raatau rautaki hoko me te hokohoko. Ko Douglas he huringa matihiko e mohiotia ana i te ao, he tohunga me te kaikorero a MarTech. Ko Douglas hoki te kaituhi i whakaputaina mo te aratohu a Dummie me te pukapuka kaiarahi pakihi.

Tefito pā

Hoki ki te pihi papa
Katia

Kua kitea te Adblock

Martech Zone Ka taea e ia te whakarato ki a koe i enei mea kaore he utu na te mea ka whakawhiwhihia e matou to maatau papaanga ma te whiwhinga moni panui, hononga hononga, me nga kaitautoko. Ka maioha matou ki te tangohia e koe to aukati panui i a koe e tiro ana i to maatau papaanga.