skok na hlavní menu | menu sekce Aktuality

Úvod » Aktuality » Generátor CSS Sprites

Generátor CSS Sprites

CSS sprite je spojení více malých obrázků použitých v CSS background do jednoho, nebo více velkých obrázků. Cílem je snížit počet požadavků na server a stahovat pro celý web třeba jen jeden obrázek, ve kterém budou ukrytá všechna pozadí. Tento velký obrázek pak jen posouvat a zobrazovat vždy pouze jednu malou část. Něco podobného jsme dělali na webu Městské knihovny v Praze.

Automatizujte výrobu CSS spritů

Pro většinu webů stačí jeden sprite s několika málo obrázky, a pokud na jeho výrobu myslíme ihned od začátku, lze sprite vyrobit ručně přímo poskládáním ikonek v Photoshopu.

V jiných případech se může hodit automatizovaný skript, který z již existujících a funkčních CSS, ve kterých nejsou sprity, vyrobí sprity a pozmění CSS – Generátor CSS spritů. Funguje to tak, že z použitých obrázků v CSS složí sprite, zapamatuje si pozici ve spritu a tu potom použije v CSS jako background-position.

Skvěle se nám osvědčil CSS Sprite Generator SmartSprites, který je v alpha verzi a dále se vyvíjí.

CSS Sprite Generator SmartSprites

Než spustíme skript

CSS Sprite Generator potřebuje, abyste mu css soubory předhodili v předem daném formátu.

Nesmíte použít řádkový zápis, ale strukturovaný.
Nesmíte zkracovat vlastnosti background, musíte je rozepsat zvlášť.
Pokud už máte v CSS nějaké menší sprity, třeba na pár tlačítek, je dobré si u nich poznamenat předchozí hodnoty a podobně.

Tento návod na CSS sprity vám ukáže konkrétní řešení použité na www.mlp.cz, které si budete moci upravit pro svůj projekt.

Krok 1 – strukturované CSS:

V našem projektu jsme používali řádkový zápis CSS. Já ho používám všude, protože je kratší, datově úspornější a přehlednější. Předělat CSS na strukturované není problém – jen musíte zvolit správný nástroj/editor, nebo jeho nastavení. Některé editory dovedou při převodu seřadit vlastnosti podle abecedy – poněkud to rozbije myšlenku kaskády :) Nic jiného vás v tomto kroku snad překvapit nemůže.

Krok 2 – přepsání zkrácených forem zápisu na plný

Jestli máte tisíci řádkové CSS soubory a vlastnosti zapisujete zkrácenou formou, tak tady si užijete. Mně se nepodařilo najít editor/nástroj, který by zápis ve zkratkách rozepsal. Maximálně si můžete zkusit udělat makra, nebo hromadné search/replace s regulárními výrazy. Jak říkám – užijete si.

Já jsem postupoval strojově/ručně. Prakticky jde o vyhledání všech background vlastností, které budete spritovat a jejich rozepsání na background-color, background-image, background-repeat, background-position a případné další, jestli je používáte.

Background-position umístěte vždy před background-image. Skript totiž vytvoří za background-image další background-position tentokrát s pozicí ve spritu. Díky pravidlům CSS se vždy použije pozice skriptem vytvořená a vám zůstane i „záloha“ původní pozice, která se vám určitě bude hodit při ladění.

Krok 3 – značkování CSS komentáři pro skript

Tuto část už si můžete prostudovat na stránkách CSS Sprite Generátoru. Jde o to, že v hlavičce CSS souboru nadefinujete jednotlivé sprity:

