Generátor CSS Sprite (aj pre Nette)

Píšem diplomovú prácu o generovaní CSS Sprite. Vrámci praktickej časti mám v PHP naprogramovať nástroj na ideálne generovanie výstupného obrázka a CSS štýlov. Tento nástroj by malo byť možné použiť na pregenerovanie obsahu CSS súboru za behu.

Hlavnou výhodou tejto techniky je minimalizovanie počtu požiadaviek na server spôsobených množstvom obrázkov v grafike. Poznáme to asi všetci - všemožné pozadia, prechody (ak nie sú priamo v CSS), ikonky jazykových mutácií, sociálnych sietí, wysiwyg-ov a podobne. Ak niekto náhodou nevie o čom presne je reč, viac nájdete na w3schools.com.

Dostupné generátory

Služieb ktoré pomáhajú pri generovaní CSS Sprite je množstvo. Rôznia sa možnosťami nastavenia, optimalizáciou spritu aj poskytnutým výsledným CSS.

Zväčša fungujú tak, že sa nahrajú obrázky (po jednom alebo zbalený archív) a generátor z nich zloží sprite obrázok. Niektoré sú také šikovné, že dokonca vygenerujú súradnice jednotlivých obrázkov. Tie najšikovnejšie pozície dokonca vložia do CSS tried. S tým sa už dá pracovať. V HTML stačí nastaviť triedu xyz a automaticky sa tam dosadí správny fragment zo spritu. Ale nie je to také jednoduché, že by to šlo všetko samo.

Ideálny nástroj

V ideálnom prípade by som o nejakom CSS Sprite ani nemal vedieť. Skutočne, nechcem. Chcem aby bol výstup čo možno najoptimálnejší, ale nechcem každý element explicitne nastavovať, nedajbože to robiť všetko ručne. Ak si grafik zmyslí, že okrem Facebooku chce mať na webe aj ikonku Twittru, iba ju tam pridá a mňa by sa to nemalo týkať. Ako programátor nastavím aplikáciu tak, že v prípade ak si niekto zo servera vypýta súbor xyz.css, ten presviští generátorom a pošle sa až potom (pravdaže iba prvý krát, potom sa to už predsa bude kešovať). Nič viac, nič menej.

Takže to nebude fungovať tak ako ostatné generátory. Žiadne manuálne obsluhovanie a manuálne upravovanie CSS a/alebo HTML, ale automatické pregenerovanie existujúceho súboru.

To by bolo super, ale také jednoduché to asi nebude.

Opakované pozadie

CSS Sprite si neporadí napríklad so vzorkou opakovanou všetkými smermi. To je žiaľ predvolene každý obrázok, ktorý nemá definovanú vlastnosť background-repeat na no-repeat. Neviem ako ostatní, ale ja to do CSS často zabúdam písať a teda cez automatický generátor by to neprešlo. Taktiež ak je nastavená hodnota repeat-x alebo repeat-y, štandardne sa tieto obrázky musia vynechať. Je tu ešte možnosť, pre každý zo smerov vygenerovať vlastný sprite. V prípade horizontálneho opakovania by musel byť každý obrázok najprv upravený na šírku toho najširšieho. Obdobne je to pre vertikálne opakované obrázky. To by sa ešte dalo zvládnuť, aj keď je to komplikácia a bolo by potrebné otestovať aký má toto zväčšenie vplyv na veľkosť súboru. Nevýhodou je v tomto prípade potreba troch samostatných obrázkov namiesto ideálneho jedného. To zmenšuje výhody techniky.

Animácie

Čo s animovanými GIFmi? Animácia nie je v PNG podporovaná, takže by sme sa prípadných animovaných GIFiek v sprite mali rovno vzdať. Keďže sú používané animované GIFká zväčša skutočne otrasné, asi by to nebolo na škodu:) Našťastie má animácia pomocou PNG obrázka v CSS3 riešnie.

Optimálne usporiadanie

Keď už vieme ktoré obrázky do spritu nasekať, ešte by bolo fajn nájsť optimálny algoritmus skladania obrázkov. Najjednoduchšie je dať ich proste pod/vedľa seba, ale nie je to zrovna vhodné využitie plochy obrázka. Nejaké algoritmy som sa snažil nájsť, dokonca som jeden, pravdepodobne funkčný, aj pred cca pol rokom vymyslel, ale jeho popis som načarbal iba na jeden (teraz) stratený papier. Takže ho budem musieť vymyslieť znovu:)

Media queries

Nejak by bolo vhodné vyriešiť aj media queries. Bolo by nevhodné posielať do mobilov obrázky zobrazované iba na desktope a opačne. To ešte nemám celkom premyslené.

Optimalizácia

Výstupný obrázok by mohol byť na koniec optimalizovaný napr. cez API TinyPNG.

Ak tam Sprite už je?

Ak sa v CSS súbore sprite už nachádza, vyreže sa zobrazovaný fragment z pôvodného obrázku a poskytne sa do nového spritu na pregenerovanie.

Data URL

Obrázky vložené do CSS priamo cez Data URL sa môžu zhmotniť do súborov a vygenerovať do spritu.

Integrácia do Nette

Ako zarytý Nettista pravdaže rovno premýšľam nad čo najjednoduchším zakomponovaním nástroja do Nette. Ako najpoužiteľnejšie riešenie vidím vytvorenie filtra pre WebLoader od Jána Mareka.

Pre ladenie by sa mi páčil aj Debug bar (či vlastne už Tracy bar??). V ňom by sa zobrazoval zoznam spracovaných CSS súborov so zoznamom obrázkov ktoré sa v nich nachádzajú. Pri každom obrázku by mala byť poznámka, či bol použitý. Ak nie, tak dôvod aby to prípadne vedel vývojár jednoducho vyriešiť. Plus na konci nejaký sumár - čas generovania, koľko kB bolo ušetrených alebo použitých navyše a koľko spojení na server bolo ušetrených, atď.

Záver

Budem vďačný za každý nápad a kritiku. Napadá niekomu optimálny algoritmus skladania obrázkov alebo čo spraviť s media queries? Ak používate WebLoader, skúsili by ste aj tento filter? Zabudol som na niečo?

Snáď sa v komentároch nedozviem, že nástroj o ktorý sa pokúšam už dávno existuje:)