Kontenta Merkatumado

Kiel Uzi CSS-Spritojn Kun Luma Kaj Malhela Reĝimo

CSS sprites estas tekniko uzata en TTT-evoluo por redukti la nombron da HTTP petoj faritaj de retpaĝo. Ili implikas kombini plurajn malgrandajn bildojn en ununuran pli grandan bilddosieron kaj poste uzi CSS por montri specifajn sekciojn de tiu bildo kiel individuajn elementojn sur la retpaĝo.

La ĉefa avantaĝo uzi CSS-spritojn estas, ke ili povas helpi plibonigi la paĝan ŝarĝan tempon por retejo. Ĉiufoje kiam bildo estas ŝarĝita sur retpaĝo, ĝi postulas apartan HTTP-peton, kiu povas malrapidigi la ŝarĝan procezon. Kombinante plurajn bildojn en ununuran sprite-bildon, ni povas redukti la nombron da HTTP-petoj necesaj por ŝargi la paĝon. Ĉi tio povas rezulti en pli rapida kaj pli respondema retejo, precipe por retejoj kun multaj malgrandaj bildoj kiel ikonoj kaj butonoj.

Uzado de CSS-spritoj ankaŭ permesas al ni utiligi retumilon kaŝmemoron. Kiam uzanto vizitas retejon, ilia retumilo konservos la sprite-bildon post la unua peto. Ĉi tio signifas, ke postaj petoj por individuaj elementoj sur la retpaĝo, kiuj uzas la sprite-bildon, estos multe pli rapidaj, ĉar la retumilo jam havos la bildon en sia kaŝmemoro.

CSS-Spritoj Ne Estas Tiel Popularaj Kiel Ili Iam Estis

CSS-spritoj daŭre estas ofte uzataj por plibonigi retejo-rapidecon, kvankam ili eble ne estas tiel popularaj kiel antaŭe. Pro alta bendolarĝo, retejo formatoj, bildkunpremo, enhavliveraj retoj (CDN), maldiligenta ŝarĝoKaj forta kaŝmemoro teknologioj, ni ne vidas tiom da CSS-spritoj kiel ni kutimis en la reto... kvankam ĝi ankoraŭ estas bonega strategio. Ĝi estas precipe utila se vi havas paĝon, kiu referencas multajn malgrandajn bildojn.

CSS Sprite Ekzemplo

Por uzi CSS-spritojn, ni devas difini la pozicion de ĉiu individua bildo ene de la sprite-bilddosiero uzante CSS. Ĉi tio estas kutime farita per agordo de la background-image kaj background-position propraĵoj por ĉiu elemento sur la retpaĝo kiu uzas la sprite-bildon. Specifante la x kaj y-koordinatojn de la bildo ene de la sprite, ni povas montri individuajn bildojn kiel apartajn elementojn sur la paĝo. Jen ekzemplo... ni havas du butonojn en ununura bilddosiero:

CSS Sprite Ekzemplo

Se ni volas ke la bildo maldekstre estu montrata, ni povas provizi la div arrow-left kiel la klaso tiel la koordinatoj nur montras tiun flankon:

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

Kaj se ni deziras montri la ĝustan sagon, ni agordus la klason por nia div arrow-right.

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

CSS Sprites Por Luma Kaj Malhela Reĝimo

Unu interesa uzo de ĉi tio estas kun lumo kaj malhela reĝimoj. Eble vi havas emblemon aŭ bildon, kiu havas malhelan tekston sur ĝi, kiu ne videblas sur malhela fono. Mi faris ĉi tiun ekzemplon de butono, kiu havas blankan centron por lumreĝimo kaj malhelan centron por malhela reĝimo.

css sprite lumo malhela

Uzante CSS, mi povas montri la taŭgan bildan fonon laŭ ĉu la uzanto uzas malluman reĝimon aŭ malhelan reĝimon:

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

Escepto: Retpoŝtaj Klientoj Eble Ne Subtenas Ĉi tion

Iuj retpoŝtaj klientoj, kiel Gmail, ne subtenas CSS-variablojn, kiuj estas uzataj en la ekzemplo, kiun mi donis por ŝanĝi inter lumo kaj malhela reĝimoj. Ĉi tio signifas, ke vi eble bezonos uzi alternativajn teknikojn por ŝanĝi inter malsamaj versioj de la sprita bildo por malsamaj kolorskemoj.

Alia limigo estas, ke iuj retpoŝtaj klientoj ne subtenas certajn CSS-ecojn, kiuj estas ofte uzataj en CSS-spritoj, kiel ekzemple background-position. Ĉi tio povas malfaciligi individuajn bildojn ene de la sprite-bilddosiero.

Douglas Karr

Douglas Karr estas CMO de OpenINSIGHTS kaj la fondinto de la Martech Zone. Douglas helpis dekduojn da sukcesaj MarTech-noventreprenoj, helpis en la konvena diligento de pli ol $ 5 miliardoj en Martech-akiroj kaj investoj, kaj daŭre helpas firmaojn en efektivigado kaj aŭtomatigo de siaj vendaj kaj merkatigstrategioj. Douglas estas internacie agnoskita cifereca transformo kaj MarTech-eksperto kaj parolanto. Douglas ankaŭ estas publikigita verkinto de la gvidisto de Dummie kaj komerca gvidadlibro.

rilataj Artikoloj

Reen al la supra butono
Fermi

Adbloko Detektita

Martech Zone kapablas provizi al vi ĉi tiun enhavon senkoste ĉar ni monetigas nian retejon per reklamaj enspezoj, filiaj ligiloj kaj sponsorado. Ni dankus se vi forigus vian reklamblokilon dum vi rigardas nian retejon.