Kontenut Marketing

Kif Tuża Sprites CSS Bil-Modalità Dawl U Dlam

CSS sprites huma teknika użata fl-iżvilupp tal-web biex jitnaqqas in-numru ta HTTP talbiet magħmula minn paġna web. Huma jinvolvu l-kombinazzjoni ta 'immaġini żgħar multipli f'fajl ta' immaġini ikbar wieħed u mbagħad tuża CSS biex juru sezzjonijiet speċifiċi ta 'dik l-immaġni bħala elementi individwali fuq il-paġna web.

Il-benefiċċju ewlieni tal-użu ta' sprites CSS huwa li jistgħu jgħinu biex itejbu l-ħin tat-tagħbija tal-paġna għal websajt. Kull darba li immaġni titgħabba fuq paġna web, teħtieġ talba HTTP separata, li tista' tnaqqas il-proċess tat-tagħbija. Billi ngħaqqdu immaġini multipli f'immaġni sprite waħda, nistgħu nnaqqsu n-numru ta 'talbiet HTTP meħtieġa biex tagħbija l-paġna. Dan jista 'jirriżulta f'websajt aktar mgħaġġla u aktar reattiva, speċjalment għal siti b'ħafna stampi żgħar bħal ikoni u buttuni.

L-użu ta' sprites CSS jippermettilna wkoll li nieħdu vantaġġ mill-caching tal-browser. Meta utent iżur websajt, il-browser tiegħu se jdaħħal fil-cache l-immaġni sprite wara l-ewwel talba. Dan ifisser li talbiet sussegwenti għal elementi individwali fuq il-paġna web li qed jużaw l-immaġni sprite se jkunu ħafna aktar mgħaġġla peress li l-browser diġà jkollu l-immaġni fil-cache tiegħu.

Is-CSS Sprites Mhumiex Popolari Kif Darba Kienu

Sprites CSS għadhom komunement użati biex itejbu l-veloċità tas-sit, għalkemm jistgħu ma jkunux popolari daqs kemm kienu darba. Minħabba bandwidth għoli, web formati, kompressjoni tal-immaġni, netwerks tal-kunsinna tal-kontenut (CDN), tagħbija għażżien, u caching qawwi teknoloġiji, ma narawx sprites CSS daqs kemm konna fuq il-web... għalkemm għadha strateġija kbira. Huwa speċjalment utli jekk għandek paġna li tirreferi għal numru kbir ta 'immaġini żgħar.

CSS Sprite Eżempju

Biex tuża sprites CSS, irridu niddefinixxu l-pożizzjoni ta 'kull immaġini individwali fi ħdan il-fajl tal-immaġni sprite billi tuża CSS. Dan tipikament isir billi tissettja l- background-image u, background-position proprjetajiet għal kull element fuq il-paġna web li tuża l-immaġni sprite. Billi tispeċifika l-koordinati x u y tal-immaġni fi ħdan l-isprite, nistgħu nuru immaġini individwali bħala elementi separati fuq il-paġna. Hawn eżempju... għandna żewġ buttuni f'fajl ta' immaġini wieħed:

CSS Sprite Eżempju

Jekk irridu li l-immaġni fuq ix-xellug tkun murija, nistgħu nipprovdu d-div arrow-left bħala l-klassi sabiex il-koordinati juru biss dik in-naħa:

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

U jekk nixtiequ nuru l-vleġġa t-tajba, nistabbilixxu l-klassi għad-div tagħna arrow-right.

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

Sprites CSS Għall-Modalità Dawl U Dlam

Użu wieħed interessanti ta 'dan huwa b'modi dawl u skur. Forsi għandek logo jew immaġni li għandha test skur fuqha li ma jkunx viżibbli fuq sfond skur. Għamilt dan l-eżempju ta 'buttuna li għandha ċentru abjad għall-modalità tad-dawl u ċentru skur għall-modalità skur.

css sprite skur ċar

Bl-użu tas-CSS, nista' nuri l-isfond tal-immaġini xieraq ibbażat fuq jekk l-utent hux qed juża l-modalità tad-dawl jew il-mod skur:

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

Eċċezzjoni: Il-Klijenti tal-Email Ma Jistgħux Jappoġġaw Dan

Xi klijenti tal-email, bħall-Gmail, ma jappoġġawx varjabbli CSS, li huma użati fl-eżempju li pprovdejt biex jaqilbu bejn modi ċari u skuri. Dan ifisser li jista 'jkollok bżonn tuża tekniki alternattivi biex taqleb bejn verżjonijiet differenti tal-immaġni sprite għal skemi ta' kuluri differenti.

Limitazzjoni oħra hija li xi klijenti tal-email ma jappoġġjawx ċerti proprjetajiet CSS li huma komunement użati fl-isprites CSS, bħal background-position. Dan jista 'jagħmilha diffiċli għall-pożizzjoni ta' immaġini individwali fi ħdan il-fajl tal-immaġni sprite.

Douglas Karr

Douglas Karr huwa CMO ta OpenINSIGHTS u l-fundatur tal- Martech Zone. Douglas għen għexieren ta’ startups ta’ MarTech ta’ suċċess, għen fid-diliġenza dovuta ta’ aktar minn $5 biljun f’akkwisti u investimenti ta’ Martech, u jkompli jgħin lill-kumpaniji fl-implimentazzjoni u l-awtomatizzazzjoni tal-istrateġiji tal-bejgħ u l-kummerċjalizzazzjoni tagħhom. Douglas huwa trasformazzjoni diġitali rikonoxxuta internazzjonalment u espert u kelliem tal-MarTech. Douglas huwa wkoll awtur ippubblikat ta 'gwida ta' Dummie u ktieb ta 'tmexxija tan-negozju.

Artikli relatati

Lura għall-buttuna ta 'fuq
Agħlaq

Adblock Individwat

Martech Zone huwa kapaċi jagħtik dan il-kontenut mingħajr ebda spiża għaliex aħna monetize is-sit tagħna permezz ta 'dħul minn reklam, links affiljati, u sponsorships. Napprezzaw jekk tneħħi l-imblokkatur tar-reklami tiegħek hekk kif tara s-sit tagħna.