A technológia egyik inherens szépsége, hogy folyamatosan fejlődik – a különböző technikák és megoldások egyre követik egymást, ez pedig azt jelenti, hogy a régi, bejáratott módszerek elavulnak és ki kell őket húzni az eszköztárunkból, ha nem akarunk dinoszaurusznak látszani. Ez a fejlődés általában azt is jelenti, hogy az új megoldások nem csak trendibbek, hanem hatékonyabbak, gyorsabbak, gazdaságosabbak a régieknél, szóval a legtöbbször, azon kívül, hogy újabb technikákat kell megtanulni, valójában mindenki jobban jár a cserével.
Vannak viszont olyan ritka esetek is, amikor a régi kedvenc visszajön, csak éppen már valami egészen más megfontolásból válik kívánatossá.
Nemrég írtam a zöld, avagy környezetkímélő webdesign filozófiájáról és módszertanáról. Ennek a középpontjában, ugye, az áll, hogy úgy próbáljuk megszerkeszteni az oldalainkat, hogy az működés közben minél kevesebb fölösleges kört fusson a távoli szervereken, ezzel energiát spórolva és csökkentve az internet nem lebecsülendő karbonlábnyomát.
Ennek a metodikának egy fontos eleme, hogy az oldallal kapcsolatos lekérések, azaz olyan elemek számát, amihez valamit le kell tölteni a gépünkre, próbáljuk minimálisra csökkenteni – minden egyes behívott font, kép, videó, stíluslap be kell hogy izzítson egy új távoli kapcsolatot, ami plusz energiába kerül. Képekre viszont nyilván szükség van – hacsak nem valami ultraminimalista vagy brutalista weboldalban gondolkozol. A feszültség feloldására egy olyan módszert sikerült előásni, ami legutoljára jó 10-12 éve volt divatban, a CSS sprite-ok intézményét.
A CSS Sprite lényege, hogy csak egy, nagyobb képet töltünk be, amelyben egyszerre megtalálható több olyan grafikai elem is, amit használni szeretnénk az oldalunkon, és egy egyszerű CSS trükkel mindig csak azt a részét mutatjuk meg, amire szükségünk van. A régi számítógépes- és videójátékok is már ezt a trükköt használták, az ő eszköztárukból került át a webdesign cselei közé – akkoriban bizony a Yahootól az Apple-ön keresztül mindenki használta, így lehetett pl. a leglátványosabb, hoverre vagy más interakciókra színt, formát váltó gombokat készíteni.
A w3schools idevágó oldala szépen elmagyarázza a technika lényegét – valójában annyi történik, hogy a képeket a CSS-stíluslapból, háttérként hívjuk be egy megszabott méretű CSS elembe, ahol (az URL-t megjelölő zárójel utáni koordinátákkal) azt is kijelöljük, melyik pixeltől kezdve rajzolódjon ki a grafika.
#next {
left: 129px;
width: 43px;
background: url('img_navsprites_hover.gif') -91px 0;
}A technika klasszikus alkalmazása persze még nem számol a reszponzív gridekkel – szerencsére találhatunk több tutorialt is, ahol bemutatják, hogyan oldhatjuk meg ugyanezt modern eszközökkel is. Találhatsz leírást pl. a PageCrafteren és Lorenzo Marcon oldalán is.
A webdesign mai állása szerint persze a technika eredeti felhasználása már csak azért is számít elavultnak, mert az interaktív kapcsolókat ma már leginkább CSS-ből szoktuk megoldani, de mindenképpen érdemes lehet elgondolkozni rajta, hogy a layoutod kisebb-nagyobb grafikai elemeit vajon össze tudod-e vonni egy ilyen cseles megoldással, hadd pihenjenek kicsit azok a távoli adatközpontok.
Címkép: Wizard of Wor, 1982 Commodore Business Machines, Inc
