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:
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.
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.