CSS sprite: popis, základní techniky a užitečné doporučení

Moderní webové stránky by měly být rychlé, krásné a účinné jak ve fázi vývoje, tak při práci s klientem. Obecně platí, že každá společnost, která vytváří internetové zdroje, chce mít svou vlastní tvář, přitahuje návštěvníky svým designem, stylem, spolehlivostí, rychlostí a dalšími vlastnostmi.

Užitečné vlastnosti sprites

CSS-sprite umožňují zlepšit jak kvalitativní vlastnosti webu, tak image společnosti. V podstatě není pro vývojáře velmi komplikovaný nástroj, ale skutečně urychluje proces rozvoje zdrojů a rychlost jejich práce.


Mimo jiné, zjednodušuje kód a v jistém smyslu, je přenosný na další zdroje, protože použité CSS-skřítci, stát jako blízké rodiny, protože můžete použít stejné grafické nápady, vizuální styl prvky dialogu, struktura a obsah značek. V normálním procesu vývoje webových stránek musíte udělat spoustu obrázků. Velmi často tyto obrázky zabírají velmi málo místa, ale jsou vždy samostatným souborem. U každého operačního systému, jakýkoliv open file server - operaci, která zabere hodně času, ale nijak výrazně liší v době, kdy je soubor otevřen od 13 od 13 pixelů a při otevření souboru s 16 obrazy 5252 pixelů. V prvním případě je nutné mít 16 souborů a 16 operací otevírání /čtení, ve druhém případě bude získáno 16 snímků v důsledku otevření pouze jednoho souboru. Vytváříte soubory takových souborů(horizontální nabídka, dialogové formuláře, tlačítka kalkulačky, položky kalendáře), pak lze tyto agregáty obrázků přenést z webu na mobil.


zpomalení

Když jsou fanoušci příliš živé sprite doporučujeme používat CSS, tam jsou vždy ti, kteří jsou pečlivě studovat problém a dokazuje, že je vždy praktické pracovat jako dříve . Pokud se namísto 16 obrázkových souborů objeví jeden soubor se 16 obrázky, pak místo 16 operací bude otevírání /čtení jedno. Ale trik je, že každý má prohlížeč cache, a načte něco jen v extrémním případě. Kromě toho jsou prvky stránky obvykle načteny při první návštěvě stránky a poté jsou načteny pouze změny.
Další aspekt. Obvykle jsou obrazy řezány, nelepené do jednoho souboru. Nějak se technologie vyvinula, a lépe, zvykem. Návrhář vytvoří rozložení, rozložení používá jeho kusy jemně nasekaných částí rozvržení. Oponenti sprites věří, že shromažďování více obrázků v jednom souboru je časově náročná lekce, což zvyšuje celkový čas vývoje stránky. Tam jsou vývojáři, kteří věří a optimalizovat počet HTTP požadavků, věřit, že tato činnost je spíše pragmatické než CSS-sprite. Všechny tyto body jsou samozřejmě záležitostí, ale mnohem víc je myšlenka: všechno by mělo být aplikováno v rozumných mezích.

Automatizace a CSS sprite

Pokud není žádný bod spuštěný generátorem CSS sprite a získat správnýčást designu, pak nic nemůže zabránit pouze tomu, aby tuto část obvyklým způsobem. Pokud konvenční technologie vede k nutnosti řezných stovky obrázků, je lepší hodit JavaScriptu funkce, které jsou nezbytné pro výběr sprite na plochu a zobrazí jej.
Je však třeba poznamenat, že vodník ze dvou nebo tří kusů, nebo deset, ostatní - Dobře, ale když sprayte sto kreseb, s psaní problémy javascript funkcí rozhodně není, ale to mnoho práce bude vytvořit takový velký přídavek sprite, obrázky lepidlo - jediný generátor CSS sprite činí požadovaný snímek a CSS kód pod ním, že je to jedno, kolik složky bude sprite. Problémy vzniknou při zpracování stránek, změně designu, odstranění a přidávání nových položek. Při vývoji spritele byste neměli přemýšlet o tom, jak ho používat, ale jak později jej změnit.

Tematické Výhodou použití skřítky