/** sprite: mlp-sprite-ikony; sprite-image: url(&#039;o/mlp-sprite-ikony.png&#039;);sprite-layout: vertical */
/** sprite: mlp-sprite-cudl; sprite-image: url(&#039;o/mlp-sprite-cudl.png&#039;);sprite-layout: horizontal */
/** sprite: mlp-sprite-obsah; sprite-image: url(&#039;o/mlp-sprite-obsah.png&#039;);sprite-layout: horizontal */
/** sprite: mlp-sprite-obsah-bottom; sprite-image: url(&#039;o/mlp-sprite-obsah-bottom.png&#039;);sprite-layout: horizontal */
/** sprite: mlp-sprite-repx; sprite-image: url(&#039;o/mlp-sprite-repx.png&#039;);sprite-layout: vertical */
/** sprite: mlp-sprite-repy; sprite-image: url(&#039;o/mlp-sprite-repy.png&#039;);sprite-layout: horizontal */

Formát je: název; soubor spritu (ten si skript vytvoří); horizontální/vertikální rozložení.

K těmto spritům se odkazujete u jednotlivých background-image, které do spritů chcete zařadit. Takže potom, co si nadefinujete sprity v hlavičce, procházíte svoje CSS soubory (ano, skript jich zvládne více) a podle dokumentace skriptu přidáváte komentáře k background-image s nastavením pro skript:

Hledáme neopakující se pozadí

Jako první hledám všechny výskyty „no-repeat“ u takových pozadí, která:
- nemají background-position: center nebo procentuální a podobnou hodnotu ani na jedné ose (0%, 100%, left a right nevadí).
přidám za background-image komentář (pozor, na začátku jsou 2 hvězdičky) s obsahem:

/** sprite-ref: mysprite;sprite-margin-top: 0px; sprite-margin-bottom: 0px;*/

upravím margin-top a margin-bottom v komentáři podle předešlých hodnot background-position.
Pokud bylo pozadí pozicováno doprava, nebo na 100 %, tak ještě přidám: sprite-alignment: right.

Další kroky postupu se budou opakovat analogicky s dalšími typy background-position.

Až vyřeším všechna neopakující se pozadí, začnu s opakujícími se vertikálně a horizontálně – ty přiřadím do jiných spritů a zase testuji, zda se všude zobrazuje korektně. Postupem času v postupu najdete rutinu a budete postupovat podle intuice.

#foot-down #foot-authors a.logo-t span.logo {
        background-position: 0 0;
        background-repeat: no-repeat;
        background-image: url("o/logo-t.png")/** sprite-ref: mlp-sprite-ikony; sprite-margin-top: 0px; sprite-margin-bottom: 0px;*/;
}

Krok 4 – spuštění skriptu

Pro běh skriptu potřebujete Java prostředí a samotný skript. Dále v návodu počítám s Windows prostředím. Stáhněte si tedy ze stránek Sprite Generátoru Java Developer Kit a SmartSprites a postupujete dle návodu v dokumentaci, nebo podle mého prostředí a konfigurace s tipy, které vysvětlím:

Adresářová struktura

Pokud se vám nechce přidávat příkaz „smartsprites“ jako název vnitřního programu do PATH proměnné systému, tak napodobte tuto snadnou adresářovou strukturu, jakou používám já:

c:/sprite/
- /lib
- /web

Do podadresáře /lib rozbalte SmartSprites a do adresáře /web umístěte CSS soubory připravené v předchozích krocích + obrázky které používáte pro pozadí se stejnými relativními cestami jako ve svém projektu. Počítejte s tím, že ze začátku budete chvíli experimentovat a hledat vlastní postup, takže zálohujte nejlépe po každém kroku.

Skript se potom spouští takto:

Spusťte příkazový řádek pomocí Win + R, napište „cmd“ bez uvozovek a potvrďte Enterem.
Přemístěte se do adresáře se SmartSprites:

cd c:/sprite/lib

Následně spustíte SmartSprites. Mně se osvědčil příkaz s těmito parametry

smartsprites --root-dir-path c:/sprite/web/ --log-level WARN --output-dir-path z:/home/dev/public/noRW_layout/ --css-file-suffix -s

Vysvětlení parametrů:

