Sisältö Markkinointi

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:

CSS Sprite esimerkki

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 sprite vaalea tumma

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.

Douglas Karr

Douglas Karr on CMO of OpenINSIGHTS ja perustaja Martech Zone. Douglas on auttanut kymmeniä menestyneitä MarTech-startuppeja, auttanut yli 5 miljardin dollarin due diligence -tarkastuksessa Martechin hankinnoissa ja investoinneissa ja avustaa edelleen yrityksiä niiden myynti- ja markkinointistrategioiden toteuttamisessa ja automatisoinnissa. Douglas on kansainvälisesti tunnustettu digitaalisen transformaation ja MarTechin asiantuntija ja puhuja. Douglas on myös julkaissut Dummie's-oppaan ja yritysjohtajuuskirjan.

Aiheeseen liittyvät artikkelit

Takaisin alkuun -painiketta
lähellä

Adblock havaittu

Martech Zone pystyy tarjoamaan sinulle tämän sisällön veloituksetta, koska ansaitsemme sivustomme mainostulojen, kumppanilinkkien ja sponsoroinnin kautta. Olisimme kiitollisia, jos poistaisit mainosten esto-ohjelman, kun katselet sivustoamme.