Na rozdíl od programovacích jazyků CSS, je poměrně statický soubor pravidel, všechny její dynamika definovaných pravidel a jejich funkční obsah (standard). S ohledem na sprite, HTML, CSS v komplexu můžete vytvářet knihovny tematických návrhů.
Například kompletní verze menu, jednoduše tím, že připojení více CSS pravidla, JS-funkcí a zahrnují několik HTML kód Divov můžete získat výsledky. Změna obsahu obrazu sprite může změnit vzhled této nabídky. Po úpravě těla funkce můžete upravit funkci. Bude to jakýsi variantObject-Oriented Programming (OOP). Nepochybně se jedná o nápad, ale nebude příliš jasné vystupovat proti jiným dialektů na real OOP jazyky. Je to jen na počátku 90. let, kdy OOP byla oživena a stal se extrémně rychle získat své místo na slunci, to byla myšlenka specifickou a konkrétní formy projevu, a nyní vývojáři přišli s tolika dialekty jak se měnilo rusky.

Hračky - zlatý důl pro skřítky

vzrušení a programování - neslučitelné pojmy, ale kvalifikovaný programátor píše Hra se výrazně liší od obschebytovoy (jednoduché šifrování) a kreativní (návrh a vývoj nových technologií a myšlenek). Design hry apelovat na vektorovou grafiku, takže kombinace SVG-sprite + CSS-pravidlům nejen poptávka, ale často se stává, že developer objektu (internetové stránky) skutečný objekt hra. Obzvláště oblíbená hra Counter Strike se vztahuje na termíny sprite, sprej je plně chápán jako synonyma: výbuch, krev, zrak
Fráze "install sprite css v34" pro vyhrazenou úplně normální a srozumitelnou. Skřítci byli nejen užitečná aplikace na svých zásluh, ale také vytvořila výklenek, který se stal docela plně funkční, přístupné a srozumitelné, aby určitý rozsah spotřebitele.

CSS sprite: vzorek

Pro přepínání stránek v určitém jazyce používá celou řadu možností, ale v případě, že volič jazyka vykonávat jako ikona, na řešení, které používá skřítky může vypadat například takto:

Zjevné nedostatky skřetů

Především je to náročný a důkladný proces práce. Jedna věc je snížit design na malé kousky, druhá - sbírat jeden obrázek z mnoha malých. Uplatnit myšlenku hadříkem a dát to na všech použitých obrázků na webu je naprosto zbytečné.
Dokonce i za použití stejného skřítky CSS, problémy se nelze vyhnout, zvláště když je třeba přizpůsobit design webu. Místo v sprayte několik desítek snímků - to není prvky pole, grafika je grafika, je to obvykle jen zobrazuje spíše než vlečné kód jako pole najít ten správný bod. Standardní a vývojáři tak tvrdil, že pokud sprite z politického pozadí, je to jen obrázek na pozadí, není součástí pozemku. Grafická součást prvků stránky by měla být manipulována s img tagy. S tím je obtížné se dohodnout na jednoduchém důvodu, že pozadí bylo málo, když bylo vnímáno jako obecné zázemí. Je to jen pozadí, bez ohledu na to - miniaturní prvek nebo celou stránku jako celek. Mezitím grafická součást sama o sobě představuje vážnou překážku pro používání skřetů.

Inteligentní využití

I když se výrazy „Internet technologie“ a „high technologií“ je považován za synonymní, ve skutečnosti je velmi časově náročné a někdy non-technologické práce. Pohyblivý symbol není zvláště vydelayutsya s jinými překážky ve své čisté programování JavaScript nebo PHP, a z hlediska rozvoje požadovaných funkčních informací nebo obsahu stránky proces konfigurace, jako pozadívytváření archivních kopií.
Síla a příslib redakčního systému používaného někdy srovnalo nuance jejich praktické aplikace ruky a vývoj zdrojů obvykle vede k potřebě 1001-tý době přepsat konkrétní patentovaného algoritmu. V kontextu toho, co bylo řečeno v rozumném využívání všech poskytující moderní nástroje jen důležitá. To by nemělo být příliš obtížné uplatňovat jedno na úkor druhého a zlaté pravidlo v staveništi zní takto: že nebude přemýšlet o tom, jak předat práci co nejdříve, a jak to provést tak, že v případě jakékoliv nepředvídané situace by mohla rychle vyřešit jakýkoliv problém.

Související publikace