Marketing Përmbajtja

Si të përdorni CSS Sprites me modalitetin e dritës dhe të errët

CSS sprites janë një teknikë e përdorur në zhvillimin e uebit për të reduktuar numrin e HTTP kërkesat e bëra nga një faqe interneti. Ato përfshijnë kombinimin e shumë imazheve të vogla në një skedar të vetëm imazhi më të madh dhe më pas përdorimin e CSS për të shfaqur seksione specifike të atij imazhi si elementë individualë në faqen e internetit.

Përfitimi kryesor i përdorimit të CSS sprites është se ato mund të ndihmojnë në përmirësimin e kohës së ngarkimit të faqes për një faqe interneti. Sa herë që një imazh ngarkohet në një faqe interneti, kërkon një kërkesë të veçantë HTTP, e cila mund të ngadalësojë procesin e ngarkimit. Duke kombinuar shumë imazhe në një imazh të vetëm sprite, ne mund të zvogëlojmë numrin e kërkesave HTTP të nevojshme për të ngarkuar faqen. Kjo mund të rezultojë në një faqe interneti më të shpejtë dhe më të përgjegjshme, veçanërisht për faqet me shumë imazhe të vogla si ikona dhe butona.

Përdorimi i sprites CSS na lejon gjithashtu të përfitojmë nga caching në shfletues. Kur një përdorues viziton një faqe interneti, shfletuesi i tij do të ruajë imazhin sprite pas kërkesës së parë. Kjo do të thotë që kërkesat e mëvonshme për elementë individualë në faqen e internetit që përdorin imazhin sprite do të jenë shumë më të shpejta pasi shfletuesi do ta ketë tashmë imazhin në cache-in e tij.

Sprites CSS nuk janë aq të njohura sa dikur

Spritet CSS ende përdoren zakonisht për të përmirësuar shpejtësinë e faqes, megjithëse ato mund të mos jenë aq të njohura sa dikur. Për shkak të gjerësisë së bandës së lartë, webp formatet, kompresimi i imazhit, rrjetet e shpërndarjes së përmbajtjes (CDN), ngarkim dembeldhe memorie e fortë teknologjive, ne nuk shohim aq shumë sprite CSS sa kemi parë në ueb… edhe pse është ende një strategji e shkëlqyer. Është veçanërisht e dobishme nëse keni një faqe që i referohet një morie imazhesh të vogla.

Shembull CSS Sprite

Për të përdorur spritet CSS, duhet të përcaktojmë pozicionin e çdo imazhi individual brenda skedarit të imazhit sprite duke përdorur CSS. Kjo zakonisht bëhet duke vendosur background-image background-position vetitë për çdo element në faqen e internetit që përdor imazhin sprite. Duke specifikuar koordinatat x dhe y të imazhit brenda spritit, ne mund të shfaqim imazhe individuale si elementë të veçantë në faqe. Ja një shembull… ne kemi dy butona në një skedar të vetëm imazhi:

Shembull CSS Sprite

Nëse duam që imazhi në të majtë të shfaqet, ne mund të sigurojmë div me arrow-left si klasë, kështu që koordinatat shfaqin vetëm atë anë:

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

Dhe nëse dëshirojmë të shfaqim shigjetën e duhur, do të vendosim klasën për div tonë arrow-right.

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

CSS Sprites për modalitetin e dritës dhe të errët

Një përdorim interesant i kësaj është me modalitetet e lehta dhe të errëta. Ndoshta ju keni një logo ose imazh që ka tekst të errët mbi të që nuk është i dukshëm në një sfond të errët. Unë bëra këtë shembull të një butoni që ka një qendër të bardhë për modalitetin e dritës dhe një qendër të errët për modalitetin e errët.

css sprite dritë e errët

Duke përdorur CSS, unë mund të shfaq sfondin e duhur të imazhit bazuar në nëse përdoruesi po përdor modalitetin e dritës ose modalitetin e errët:

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

Përjashtim: Klientët e emailit mund të mos e mbështesin këtë

Disa klientë të postës elektronike, të tilla si Gmail, nuk mbështesin variablat CSS, të cilat përdoren në shembullin që dhashë për të kaluar midis modalitetit të dritës dhe të errët. Kjo do të thotë që mund t'ju duhet të përdorni teknika alternative për të kaluar midis versioneve të ndryshme të imazhit sprite për skema të ndryshme ngjyrash.

Një kufizim tjetër është se disa klientë të postës elektronike nuk mbështesin disa veçori CSS që përdoren zakonisht në spritet CSS, si p.sh. background-position. Kjo mund ta bëjë të vështirë pozicionimin e imazheve individuale brenda skedarit të imazhit sprite.

Douglas Karr

Douglas Karr është CMO i OpenINSIGHTS dhe themeluesi i Martech Zone. Douglas ka ndihmuar dhjetëra startup të suksesshëm të MarTech, ka ndihmuar në analizën e duhur prej mbi 5 miliardë dollarësh në blerjet dhe investimet e Martech dhe vazhdon të ndihmojë kompanitë në zbatimin dhe automatizimin e strategjive të tyre të shitjeve dhe marketingut. Douglas është një ekspert dhe folës i transformimit dixhital dhe i njohur ndërkombëtarisht në MarTech. Douglas është gjithashtu një autor i botuar i një udhëzuesi Dummie dhe një libri për udhëheqjen e biznesit.

Artikuj Të Ngjashëm

Kthehu në krye të faqes
afër

Blloku i reklamave u zbulua

Martech Zone është në gjendje t'ju ofrojë këtë përmbajtje pa kosto, sepse ne fitojmë para nga faqja jonë përmes të ardhurave nga reklamat, lidhjeve të filialeve dhe sponsorizimeve. Do të vlerësonim nëse do të hiqnit bllokuesin tuaj të reklamave ndërsa shikoni faqen tonë.