--log-level WARN nastaví logování jen na opravdové problémy – při 20 CSS souborech nechcete plnou obrazovku INFO výpisů.
--output-dir-path je adresář na serveru, kde jsou CSS soubory v provozu na testovacím prostředí webu – tento parametr si nastavte podle toho, kam chcete sprity vygenerovat
--css-file-suffix -s uloží výsledný CSS soubor s suffixem na „-s“ na konci – ten mi pomáhal soubory dále hromadně přejmenovávat a rozlišovat od původních CSS souborů.

Spuštění SmartSprites dávkou

Při experimentování budete stále otevírat a zavírat příkazovou řádku a neustále dokola vypisovat příkazy a zkoušet různé parametry. Až přijdete na správnou kombinaci, kterou budete používat, doporučuji uložit si ji do dávkového .bat souboru a spouštět Generátor přes něj.

Otevřete si textový editor, vepište tento text, nahraďte parametry za svoje parametry a uložte s příponou .bat:

c:
cd c:/sprite/lib
smartsprites --root-dir-path c:/sprite/web/ --log-level WARN --output-dir-path z:/home/dev/public/noRW_layout/ --css-file-suffix -s
pause

Problém – SmartSprites si nepamatuje již použité obrázky

Na závěr ještě jeden podstatný problém – SmartSprites si nepamatuje, jestli už nějaký obrázek dříve použil a do spritu ho vkládá stále znova, pokud ho definujete později ve stejném, nebo jiném CSS souboru.

Může to být problém, pokud máte jeden hlavní CSS, a další menší soubory, ve kterých jsou stejná CSS pozadí (a několik nových).

Ladění potom spočívá v tom, že necháte zpracovat úplně všechny CSS soubory a v těch, ve kterých se pozadí vyskytla podruhé a vícekrát, jim ručně mažete/upravujete position. To si ukážeme níže.

Částečné řešení, usnadnění ladění

SmartSprites zpracovávají CSS soubory v adresáři c:/sprite/web podle abecedy a od toho se odrazíme s částečným řešením.

Je dobré přejmenovat si názvy CSS souborů tak, aby se napřed zpracovávaly ty s nejvíce background-image vlastnostmi, abyste poté měli co nejméně práce s odmazáváním a úpravami. Já jsem před názvy dával čísla 01, 02,…, 22 a později je hromadně přejmenovával na původní potřebná jména.

A až se sprity takto duplicitně vytvoří, tak je hromadným hledáním procházíte a nahrazujete třeba desetkrát vygenerovanou background-position tou první, která ve spritu je. Na upravené řádky si k tomuto napíšete pro sebe nějaký komentář, že jste vlastnost upravili a odmažete z tohoto řádku instrukce „sprite-ref:“ pro přidání background do spritu. Tím zrušíte duplicitu při dalším spuštění skriptu.

Opakování postupu

Vlastně nejvíce ladění zabere to, abyste neměli ve spritech některé obrázky vícekrát, nebo podivně posunuté apod. Tak dlouho opakujte kroky ladění, až budou vaše sprity dokonalé.

Jestli máte zdrojové CSS soubory jednodušší, tak třeba těmto problémům předejdete.

Co když chcete dodatečně něco přidat do spritu

Pokud jste se sprity hotovi a zjistíte, že chcete do spritu něco přidat, musíte si uvědomit, že se vám v obrázku spritu posunou souřadnice – takže dodatečné věci budete chtít raději přidělat na konec spritu, protože se souřadnicemi jste mohli pracovat ručně při úpravách a posouvat je už rozhodně nechcete. Co s tím?

Já jsem vlastnosti, ze kterých jsem chtěl skriptem dodatečně udělat sprite, vykopíroval ručně do zvláštního CSS souboru, kterému jsem dal na začátek názvu vysoké číslo. To zaručí, že se soubor zpracuje až jako poslední v pořadí (a obrázky se přidají až na konec spritu). Vygenerované pozice pozadí jsem si zase vložil zpět do souboru, kde jsem je chtěl mít.