Koncept skřítků existuje už nějakou dobu. Jedná se o jednu z nejčastěji používaných technik v herním průmyslu k urychlení procesu zobrazování animací na obrazovce. V tomto článku se budeme konkrétně zabývat tím, jak nám tato technika může pomoci zlepšit uživatelský komfort na webových stránkách pomocí CSS Sprites v následujícím pořadí:
- Co je to Sprite?
- Co je CSS Sprite - rychlý přehled?
- Příklad toho, jak to pomáhá při vývoji webu?
- Výhody používání skriptů CSS
- Co musí vývojář dělat při práci s CSS Sprites?
- Jak vytvořit CSS Sprite Sheet?
- Jak pracovat s CSS Sprites?
- Společnosti využívající CSS Sprites
Co je to Sprite?
Sprite je jediný obrázek, který je součástí větší scény ve hře. Několik spritů se poté spojí do velkého obrázku, který se nazývá sprite sheet. Jakmile je sprite list načten do paměti, jsou v rychlém sledu vykresleni různí skřítci, aby poskytli iluzi animace. To se děje současně pro desítky až stovky různých skřítků, aby se vytvořila scéna ve hře.
Základní myšlenkou je, že je mnohem rychlejší načíst obrázek a zobrazit jeho část, kdykoli je to nutné, ve srovnání s načtením více obrázků a jejich zobrazením.
Co je CSS Sprite: Rychlý přehled?
CSS sprite je technika, kterou weboví vývojáři často používají k optimalizaci výkonu webových stránek. V této technice je několik menších obrazů obvykle stejných rozměrů kombinováno do jednoho velkého obrazu zvaného a sprite list nebo sada dlaždic . Tento sprite list se pak používá k zobrazení jednotlivých prvků, kdekoli je potřebujeme.
Obvykle jsou prvky jako loga, navigační šipky, tlačítka zahrnuty do sprite listu, protože mají téměř stejné rozměry a jsou často používány na webové stránce.
Příklad toho, jak to pomáhá při vývoji webu?
Při navrhování webových stránek se obrázky obvykle ukládají a používají jako jednotlivé soubory. Když tedy uživatel otevře webovou stránku, musí prohlížeč vytvořit požadavek HTTP pro každý z těchto souborů, stáhnout je samostatně a zobrazit. To vede k vyšším dobám načítání stránky, protože konkrétní webová stránka může mít velké množství menších obrázků, jako jsou tlačítka, ikony, loga.
CSS sprites pomáhají vývojářům spojit tyto často používané malé obrázky do jednoho velkého obrázku. Prohlížeč poté musí stáhnout pouze jeden soubor, na který je poté zvyklýzobrazte požadovanou část posunutím obrazu.
Výhody používání skriptů CSS
Existují dvě hlavní výhody použití spritů CSS oproti běžným obrázkům:
Rychlejší načítání stránky: Vylepšuje dobu načítání stránky, protože obrázky použité na webové stránce se zobrazí ihned po stažení listu.
Větší propustnost a nižší využití zdrojů: Nejen tato technika zlepšuje zážitek koncového uživatele tím, že zrychluje načítání stránky,ale také snižuje přetížení sítě, protože se vytváří menší počet požadavků HTTP.
Co musí vývojář dělat při práci s CSS Sprites?
Při práci s jednotlivými obrázky může vývojář jednoduše pracovat se značkou HTML a podle potřeby jej upravte do CSS. Při práci s CSS Sprites však musí vývojář udělat dvě konkrétní věci:
jak nainstalovat php na Windows 7
- Vytvoření Sprite Sheet
Při vývoji webové stránky, pokud se vývojář rozhodne použít sprity CSS, musí nejprve vytvořit sprite list sloučením všech požadovaných prvků, jako jsou tlačítka, loga atd., Do mřížkového vzoru. To lze provést pomocí libovolného programu pro úpravu obrázků, jako je Photoshop nebo Gimp. K dispozici je také mnoho online nástrojů, které vám pomohou vytvořit sprite list. Tyto nástroje jsou popsány dále v tomto článku.
- Přístup k určitému prvku sprite pomocí Pozice CSS na pozadí vlastnictví
Jakmile je sprite list připraven, musí vývojář použít atributy CSS pro přístup k různým částem listu.
- šířka: Šířka sprite
- výška: Výška sprite
- Pozadí: Odkaz na sprite list
- Pozice na pozadí: Ofsetové hodnoty (v pixelech) pro přístup pouze k požadované části tabulky sprite
Jak vytvořit CSS Sprite Sheet?
K uspořádání menších obrázků do mřížky můžete použít jakýkoli software pro úpravy obrázků, ale níže jsou popsány dvě jednodušší metody:
1. Online nástroj pro vytváření Sprite Sheet
ODKAZ: toptal.com/developers/css/sprite-generator/
Tento nástroj je nejen zdarma k použití, ale také vám poskytuje požadovaný kód CSS, který lze použít při odkazování na sprite list. Také si můžete pohrávat s různými vlastnostmi, jako je polstrování mezi prvky a změna jejich zarovnání.
2. Generování Sprite Sheet s Sprity
Pokud používáte Grunt, Node nebo Gulp, můžete nainstalovat balíček s názvem Sprity, který vám pomůže vytvořit sprite list v různých formátech, jako jsou PNG, JPG atd.
Nejprve budete muset nainstalovat Sprity pomocí:
npm install sprity -g
Poté pro vygenerování sprite listu použijte následující příkaz:
sprity ./output-directory/ ./input-directory/*.png
Jak pracovat s CSS Sprites?
V tomto příkladu použijeme následující sprite list:
Jak vidíte na obrázku výše, šest ikon (Instagram, Twitter a Facebook) bylo uspořádáno do mřížkového vzoru. V první řadě máme normální stav a ve druhé řadě máme jejich stav vznášení (obrázek, který se objeví, jakmile na ně umístíme kurzor myši).
Pokud jste vytvořili sprite list pomocí nástrojů, o kterých jsme diskutovali výše, pak již znáte posuny požadované v CSS, ale pokud jste použili nějaký jiný nástroj nebo vám byl jednoduše dán nějaký sprite sheet, nebojte se, budeme diskutovat o metodě, která vám pomůže získat posunutí požadovaného prvku.
Podívejme se nyní na velmi jednoduchý způsob, jak pomocí MS Paint získat požadované posuny pro každou ze šesti ikon. To nemusí být ideální řešení pro práci se skřítky, ale protože má funkci, která poskytuje souřadnice kurzoru myši, lze ji použít k získání požadovaných souřadnic X a Y.
Nejprve otevřete obrázek listu sprite (mřížka obsahující všechny menší obrázky) a umístěte kurzor myši do levého horního rohu sprite, kterého chcete chytit.
Jakmile budete mít souřadnice levého horního bodu svého sprite (obrázek Instagramu nahoře vlevo), můžete tento konkrétní sprite zobrazit kdekoli pomocí kódu CSS:
background: url ('img_sprites.png')
pozice na pozadí: 0 0
šířka: 125px
výška: 125px
Používáme šířku a výšku 125 pixelů, protože naše ikony mají danou dimenzi. K načtení dalšího obrázku (Twitter) ve stejném řádku použijeme následující kód:
background: url ('img_sprites.png')
Pozice na pozadí: -128px 0px
šířka: 125px
výška: 125px
Ve výše uvedeném fragmentu si všimněte atributu pozice na pozadí. (-128px, 0) znamená, že posunujeme náš sprite list doleva o 128 pixelů (při zohlednění výplně mezi prvky) a 0 pixelů na ose Y. Pokud bychom měli přístup k ikoně twitter hover, pak by náš atribut pozice pozadí byl:
Pozice na pozadí: -128px -128px
Tímto způsobem nyní můžeme přistupovat ke každé komponentě našeho sprite listu pomocí CSS. Pojďme si projít kompletní kód HTML a CSS, jak na to.
Krok 1: Psaní požadovaného kódu HTML
V níže uvedeném kódu jednoduše přidáváme tři odkazy. Propojíme také náš HTML s listem stylů (screen.css).
Krok 2: Psaní potřebných CSS. Nejprve vytvoříme styl naší sdílené třídy ikon. Zde vidíte, že odkazujeme na sprite list, který jsme vytvořili.
/ * Sdílená ikona Třída * /
rozpětí. ikona odkaz,
rozpětí. ikona a: navštíveno{
Zobrazit:blok
odsazení textu:-9999 pixelů
obrázek na pozadí: url (./ img_sprites.png)
opakování pozadí:neopakovat
}
Krok 3: Získání jednotlivých ikon ze sprite listu pomocí offsetů.
/ * Ikona Instagramu * /
span.instagram odkaz,
span.instagram a: navštíveno{
šířka:125 pixelů
výška:125 pixelů
pozice na pozadí:0 0
}
/ * Ikona Twitteru * /
span.twitter odkaz,
span.twitter a: navštíveno{
šířka:125 pixelů
výška:125 pixelů
pozice na pozadí:-128px 0
}
/ * Ikona Facebooku * /
span.facebook odkaz,
span.facebook a: navštíveno{
šířka:125 pixelů
výška:125 pixelů
pozice na pozadí:-257px 0
k čemu se loutka používá
}
Krok 4: Získání ikon přechodu z listu sprite pomocí offsetů.
span.instagram a: vznášet se{pozice na pozadí:0 -128px}
span.twitter a: vznášet se{pozice na pozadí:-128px -128px}
span.facebook a: vznášet se{pozice na pozadí:-255px -128px}
Společnosti využívající CSS Sprites
Mnoho velkých jmen v oboru používá CSS Sprites ke zlepšení odezvy svých webových stránek. Společnosti jako Google, Facebook, Amazon tuto metodu značně používají, protože jim pomáhá snížit počet požadavků HTTP na relaci pro konkrétního uživatele. To je obrovská výhoda, když vezmeme v úvahu, že tyto společnosti obsluhují miliony zákazníků v daném okamžiku.
Nyní, když máte přehled o tom, co jsou skřítci CSS a jak s nimi pracovat, jste o krok blíže na vaší cestě učit se CSS. Koncepty jako skřítci v dnešní době mění hru, protože pro vývojáře je nesmírně důležité extrahovat každý kousek výkonu z webové stránky.
Podívejte se na naše který přichází s živým tréninkem vedeným instruktorem a zkušenostmi z reálného projektu. Toto školení vám umožní ovládat dovednosti práce s webovými technologiemi typu back-end a front-end. Zahrnuje školení na Web Development, jQuery, Angular, NodeJS, ExpressJS a MongoDB.
Máte na nás dotaz? Uveďte to prosím v sekci komentářů v blogu „HTML Images“ a my se vám ozveme.