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ā:
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.
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ā.