Skoro každý týždeň vyriešim nejaký problém. Prečo sa s riešeniami nepodeliť? Rozhodol som sa, že raz za týždeň napíšem nejaký príspevok, s riešením nejakého problému. Každý týždeň naprogramujem/nakreslím nejakú drobnosť, ktorá by pre niekoho (možno teba) mohla byť užitočná. Ak nejaký týždeň s riešením neprídem, tak buď ma nič nenapadlo, alebo som nemal čas spísať to, no budem sa snažiť.
CSS Sprites
Na tento týždeň som si pripravil jednoduchý zlepšovák pri používaní Sprites napísaný v LESS. Podstatou CSS Sprites je, že miesto ukladania obrázkov jednotlivo, ich nasukáte do jedného veľkého súboru. Kratšie sa to vysvetliť hádam ani nedá. Pre úplne pochopenie by bolo asi najlepšie vidieť nejaký hotový sprite, takže tu je. Môžete si pomyslieť, že to je somarina, alebo dokonca, že to nie je efektívne, ale opak je pravdou. Poďme si vysvetliť výhody:
- Oveľa menej HTTP requestov – až pri parsovaní HTML prehliadačom sa začnú sťahovať jednotlivé obrázky. Vaša stránka sa so Spritami načíta rýchlejšie
- Menšia veľkosť. 20 png obrázkov má totiž dohromady väčšiu veľkosť, než jeden veľký obrázok
- Prístupnosť. Obrázky sa totižto načítajú až keď sú potrebné. Toto je dedičstvo od dôb z pomalým internetom. Pre nás to však znamená, že ak chcete v menu po prechode myšou zmeniť obrázok pozadia, musíte počkať, kým sa načíta (začne sa načítávať až potom že naň nadídete myšou). Dá sa to riešiť aj inak, ale Sprites sú nato priam ideálne
Sprites majú však aj jednu veľkú nevýhodu. Ak chcete pridať novú ikonu, musíte ju vložiť do súboru. Je len na vás, či zvolíte postup postupného pridávania, alebo na konci projektu zabalíte všetky ikony do Spritu.
Keď ste už správne navnadený na používanie škriatkov (takýto preklad mi dal translator) môžem vám ukázať ako sa používajú. Je to strašne jednoduché. Používa sa totižto atribút background-position. Povedzme, že by sme chceli zobraziť prvú ikonu:
.icon
{
background: url('sprite.png') 0 0 no-repeat;
width: 16px;
height: 16px;
}
No nie je to jednoduché? Dobre skúsme si dať ikonu č.2:
.icon
{
background: url('sprite.png') -16px 0 no-repeat;
width: 16px;
height: 16px;
}
Takýmto spôsobom sa môžeme dostať k ľubovoľnej ikone. Poďme ďalej – predstavme si LESS.
LESS
Less je parádne rozširuje možnosti CSS. Nájdete ho na stránke projektu http://lesscss.org a v súčastnosti vyžaduje len pridanie JavaScriptovej knižnice (predtým bolo potrebný inštalovať knižnice na server). Prečo je ale LESS zaujímavé?
- Dokážete vytvárať premenné. Túto schopnosť oceníte nielen vtedy, keď používate na viacerých miestach rovnaké farby/veľkosti
- Umožňuje vytvárať jednoduché funkcie. Túto schopnosť veľmi často oceníte, hlavne keď píšete moderné CSS3 zápisy. Nižšie bude ukážka.
- Vytvárate stromové zápisy s dedičnosťou. Priam kľúčový element, ktorý vám umožní vytvárať vzhľad naozaj efektívne.
Viac informácií, spôsob inštalácie a použitie nájdete na stránkach projektu (link pod nadpisom). Poďme horeuvedené spojiť dokopy a pozrime sa nato, ako môžeme vykresľovať Sprites efektívnejšie.
Showtime
Cieľom tohtotýždňového “scriptu” je uľahčiť si vyrátavanie pozície. Chceme CSSku jednoducho povedať: “Daj mi z piateho radu tretiu ikonu.” Začnime tým, že si vytvoríme premenné, kde si uložíme veľkosť našich budúcich ikon. Tieto veľkosti závisia od konkrétneho Spritu. Glaphyicons (obrázok) používajú rozmer 24x24px.
@sprite_w : 24px; @sprite_h : @sprite_w; /* výška je rovnaká ako šírka */
Teraz poďme na samotnú funkciu. Rozmer vyrátame v podstate jednoducho. Ak chceme, 1. ikonu, tak jej pozícia (background-position) je 0. Ak chceme, aby sa zobrazila druhá, potrebujeme aby sa obrázok posunul o 24px doľava a následne si z neho zobrazíme štvorec 24×24. Ak chceme 3 ikonu, tak výpočet je v podstate jednoduchý – 24 * 2 (šírka ikonu * počet ikon stojacich pre ňou) odrátame od nuly (aby sme dostali záporné číslo a teda posun vľavo). Výsledná funkcia teda bude vyzerať nasledovne:
.sprite( @image, @y, @x )
{
background: url( '@{image}' ) ( 0 - ( @x - 1) * @sprite_w ) ( 0 - ( @y - 1 ) * @sprite_h ) no-repeat;
width: @sprite_w;
height: @sprite_h;
}
Už nám stačí len porozumieť ako sa to používa, tak poďme nato:
.icon1
{
.sprite('glyphicons-halflings.png', 1, 1); /* z prvého radu prvá ikona */
}
.icon2
{
.sprite('glyphicons-halflings.png', 2, 5); /* z druhého radu piata ikona */
}
Je to parádne, že? Teším sa na vás opäť o týždeň.
Viac informácií:
LESS – http://lesscss.org/
CSS Sprites – http://css-tricks.com/css-sprites/ , http://www.w3schools.com/css/css_image_sprites.asp
(PS: Svoje feedbacky, námety a tipy môžete hádzať do komentárov)
