CSS sprite: popis, základné techniky a užitočné odporúčania

Moderné webové stránky by mali byť rýchle, pekné a efektívne ako vo fáze vývoja, tak pri práci s klientom. Typicky, každá spoločnosť, ktorá vytvára online zdrojov máva svoju vlastnú tvár, prilákať návštevníkov na jeho dizajn, štýl, spoľahlivosť, rýchlosť a iných kvalít.

úžitkových vlastností škriatkovia

CSS sprite môže zlepšiť ako kvalitu vlastnosti webu a imidž firmy. V podstate možno povedať, že to nie je moc sofistikované nástroje pre vývojárov, ale to vlastne urýchľuje vývoj zdroje a urýchliť ich prácu.


Okrem iného, ​​zjednodušuje kód a v istom zmysle, je prenosný na ďalšie zdroje, pretože použité CSS-škriatkovia, štát ako blízkej rodiny, pretože môžete použiť rovnaké grafické nápady, vizuálny štýl prvky dialógu, štruktúru a obsah značiek. V normálnom procese vytvárania webových stránok musíte urobiť veľa obrázkov. Veľmi často tieto obrázky zaberajú veľmi málo miesta, ale sú vždy samostatným súborom. U každého operačného systému, akýkoľvek open file server - operáciu, ktorá zaberie veľa času, ale nijako výrazne líšia v čase, keď je súbor otvorený od 13 od 13 pixelov a pri otvorení súboru s 16 obrazmi 5252 pixelov. V prvom prípade by mal byť 16 súborov a 16 operácie otvorenie /čítanie v druhom prípade bude 16 fotografií možno získať otvorením iba jeden súbor. Ak vytvoríte súbory takýchto súborovTémy (horizontálne menu, dialógové formuláre, tlačidlá, kalkulačka, kalendár konštrukčné prvky) a potom sčítať tieto obrázky môžu byť flexibilne pohybovať z miesta na miesto.


spomalenie

Keď sú fanúšikovia príliš živé sprite odporúčame používať CSS, tam sú vždy tí, ktorí sú starostlivo študovať problém a dokazuje, že je vždy praktické pracovať ako predtým , V skutočnosti, ak namiesto 16 súborov obrázkov do jedného súboru 16 obrazov, 16 operácií namiesto otvorenia /čítanie bude jedno. Ale trik je, že každý má prehliadač cache, a on načíta niečo len v extrémnom prípade. Okrem toho sa prvky stránky zvyčajne načítajú po prvej návšteve stránky a potom sa načítajú iba zmeny.
Iný aspekt. Zvyčajne sú obrazy rezané, nie lepené do jedného súboru. Niekto sa technológia rozvinula a lepšie zvykli. Návrhár vytvára rozloženie, usporiadanie používa kúsky jemne nasekaných častí rozloženia. Odporcovia škriatkovia presvedčení, že zhromažďovanie viac obrázkov do jedného súboru - časovo náročné, čo zvyšuje celkový vývoj časovej stránke. Tam sú vývojári, ktorí veria a optimalizovať počet HTTP požiadaviek, veriť, že táto činnosť je skôr pragmatické než CSS-sprite. Všetky tieto body, samozrejme, sú dôležité, ale oveľa viac je myšlienka: všetko by sa malo uplatňovať v rozumných medziach.
Automatizácia a CSS sprite
Ak nie je žiadny bod spustený generátor CSS sprite a získať správnyčasť návrhu, potom nič nebráni tomu, aby sa táto časť zvyčajného spôsobila. Ak konvenčné technológie vedie k nutnosti rezných stovky obrázkov, je lepšie hodiť JavaScriptu funkcie, ktoré sú potrebné na výber sprite na plochu a zobrazí ho.
Treba však poznamenať, že vodník z dvoch alebo troch kusov, alebo desať, ostatné - Dobre, ale keď spreja sto kresieb, s písanie problémy javascript funkcií rozhodne nie je, ale to veľa práce bude vytvoriť taký veľký prídavok sprite, obrázky lepidlo - jediný generátor CSS sprite činí požadovanú snímku a CSS kód pod ním, že je to jedno, koľko zložky bude sprite. Pri spracovaní lokality, zmene dizajnu, odstránení a pridávaní nových položiek sa vyskytnú problémy. Pri vývoji skriptov by ste nemali premýšľať o tom, ako ich používať, ale ako ich neskôr zmeniť.

Tematické Výhodou použitia škriatkov

