ynhâld Marketing

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:

Foarbyld fan CSS Sprite

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.

css sprite ljocht tsjuster

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.

Douglas Karr

Douglas Karr is CMO fan OpenINSIGHTS en de oprjochter fan de Martech Zone. Douglas hat holpen tsientallen suksesfolle MarTech startups, hat holpen yn 'e due diligence fan mear as $ 5 miljard yn Martech oanwinsten en ynvestearrings, en bliuwt te helpen bedriuwen by it útfieren en automatisearjen fan harren ferkeap en marketing strategyen. Douglas is in ynternasjonaal erkend digitale transformaasje en MarTech-ekspert en sprekker. Douglas is ek in publisearre skriuwer fan in Dummie's gids en in boek foar bedriuwsliederskip.

Related Articles

Werom nei topknop
Slute

Adblock ûntdutsen

Martech Zone is yn steat om jo dizze ynhâld sûnder kosten te leverjen, om't wy ús side monetearje fia advertinsje-ynkomsten, affiliate keppelings en sponsoring. Wy soene it wurdearje as jo jo advertinsjeblokkerer fuortsmite as jo ús side besjen.