Content Marketing

Ako používať CSS Sprites so svetlým a tmavým režimom

CSS sprite je technika používaná pri vývoji webu na zníženie počtu HTTP požiadavky zo strany webovej stránky. Zahŕňajú kombinovanie viacerých malých obrázkov do jedného väčšieho súboru obrázka a následné použitie CSS na zobrazenie konkrétnych častí tohto obrázka ako jednotlivých prvkov na webovej stránke.

Hlavnou výhodou používania CSS sprite je to, že môžu pomôcť zlepšiť čas načítania stránky pre web. Zakaždým, keď sa obrázok načíta na webovú stránku, vyžaduje samostatnú požiadavku HTTP, čo môže spomaliť proces načítania. Kombináciou viacerých obrázkov do jedného sprite obrázku môžeme znížiť počet HTTP požiadaviek potrebných na načítanie stránky. Výsledkom môže byť rýchlejšia a citlivejšia webová stránka, najmä v prípade stránok s množstvom malých obrázkov, ako sú ikony a tlačidlá.

Používanie spritov CSS nám tiež umožňuje využívať ukladanie do vyrovnávacej pamäte prehliadača. Keď používateľ navštívi webovú stránku, jeho prehliadač po prvej požiadavke uloží obrázok sprite do vyrovnávacej pamäte. To znamená, že následné požiadavky na jednotlivé prvky na webovej stránke, ktoré používajú obrázok sprite, budú oveľa rýchlejšie, pretože prehliadač už bude mať obrázok vo svojej vyrovnávacej pamäti.

CSS Sprites už nie sú tak populárne ako kedysi

Sprite CSS sa stále bežne používajú na zlepšenie rýchlosti webu, aj keď už nemusia byť také populárne ako kedysi. Vzhľadom na veľkú šírku pásma, web formáty, kompresia obrazu, siete na doručovanie obsahu (CDN), lenivé zaťaženiea silné ukladanie do vyrovnávacej pamäte technológie, už na webe nevidíme toľko CSS sprite ako kedysi... aj keď je to stále skvelá stratégia. Je to obzvlášť užitočné, ak máte stránku, ktorá odkazuje na množstvo malých obrázkov.

Príklad CSS Sprite

Ak chcete použiť sprite CSS, musíme pomocou CSS definovať pozíciu každého jednotlivého obrázka v súbore obrázka sprite. To sa zvyčajne vykonáva nastavením background-image a background-position vlastnosti pre každý prvok na webovej stránke, ktorý používa obrázok sprite. Zadaním súradníc x a y obrázku v rámci sprite môžeme jednotlivé obrázky zobraziť ako samostatné prvky na stránke. Tu je príklad... v jednom súbore obrázka máme dve tlačidlá:

Príklad CSS Sprite

Ak chceme, aby sa zobrazil obrázok vľavo, môžeme poskytnúť div s arrow-left ako trieda, takže súradnice zobrazujú iba túto stranu:

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

A ak chceme zobraziť pravú šípku, nastavili by sme triedu pre náš div arrow-right.

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

CSS Sprites pre svetlý a tmavý režim

Jedným zaujímavým využitím je režim svetla a tmy. Možno máte logo alebo obrázok s tmavým textom, ktorý nie je viditeľný na tmavom pozadí. Urobil som tento príklad tlačidla, ktoré má biely stred pre svetlý režim a tmavý stred pre tmavý režim.

css sprite svetlý tmavý

Pomocou CSS môžem zobraziť príslušné pozadie obrázka podľa toho, či používateľ používa svetlý alebo tmavý režim:

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

Výnimka: E-mailoví klienti to nemusia podporovať

Niektorí e-mailoví klienti, ako napríklad Gmail, nepodporujú premenné CSS, ktoré sa používajú v príklade, ktorý som uviedol na prepínanie medzi svetlým a tmavým režimom. To znamená, že možno budete musieť použiť alternatívne techniky na prepínanie medzi rôznymi verziami obrázka sprite pre rôzne farebné schémy.

Ďalším obmedzením je, že niektorí e-mailoví klienti nepodporujú určité vlastnosti CSS, ktoré sa bežne používajú v sprite CSS, ako napr background-position. To môže sťažiť umiestnenie jednotlivých obrázkov v súbore obrázka sprite.

Douglas Karr

Douglas Karr je CMO OpenINSIGHTS a zakladateľ spoločnosti Martech Zone. Douglas pomohol desiatkam úspešných startupov MarTech, asistoval pri due diligence v hodnote viac ako 5 miliárd dolárov v akvizíciách a investíciách Martech a naďalej pomáha spoločnostiam pri implementácii a automatizácii ich predajných a marketingových stratégií. Douglas je medzinárodne uznávaný odborník na digitálnu transformáciu a MarTech a rečník. Douglas je tiež publikovaným autorom príručky Dummie a knihy obchodného vedenia.

súvisiace články

Tlačidlo späť nahor
Zavrieť

Zistený blok reklám

Martech Zone vám tento obsah môže poskytnúť bezplatne, pretože naše stránky speňažujeme prostredníctvom príjmov z reklám, pridružených odkazov a sponzorstiev. Ocenili by sme, keby ste pri prezeraní našej stránky odstránili blokovanie reklám.