Hoe kinne jo CSS Sprites brûke mei ljochte en tsjustere modus
CSS sprites binne in technyk brûkt yn web ûntwikkeling te ferminderjen it oantal HTTP oanfragen makke troch in webside. Se befetsje it kombinearjen fan meardere lytse ôfbyldings yn in inkele gruttere ôfbyldingsbestân en dan it brûken fan CSS om spesifike seksjes fan dat byld as yndividuele eleminten op 'e webside te werjaan.
It primêre foardiel fan it brûken fan CSS-sprites is dat se kinne helpe om de side-laadtiid foar in webside te ferbetterjen. Elke kear as in ôfbylding op in webside wurdt laden, fereasket it in apart HTTP-fersyk, wat it ladenproses kin fertrage. Troch meardere ôfbyldings te kombinearjen yn ien sprite-ôfbylding, kinne wy it oantal HTTP-oanfragen ferminderje dat nedich is om de side te laden. Dit kin resultearje yn in flugger en mear responsive webside, benammen foar siden mei in protte lytse ôfbyldings lykas ikoanen en knoppen.
It brûken fan CSS-sprites lit ús ek profitearje fan browser-caching. As in brûker in webside besykje, sil har browser de sprite-ôfbylding yn 'e cache nei it earste fersyk. Dit betsjut dat folgjende oanfragen foar yndividuele eleminten op 'e webside dy't de sprite-ôfbylding brûke folle flugger sille wêze, om't de browser de ôfbylding al yn syn cache hat.
CSS Sprites binne net sa populêr as se ea wiene
CSS-sprites wurde noch altyd faak brûkt om sidesnelheid te ferbetterjen, hoewol se miskien net sa populêr binne as se ea wiene. Fanwege hege bânbreedte, reach formaten, ôfbyldingskompresje, netwurken foar levering fan ynhâld (CDN), luie laden, en sterke caching technologyen, sjogge wy net safolle CSS-sprites as eartiids op it web ... hoewol it noch altyd in geweldige strategy is. It is foaral nuttich as jo in side hawwe dy't ferwiist nei in mannichte lytse ôfbyldings.
Foarbyld fan CSS Sprite
Om CSS-sprites te brûken, moatte wy de posysje fan elke yndividuele ôfbylding definiearje binnen it sprite-ôfbyldingsbestân mei CSS. Dit wurdt typysk dien troch it ynstellen fan de background-image
en background-position
eigenskippen foar elk elemint op 'e webside dy't de sprite-ôfbylding brûkt. Troch de x- en y-koördinaten fan 'e ôfbylding yn 'e sprite op te jaan, kinne wy yndividuele ôfbyldings as aparte eleminten op 'e side werjaan. Hjir is in foarbyld ... wy hawwe twa knoppen yn ien ôfbyldingsbestân:
As wy wolle dat de ôfbylding oan de linkerkant wurdt werjûn, kinne wy foarsjen de div mei arrow-left
as de klasse, sadat de koördinaten allinich dizze kant sjen litte:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
En as wy de rjochter pylk werjaan wolle, soene wy de klasse foar ús div ynstelle arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
CSS Sprites foar ljocht en tsjuster modus
Ien nijsgjirrich gebrûk fan dit is mei ljochte en tsjustere modi. Miskien hawwe jo in logo of ôfbylding mei donkere tekst op dy't net sichtber is op in donkere eftergrûn. Ik haw dit foarbyld dien fan in knop dy't in wyt sintrum hat foar ljochtmodus en in tsjuster sintrum foar tsjustere modus.
Mei CSS kin ik de passende ôfbyldingseftergrûn werjaan op basis fan oft de brûker ljochtmodus of tsjustere modus brûkt:
: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);
}
Utsûndering: e-postkliïnten meie dit net stypje
Guon e-postkliïnten, lykas Gmail, stypje gjin CSS-fariabelen, dy't wurde brûkt yn it foarbyld dat ik levere om te wikseljen tusken ljochte en tsjustere modi. Dit betsjut dat jo miskien alternative techniken moatte brûke om te wikseljen tusken ferskate ferzjes fan 'e sprite-ôfbylding foar ferskate kleurskema's.
In oare beheining is dat guon e-postkliïnten bepaalde CSS-eigenskippen net stypje dy't gewoanlik brûkt wurde yn CSS-sprites, lykas background-position
. Dit kin it lestich meitsje om yndividuele ôfbyldings te pleatsen binnen it sprite-ôfbyldingsbestân.