Kaip naudoti CSS sprites šviesiu ir tamsiu režimu

CSS „Sprite“ yra žiniatinklio kūrimo technika, skirta sumažinti jų skaičių HTTP tinklalapio pateiktus prašymus. Jie apima kelių mažų vaizdų sujungimą į vieną didesnį vaizdo failą, o tada naudojant CSS, kad būtų rodomos konkrečios to vaizdo dalys kaip atskiri elementai tinklalapyje.

Pagrindinis CSS sprite naudojimo pranašumas yra tas, kad jie gali padėti pagerinti svetainės puslapio įkėlimo laiką. Kiekvieną kartą, kai vaizdas įkeliamas į tinklalapį, jam reikalinga atskira HTTP užklausa, kuri gali sulėtinti įkėlimo procesą. Sujungę kelis vaizdus į vieną sprite vaizdą, galime sumažinti HTTP užklausų, reikalingų puslapiui įkelti, skaičių. Dėl to svetainė gali būti greitesnė ir labiau reaguojanti, ypač svetainėse, kuriose yra daug mažų vaizdų, pvz., piktogramų ir mygtukų.

Naudodami CSS sprites taip pat galime pasinaudoti naršyklės talpyklos privalumais. Kai vartotojas apsilanko svetainėje, jo naršyklė po pirmosios užklausos išsaugo sprite vaizdą. Tai reiškia, kad paskesnės užklausos dėl atskirų tinklalapio elementų, kuriuose naudojamas „Sprite“ vaizdas, bus daug greitesni, nes naršyklė jau turės vaizdą savo talpykloje.

CSS sprites nėra tokie populiarūs, kaip kadaise

CSS sprites vis dar dažnai naudojami siekiant pagerinti svetainės greitį, nors jie gali būti ne tokie populiarūs kaip anksčiau. Dėl didelio pralaidumo, webp formatai, vaizdo glaudinimas, turinio pristatymo tinklai (CDN), tingus krovimas, ir stiprus talpyklos kaupimas technologijas, žiniatinklyje nematome tiek CSS spraitų, kiek anksčiau... nors tai vis dar puiki strategija. Tai ypač naudinga, jei turite puslapį, kuriame nurodoma daugybė mažų vaizdų.

CSS Sprite pavyzdys

Norėdami naudoti CSS sprites, turime apibrėžti kiekvieno atskiro vaizdo padėtį sprite vaizdo faile naudodami CSS. Paprastai tai atliekama nustatant background-image ir background-position ypatybes kiekvienam elementui tinklalapyje, kuriame naudojamas „Sprite“ vaizdas. Sprite nurodę vaizdo x ir y koordinates, atskirus vaizdus galime rodyti kaip atskirus puslapio elementus. Štai pavyzdys... viename vaizdo faile turime du mygtukus:

Jei norime, kad būtų rodomas vaizdas kairėje, galime pateikti div su arrow-left kaip klasė, todėl koordinatės rodo tik tą pusę:

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

Ir jei norime rodyti dešinę rodyklę, savo div klasę nustatysime į arrow-right.

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

CSS sprites, skirtas šviesiam ir tamsiam režimui

Vienas įdomus šio naudojimo būdas yra šviesus ir tamsus režimai. Galbūt turite logotipą ar vaizdą, kuriame yra tamsus tekstas, kuris nėra matomas tamsiame fone. Padariau šį pavyzdį, kai mygtukas turi baltą centrą šviesiam režimui ir tamsų centrą tamsiam režimui.

Naudodamas CSS galiu rodyti atitinkamą vaizdo foną pagal tai, ar vartotojas naudoja šviesų ar tamsų režimą:

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

Išimtis: el. pašto klientai to gali nepalaikyti

Kai kurios el. pašto programos, pvz., „Gmail“, nepalaiko CSS kintamųjų, kurie naudojami mano pateiktame pavyzdyje norint perjungti šviesų ir tamsų režimus. Tai reiškia, kad jums gali tekti naudoti alternatyvius metodus, kad perjungtumėte skirtingas „Sprite“ vaizdo versijas skirtingoms spalvų schemoms.

Kitas apribojimas yra tas, kad kai kurios el. pašto programos nepalaiko tam tikrų CSS ypatybių, kurios dažniausiai naudojamos CSS sprite, pvz. background-position. Tai gali apsunkinti atskirų vaizdų išdėstymą „Sprite“ vaizdo faile.