Content Marketing

Kā izmantot CSS sprites gaišajā un tumšajā režīmā

CSS sprites ir paņēmiens, ko izmanto tīmekļa izstrādē, lai samazinātu to skaitu HTTP tīmekļa lapas iesniegtie pieprasījumi. Tie ietver vairāku mazu attēlu apvienošanu vienā lielākā attēla failā un pēc tam CSS izmantošanu, lai tīmekļa lapā parādītu konkrētas attēla sadaļas kā atsevišķus elementus.

CSS spraitu izmantošanas galvenais ieguvums ir tas, ka tie var palīdzēt uzlabot vietnes lapas ielādes laiku. Katru reizi, kad tīmekļa lapā tiek ielādēts attēls, ir nepieciešams atsevišķs HTTP pieprasījums, kas var palēnināt ielādes procesu. Apvienojot vairākus attēlus vienā sprite attēlā, mēs varam samazināt lapas ielādei nepieciešamo HTTP pieprasījumu skaitu. Tas var radīt ātrāku un atsaucīgāku vietni, īpaši vietnēm ar daudziem maziem attēliem, piemēram, ikonām un pogām.

CSS spraitu izmantošana arī ļauj mums izmantot pārlūkprogrammas kešatmiņas priekšrocības. Kad lietotājs apmeklē vietni, viņa pārlūkprogramma kešatmiņā saglabā sprite attēlu pēc pirmā pieprasījuma. Tas nozīmē, ka turpmākie pieprasījumi atsevišķiem tīmekļa lapas elementiem, kas izmanto sprite attēlu, būs daudz ātrāki, jo pārlūkprogrammas kešatmiņā attēls jau būs.

CSS sprites nav tik populāri kā kādreiz

CSS spraitus joprojām parasti izmanto, lai uzlabotu vietnes ātrumu, lai gan tie var nebūt tik populāri kā kādreiz. Lielā joslas platuma dēļ webp formāti, attēla kompresija, satura piegādes tīkli (CDN), slinka iekraušana, un spēcīga kešatmiņa tehnoloģijas, mēs neredzam tik daudz CSS spraitu, kā agrāk tīmeklī... lai gan tā joprojām ir lieliska stratēģija. Tas ir īpaši noderīgi, ja jums ir lapa, kurā ir atsauces uz daudziem maziem attēliem.

CSS Sprite piemērs

Lai izmantotu CSS spraitus, mums ir jādefinē katra atsevišķa attēla pozīcija sprite attēla failā, izmantojot CSS. To parasti veic, iestatot background-image un background-position rekvizītus katram elementam tīmekļa lapā, kurā tiek izmantots sprite attēls. Spraitā norādot attēla x un y koordinātas, mēs varam attēlot atsevišķus attēlus kā atsevišķus lapas elementus. Šeit ir piemērs... mums ir divas pogas vienā attēla failā:

CSS Sprite piemērs

Ja mēs vēlamies, lai tiktu parādīts attēls kreisajā pusē, mēs varam nodrošināt div ar arrow-left kā klase, tāpēc koordinātas parāda tikai šo pusi:

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

Un, ja mēs vēlamies parādīt labo bultiņu, mēs iestatām mūsu div klasi uz arrow-right.

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

CSS sprites gaišajam un tumšajam režīmam

Viens interesants to izmantojums ir gaišais un tumšais režīms. Iespējams, jums ir logotips vai attēls ar tumšu tekstu, kas nav redzams uz tumša fona. Es izdarīju šo piemēru pogai, kurai ir balts centrs gaišajam režīmam un tumšs centrs tumšajam režīmam.

css sprite gaiši tumšs

Izmantojot CSS, es varu parādīt atbilstošo attēla fonu atkarībā no tā, vai lietotājs izmanto gaišo vai tumšo režīmu:

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

Izņēmums: e-pasta klienti to nevar atbalstīt

Daži e-pasta klienti, piemēram, Gmail, neatbalsta CSS mainīgos, kas tiek izmantoti manis sniegtajā piemērā, lai pārslēgtos starp gaišo un tumšo režīmu. Tas nozīmē, ka jums, iespējams, būs jāizmanto alternatīvas metodes, lai pārslēgtos starp dažādām sprite attēla versijām dažādām krāsu shēmām.

Vēl viens ierobežojums ir tāds, ka daži e-pasta klienti neatbalsta noteiktus CSS rekvizītus, kas parasti tiek izmantoti CSS spraitos, piemēram, background-position. Tas var apgrūtināt atsevišķu attēlu novietošanu sprite attēla failā.

Douglas Karr

Douglas Karr ir TKO no OpenINSIGHTS un dibinātājs Martech Zone. Duglass ir palīdzējis desmitiem veiksmīgu MarTech jaunuzņēmumu, ir palīdzējis veikt vairāk nekā 5 miljardu dolāru Martech iegādes un ieguldījumu uzticamības pārbaudi, kā arī turpina palīdzēt uzņēmumiem ieviest un automatizēt to pārdošanas un mārketinga stratēģijas. Douglas ir starptautiski atzīts digitālās transformācijas un MarTech eksperts un runātājs. Duglass ir arī publicēts Dummie rokasgrāmatas un biznesa vadības grāmatas autors.

Saistītie raksti

Atpakaļ uz augšu pogu
aizvērt

Reklāmu bloķēšana konstatēta

Martech Zone var nodrošināt jums šo saturu bez maksas, jo mēs gūstam peļņu no savas vietnes, izmantojot ieņēmumus no reklāmām, saistīto uzņēmumu saites un sponsorēšanu. Būsim pateicīgi, ja, apskatot mūsu vietni, noņemtu savu reklāmu bloķētāju.