Maketi aano

Fa'afefea ona fa'aoga CSS Sprites ma le Malamalama ma le Pogisa

CSS sprites o se metotia faʻaaogaina i le atinaʻeina o upega tafaʻilagi e faʻaitiitia ai le numera o HTTP talosaga e faia e se itulau web. Latou te aofia ai le tuʻufaʻatasia o le tele o ata laiti i totonu o se faila ata tele e tasi ona faʻaaoga lea o le CSS e faʻaalia ai vaega patino o lena ata o ni elemene taʻitasi i luga o le itulau web.

O le aoga muamua o le faʻaaogaina o CSS sprites e mafai ona latou fesoasoani e faʻaleleia le taimi o le utaina o itulau mo se upega tafaʻilagi. Soo se taimi lava e utaina ai se ata i luga o se itulau uepi, e manaʻomia ai se isi talosaga HTTP, lea e mafai ona faʻagesegese ai le faʻaogaina o le faagasologa. E ala i le tuʻufaʻatasia o ata e tele i se ata sprite se tasi, e mafai ona faʻaitiitia le numera o talosaga HTTP e manaʻomia e utaina ai le itulau. O lenei mea e mafai ona maua ai se upega tafaʻilagi vave ma sili atu ona tali, aemaise lava mo nofoaga e tele ata laiti e pei o ata ma faʻamau.

O le fa'aogaina o le CSS sprites e mafai ai fo'i ona tatou fa'aogaina le fa'aogaina o su'esu'ega. A asiasi se tagata faʻaoga i se upega tafaʻilagi, o le a faʻapipiʻi e la latou suʻega le ata sprite pe a uma le talosaga muamua. O lona uiga o talosaga mulimuli mo elemene taʻitasi i luga o le itulau web o loʻo faʻaogaina le ata sprite o le a sili atu le vave talu ai o le suʻega o loʻo i ai le ata i lona faʻaoga.

CSS Sprites e le o ta'uta'ua e pei ona sa i ai

CSS sprites o lo'o masani ona fa'aoga e fa'aleleia ai le saoasaoa o le saite, e ui atonu e le'o ta'uta'ua e pei ona sa iai muamua. Ona o le maualuga o le bandwidth, 'upega tafaʻilagi faatulagaga, taofiofia o ata, feso'ota'iga tu'uina atu mea (CDN), valea utaina, ma malosi caching tekinolosi, matou te le va'aia le tele o CSS sprites e pei ona matou masani ai i luga o le upega tafa'ilagi… e ui lava o se fuafuaga sili. E sili ona aoga pe afai e iai sau itulau o loʻo faʻasino i le tele o ata laiti.

CSS Sprite Faataitaiga

Mo le faʻaogaina o CSS sprites, e manaʻomia ona faʻamalamalamaina le tulaga o ata taʻitasi i totonu o le faila ata sprite e faʻaaoga ai le CSS. E masani ona faia lenei mea i le setiina o le background-image ma background-position meatotino mo elemene taʻitasi i luga o le upega tafaʻilagi o loʻo faʻaogaina le ata sprite. I le faʻamalamalamaina o le x ma le y faʻamaopoopo o le ata i totonu o le sprite, e mafai ona tatou faʻaalia ata taʻitasi o ni elemene eseese ile itulau. O se fa'ata'ita'iga... e lua a matou fa'amau i se faila ata e tasi:

CSS Sprite Faataitaiga

Afai matou te mananaʻo e faʻaalia le ata i le agavale, e mafai ona matou tuʻuina atu le div arrow-left e pei o le vasega ona faʻaalia e faʻamaopoopo le itu lena:

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

Ma afai tatou te mananao e faaali atu le aū sa'o, tatou te setiina le vasega mo la tatou div i arrow-right.

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

CSS Sprites Mo le Malamalama ma le Pogisa

O se tasi o fa'aoga mata'ina o lenei mea o lo'o fa'atasi ai ma le malamalama ma le pogisa. Masalo e iai sau logo po'o se ata o lo'o i ai ni tusitusiga pogisa i luga e le o va'aia i se ata pogisa. Na ou faia lenei faʻataʻitaʻiga o se faʻamau e iai se nofoaga paʻepaʻe mo le malamalama ma se nofoaga pogisa mo le pogisa.

css sprite malamalama pogisa

I le faʻaaogaina o le CSS, e mafai ona ou faʻaalia le ata talafeagai e faʻatatau i le faʻaogaina e le tagata faʻaoga le malamalama poʻo le pogisa:

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

Tuusaunoaga: E le mafai e tagata fa'atau imeli ona Lagolagoina Lenei

O nisi o fa'atau imeli, e pei o Gmail, e le lagolagoina CSS fesuiaiga, lea e fa'aogaina i le fa'ata'ita'iga na ou tu'uina atu e fesuia'i i le va o le malamalama ma le pogisa. O lona uiga atonu e te manaʻomia le faʻaogaina o isi auala e fesuiaʻi ai i le va o faʻaaliga eseese o le ata sprite mo ata lanu eseese.

O le isi tapula'a o le le lagolagoina e nisi o tagata fa'atau imeli nisi mea totino CSS e masani ona fa'aogaina i CSS sprites, pei o background-position. O lenei mea e mafai ona faigata ai ona fa'atulaga ata ta'itasi i totonu o le faila ata sprite.

Douglas Karr

Douglas Karr o CMO o OpenINSIGHTS ma le na faavaeina le Martech Zone. Ua fesoasoani Douglas i le tele o amataga manuia o MarTech, ua fesoasoani i le filiga tatau o le sili atu i le $ 5 piliona i le mauaina o le Martech ma tupe teufaafaigaluega, ma o loʻo faʻaauau pea ona fesoasoani i kamupani i le faʻatinoina ma le otometi a latou faʻatauga ma maketi. Douglas ose suiga fa'atekinolosi fa'avaomalo fa'avaomalo ma MarTech fa'apitoa ma failauga. O Douglas foi o se tusitala lolomi o le Dummie's guide ma se tusi taʻitaʻi pisinisi.

Faatatau Mataupu Faavae o

Toe i le pito i luga
lata

Ua maua le Adblock

Martech Zone e mafai ona tu'uina atu ia te oe lenei 'anotusi e aunoa ma se tau aua matou te fa'atupeina la matou 'upega tafa'ilagi e ala i tupe maua fa'asalalauga, so'oga fa'atasi, ma lagolago. Matou te fa'afetai pe a e aveese lau fa'asalalauga fa'asalalau a'o e va'ai i la matou saite.