Na rozdiel od programovacích jazykov CSS, je pomerne statický súbor pravidiel, všetky jej dynamika definovaných pravidiel a ich funkčné obsah (štandard). Vzhľadom na komplexnú sprite, HTML, CSS je možné vytvoriť tematickú knižnicu funkčný dizajn.
Napríklad kompletná verzia menu, jednoducho tým, že pripojenie viac CSS pravidlá, JS-funkcií a zahŕňajú niekoľko HTML kód divov môžete získať výsledky. Zmena obsahu obrazu sprite môže zmeniť vzhľad tejto ponuky. Po zjemnení telesa funkcie môžete upraviť funkčnosť. Bude to druh variantuObject-Oriented Programming (OOP). Nepochybne sa jedná o nápad, ale nebude príliš jasné vystupovať proti iným dialektov na real OOP jazyky. Je to len na začiatku 90. rokov, kedy OOP bola oživená a stal sa extrémne rýchlo získať svoje miesto na slnku, to bola myšlienka špecifická jednorazová formy prejavu, a teraz vývojári prišli s toľkými dialekty ako sa menilo po rusky.

Hračky - zlatá baňa pre škriatkov

vzrušenie a programovanie - nezlučiteľné pojmy, ale kvalifikovaný programátor píše Hra sa výrazne líši od obschebytovoy (jednoduchej šifrovanie) a kreatívne (návrh a vývoj nových technológií a myšlienok). Design hry apelovať na vektorovú grafiku, takže kombinácia SVG-sprite + CSS-pravidlám nielen dopyt, ale často sa stáva, že developer objektu (internetové stránky) skutočný objekt hra. Najmä populárna hra Counter Strike používa pojmy sprite, spreje zmysluplné synoným: výbuch, krv, zrak
Výraz "set vodník css V34" pre ktorý sa úplne normálne a pochopiteľné. Škriatkovia boli nielen užitočná aplikácia na svojich zásluh, ale tiež vytvorila výklenok, ktorý sa stal celkom plne funkčné, prístupné a zrozumiteľné, aby určitý rozsah spotrebiteľa.

CSS sprite: vzorka

Pre prepínanie stránok v určitom jazyku používa celý rad možností, ale v prípade, že volič jazyka vykonávať ako ikona, na riešenie, ktoré používa škriatkov môže vyzerať napríklad takto:

Zjavné nedostatky sprites

V prvom rade ide o náročný pracovný postup. Jednou vecou je znížiť dizajn na malé kúsky, druhý - zbierať jeden obrázok z mnohých malých. Použiť myšlienku plátna a dať na ne všetky obrázky, ktoré sa používajú na stránkach, absolútne beznádejné.
Dokonca aj pri použití generátora sprite CSS sa nemožno vyhnúť ťažkostiam, najmä pokiaľ ide o prestavbu lokality. Dajte do desiatok obrázkov v prípade - to nie je pole položiek, grafika je grafika, zvyčajne jednoducho výstup na obrazovku, ale neprechádzať cez kód ako pole pri hľadaní požadovanej položky. Štandardné a také vývojári tvrdia, že keď je sprite asociované s pravidlom pozadia, je to len obrázok pozadia, nie prvok stránky. Grafická zložka prvkov stránky by mala byť manipulovaná s img tagmi. S týmto je ťažké sa dohodnúť na jednoduchom dôvode, že pozadie bolo málo, ak je vnímané ako všeobecné zázemie. Je to len pozadie, bez ohľadu na to, čo - miniatúrny prvok alebo celá stránka ako celok. Zatiaľ samotná grafická súčasť je vážnou prekážkou pri používaní skriptov.

Inteligentné využitie

Napriek tomu, že termíny "internetová technológia" a "špičkové technológie" sa považujú za synonymá, v praxi to je časovo náročná a niekedy veľmi netechnologická práca. Sprite nie je mimoriadne zraniteľný voči iným úzkym miestam v čistom programovaní na javascripte alebo PHP, ako aj pri vývoji potrebnej funkčnosti, pri prispôsobovaní procesov plnenia stránok s informáciami alebo napríklad v pozadívytváranie archívnych kópií.
Sila a prísľub redakčného systému používaného niekedy zrovnalo nuansy ich praktické aplikácie ruky a vývoj zdrojov obvykle vedie k potrebe 1001-tý dobe prepísať konkrétne patentovaného algoritmu. V kontexte vyššie uvedeného je dôležité jednoducho použiť v rozumných medziach všetko, čo poskytuje moderný nástroj. To by nemalo byť príliš ťažké uplatňovať jedno na úkor druhého a zlaté pravidlo v stavenisku znie takto: že nebude premýšľať o tom, ako odovzdať prácu čo najskôr, a ako to urobiť tak, že v prípade akejkoľvek nepredvídateľné situácie by mohla rýchlo vyriešiť akýkoľvek problém.

Súvisiace publikácie