Kuinka käyttää CSS Spritejä vaalean ja tumman tilan kanssa
CSS sprite on tekniikka, jota käytetään verkkokehityksessä vähentämään niiden määrää HTTP verkkosivun tekemiä pyyntöjä. Ne sisältävät useiden pienten kuvien yhdistämisen yhdeksi suuremmaksi kuvatiedostoksi ja sitten CSS:n käyttämisen kuvan tiettyjen osien näyttämiseen yksittäisinä elementteinä verkkosivulla.
CSS-spriitien käytön ensisijainen etu on, että ne voivat auttaa parantamaan verkkosivuston sivun latausaikaa. Aina kun kuva ladataan verkkosivulle, se vaatii erillisen HTTP-pyynnön, mikä voi hidastaa latausprosessia. Yhdistämällä useita kuvia yhdeksi sprite-kuvaksi voimme vähentää sivun lataamiseen tarvittavien HTTP-pyyntöjen määrää. Tämä voi johtaa nopeampaan ja reagoivampaan verkkosivustoon, erityisesti sivustoilla, joissa on paljon pieniä kuvia, kuten kuvakkeita ja painikkeita.
CSS-spriitien avulla voimme myös hyödyntää selaimen välimuistia. Kun käyttäjä vierailee verkkosivustolla, hänen selaimensa tallentaa sprite-kuvan välimuistiin ensimmäisen pyynnön jälkeen. Tämä tarkoittaa, että myöhemmät pyynnöt yksittäisille verkkosivun elementeille, jotka käyttävät sprite-kuvaa, ovat paljon nopeampia, koska selaimella on jo kuva välimuistissaan.
CSS-spritit eivät ole yhtä suosittuja kuin ennen
CSS-spriitejä käytetään edelleen yleisesti sivuston nopeuden parantamiseen, vaikka ne eivät ehkä olekaan yhtä suosittuja kuin ennen. Suuren kaistanleveyden vuoksi WebP muodoissa, kuvan pakkaus, sisällönjakeluverkostot (CDN), laiska lastausja vahva välimuisti tekniikoita, emme näe verkossa niin paljon CSS-spriitejä kuin ennen… vaikka se on silti loistava strategia. Se on erityisen hyödyllinen, jos sinulla on sivu, joka viittaa lukuisiin pieniin kuviin.
CSS Sprite esimerkki
CSS-spriitien käyttämiseksi meidän on määritettävä jokaisen yksittäisen kuvan sijainti sprite-kuvatiedostossa CSS:n avulla. Tämä tehdään yleensä asettamalla background-image
ja background-position
ominaisuudet jokaiselle sprite-kuvaa käyttävälle verkkosivun elementille. Määrittämällä kuvan x- ja y-koordinaatit spriten sisällä, voimme näyttää yksittäiset kuvat erillisinä elementteinä sivulla. Tässä on esimerkki… meillä on kaksi painiketta yhdessä kuvatiedostossa:
Jos haluamme, että vasemmalla oleva kuva näytetään, voimme tarjota div:n arrow-left
luokkana, joten koordinaatit näyttävät vain tämän puolen:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
Ja jos haluamme näyttää oikean nuolen, asetamme div-luokan luokkaan arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
CSS Sprites vaaleaan ja tummaan tilaan
Yksi mielenkiintoinen käyttötarkoitus on vaalea ja tumma tila. Ehkä sinulla on logo tai kuva, jossa on tummaa tekstiä, joka ei näy tummalla taustalla. Tein tämän esimerkin painikkeesta, jossa on valkoinen keskus vaaleaa tilaa varten ja tumma keskusta tummaa tilaa varten.
CSS:n avulla voin näyttää oikean kuvan taustan sen mukaan, käyttääkö käyttäjä vaaleaa vai tummaa tilaa:
: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);
}
Poikkeus: Sähköpostiasiakkaat eivät välttämättä tue tätä
Jotkut sähköpostiohjelmat, kuten Gmail, eivät tue CSS-muuttujia, joita käytetään antamassani esimerkissä vaihtamaan vaalean ja tumman tilan välillä. Tämä tarkoittaa, että saatat joutua käyttämään vaihtoehtoisia tekniikoita vaihtaaksesi Sprite-kuvan eri versioiden välillä eri värimalleja varten.
Toinen rajoitus on, että jotkin sähköpostiohjelmat eivät tue tiettyjä CSS-ominaisuuksia, joita käytetään yleisesti CSS-spriiteissä, kuten esim. background-position
. Tämä voi vaikeuttaa yksittäisten kuvien sijoittamista sprite-kuvatiedostoon.