Sisu Marketing

Kuidas kasutada CSS Sprite'i heleda ja tumeda režiimiga

CSS spraidid on tehnika, mida kasutatakse veebiarenduses, et vähendada nende arvu HTTP veebilehe esitatud päringud. Need hõlmavad mitme väikese pildi ühendamist üheks suuremaks pildifailiks ja seejärel CSS-i kasutamist, et kuvada selle pildi teatud osad veebilehel üksikute elementidena.

CSS-i spraitide kasutamise peamine eelis on see, et need võivad aidata parandada veebisaidi lehe laadimisaega. Iga kord, kui pilt veebilehele laaditakse, nõuab see eraldi HTTP-päringut, mis võib laadimisprotsessi aeglustada. Kombineerides mitu pilti üheks sprite-pildiks, saame vähendada lehe laadimiseks vajalike HTTP-päringute arvu. Selle tulemuseks võib olla kiirem ja reageerivam veebisait, eriti saitide puhul, millel on palju väikeseid pilte, nagu ikoonid ja nupud.

CSS-i spraitide kasutamine võimaldab meil kasutada ka brauseri vahemällu salvestamist. Kui kasutaja külastab veebisaiti, salvestab tema brauser sprite pildi pärast esimest päringut vahemällu. See tähendab, et edasised päringud veebilehe üksikute elementide kohta, mis kasutavad sprite-pilti, on palju kiiremad, kuna brauseri vahemälus on pilt juba olemas.

CSS-i spraidid pole nii populaarsed kui kunagi varem

CSS-i spraite kasutatakse endiselt saidi kiiruse parandamiseks, kuigi need ei pruugi olla nii populaarsed kui kunagi varem. Suure ribalaiuse tõttu webp formaadid, pildi tihendamine, sisu edastamise võrgud (CDN), laisk laadimineja tugev vahemälu tehnoloogiaid, ei näe me veebis nii palju CSS-i spraite kui varem… kuigi see on endiselt suurepärane strateegia. See on eriti kasulik, kui teil on leht, mis viitab paljudele väikestele piltidele.

CSS Sprite näide

CSS-i spraitide kasutamiseks peame CSS-i abil määratlema iga üksiku pildi asukoha spraitide pildifailis. Seda tehakse tavaliselt määrates background-image ja background-position atribuudid iga sprite-pilti kasutava veebilehe elemendi jaoks. Määrates spraidis pildi x ja y koordinaadid, saame üksikuid pilte lehel kuvada eraldi elementidena. Siin on näide... ühes pildifailis on kaks nuppu:

CSS Sprite näide

Kui tahame, et kuvatakse vasakpoolne pilt, võime varustada div arrow-left klassina, nii et koordinaadid näitavad ainult seda külge:

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

Ja kui soovime kuvada parempoolset noolt, määrame oma div klassi väärtuseks arrow-right.

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

CSS Sprites heledate ja tumedate režiimide jaoks

Üks huvitav kasutusvõimalus on heledate ja tumedate režiimide puhul. Võib-olla on teil logo või pilt, millel on tume tekst, mis pole tumedal taustal nähtav. Tegin selle näite nupust, millel on valge keskpunkt heleda režiimi jaoks ja tume keskpunkt tumeda režiimi jaoks.

css sprite hele tume

CSS-i abil saan kuvada sobiva pildi tausta vastavalt sellele, kas kasutaja kasutab heledat või tumedat režiimi:

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

Erand: meilikliendid ei pruugi seda toetada

Mõned meilikliendid, näiteks Gmail, ei toeta CSS-i muutujaid, mida kasutatakse minu toodud näites heleda ja tumeda režiimi vahel vahetamiseks. See tähendab, et võib-olla peate kasutama alternatiivseid tehnikaid, et lülituda erinevate värvilahenduste jaoks sprite-pildi erinevate versioonide vahel.

Teine piirang on see, et mõned e-posti kliendid ei toeta teatud CSS-i atribuute, mida tavaliselt kasutatakse CSS-i spraitides, näiteks background-position. See võib raskendada üksikute piltide paigutamist sprite pildifaili.

Douglas Karr

Douglas Karr on CMO of OpenINSIGHTS ja selle asutaja Martech Zone. Douglas on aidanud kümneid edukaid MarTechi idufirmasid, on aidanud Martechi omandamisel ja investeeringutel üle 5 miljardi dollari ulatuses läbi viia ning jätkab ettevõtete abistamist nende müügi- ja turundusstrateegiate rakendamisel ja automatiseerimisel. Douglas on rahvusvaheliselt tunnustatud digitaalse transformatsiooni ja MarTechi ekspert ja esineja. Douglas on ka Dummie juhendi ja ärijuhtimise raamatu autor.

seotud artiklid

Tagasi üles nupule
lähedal

Adblock tuvastatud

Martech Zone suudab teile seda sisu tasuta pakkuda, kuna teenime oma saidi rahaks reklaamitulu, sidusettevõtete linkide ja sponsorluse kaudu. Oleksime tänulikud, kui eemaldaksite meie saidi vaatamise ajal oma reklaamiblokeerija.