Content Marketing

Jak používat skřítky CSS se světlým a tmavým režimem

CSS skřítci jsou technika používaná při vývoji webu ke snížení počtu HTTP požadavky ze strany webové stránky. Zahrnují zkombinování více malých obrázků do jednoho většího obrázkového souboru a následné použití CSS k zobrazení konkrétních částí tohoto obrázku jako jednotlivých prvků na webové stránce.

Primární výhodou použití skřítků CSS je, že mohou pomoci zlepšit dobu načítání stránky webu. Pokaždé, když se obrázek načte na webovou stránku, vyžaduje samostatný požadavek HTTP, což může zpomalit proces načítání. Kombinací více obrázků do jednoho obrázku sprite můžeme snížit počet HTTP požadavků potřebných k načtení stránky. Výsledkem může být rychlejší a citlivější web, zejména u webů s mnoha malými obrázky, jako jsou ikony a tlačítka.

Použití skřítků CSS nám také umožňuje využít mezipaměť prohlížeče. Když uživatel navštíví webovou stránku, jeho prohlížeč uloží obrázek sprite do mezipaměti po prvním požadavku. To znamená, že následné požadavky na jednotlivé prvky na webové stránce, které používají obrázek sprite, budou mnohem rychlejší, protože prohlížeč již bude mít obrázek ve své mezipaměti.

CSS Sprites nejsou tak populární jako kdysi

Sprite CSS se stále běžně používají ke zlepšení rychlosti webu, i když nemusí být tak populární jako kdysi. Kvůli velké šířce pásma, webp formáty, komprese obrazu, sítě pro doručování obsahu (CDN), líné načítání, a silné ukládání do mezipaměti technologií, nevidíme na webu tolik CSS spritů jako dříve... i když je to stále skvělá strategie. Je to zvláště užitečné, pokud máte stránku, která odkazuje na velké množství malých obrázků.

Příklad CSS Sprite

Chcete-li použít sprite CSS, musíme pomocí CSS definovat pozici každého jednotlivého obrázku v souboru obrázku sprite. To se obvykle provádí nastavením background-image a background-position vlastnosti pro každý prvek na webové stránce, který používá obrázek sprite. Zadáním souřadnic x a y obrázku v rámci spritu můžeme jednotlivé obrázky zobrazit jako samostatné prvky na stránce. Zde je příklad... v jednom souboru obrázku máme dvě tlačítka:

Příklad CSS Sprite

Pokud chceme, aby se zobrazil obrázek vlevo, můžeme poskytnout div s arrow-left jako třída, takže souřadnice zobrazují pouze tuto stranu:

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

A pokud chceme zobrazit pravou šipku, nastavili bychom třídu pro náš div arrow-right.

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

CSS Sprites pro světlý a tmavý režim

Zajímavé použití je se světlými a tmavými režimy. Možná máte logo nebo obrázek s tmavým textem, který není vidět na tmavém pozadí. Udělal jsem tento příklad tlačítka, které má bílý střed pro světlý režim a tmavý střed pro tmavý režim.

css sprite světlý tmavý

Pomocí CSS mohu zobrazit vhodné pozadí obrázku podle toho, zda uživatel používá světlý nebo 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ýjimka: E-mailoví klienti toto nemusí podporovat

Někteří e-mailoví klienti, jako je Gmail, nepodporují proměnné CSS, které se v příkladu, který jsem uvedl, používají k přepínání mezi světlým a tmavým režimem. To znamená, že možná budete muset použít alternativní techniky k přepínání mezi různými verzemi obrázku sprite pro různá barevná schémata.

Dalším omezením je, že někteří e-mailoví klienti nepodporují určité vlastnosti CSS, které se běžně používají v CSS spritech, jako např background-position. To může ztížit umístění jednotlivých obrázků v souboru obrázku sprite.

Douglas Karr

Douglas Karr je CMO OpenINSIGHTS a zakladatelem Martech Zone. Douglas pomohl desítkám úspěšných MarTech startupů, pomohl s due diligence v hodnotě více než 5 miliard dolarů v akvizicích a investicích Martech a nadále pomáhá společnostem při implementaci a automatizaci jejich prodejních a marketingových strategií. Douglas je mezinárodně uznávaný odborník na digitální transformaci a MarTech a řečník. Douglas je také publikovaným autorem průvodce pro figuríny a knihy o obchodním vedení.

Související články

Tlačítko Nahoru
zavřít

Byl detekován Adblock

Martech Zone je schopna vám poskytnout tento obsah zdarma, protože naše stránky zpeněžujeme prostřednictvím příjmů z reklam, přidružených odkazů a sponzorství. Ocenili bychom, kdybyste při prohlížení našich stránek odstranili svůj blokovač reklam.