CSS sprites: 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 návrhu, tak při práci s klientem. Obecně platí, že každá společnost, která vytváří internetové zdroje, usiluje o to, aby měla svoji vlastní osobu, přitahuje návštěvníky svým designem, stylem, spolehlivostí, rychlostí a dalšími vlastnostmi.

Užitečné vlastnosti skřítků

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

Mimo jiné to zjednodušuje kód a v jistém smyslu je přenosný k jiným zdrojům, že vzhledem k tomu, že použité CSS-skřítci jsou podobné jako blízké příbuzné, protože můžete použít dialog stejné grafické nápady, styl designové prvky, struktura a obsah značek.

V obvyklém procesu tvorby webových stránek musíte udělat spoustu obrázků. Velmi často tyto snímky zaberou velmi málo místa, ale jsou vždy samostatným souborem. U libovolného operačního systému libovolného serveru je otevírání souboru operace, která trvá hodně času, ale nebude se podstatně lišit v době, kdy je soubor otevřen o 13 až 13 pixelů, a když je otevřen soubor 16 obrazů 52 a 52 pixelů. V prvním případě musíte mít 16 souborů a 16 operací otevření / čtení, ve druhém případě 16 snímků získáte otevřením pouze jednoho souboru.

Vytváříte soubory takových souborů podle tématu (horizontální menu, formy dialogu, tlačítka kalkulátoru, prvky návrhu kalendáře ...), pak lze tyto sady obrázků přenést z webu na web.

Na zadní straně mince

Pokud jsou fanoušci, kteří jsou příliš rychlí, než doporučit použití CSS sprites, ujistěte se, že najdete ty, kteří pečlivě studují otázku a inteligentně ukazují, že je vždy praktičtější pracovat staromódním způsobem.

Pokud místo 16 obrazových souborů existuje jeden soubor se 16 obrázky, místo toho 16 operací otevření / čtení bude jeden. Ale trik je, že každý prohlížeč má mezipaměť a načte něco jen jako poslední možnost. Kromě toho jsou obvykle načteny prvky stránky při prvním návštěvě stránky a poté jsou staženy pouze ty změny.

Další aspekt. Obvykle jsou obrázky nakrájeny spíše než lepeny do jednoho souboru. Nějak se technologie vyvinula, je lepší říct, zvyk. Návrhář vytvoří rozložení a rozložení používá jeho kusy: jemně nasekané části rozvržení. Odpůrci sprites věří, že sbírka několika obrázků v jednom souboru je časově náročný úkol, čímž se zvýší celkový čas vývoje stránky.

Existují také vývojáři, kteří zvažují a optimalizují počet požadavků HTTP, a domnívají se, že tato aktivita je pragmatičtější než CSS sprites.

Všechny uvedené okamžiky mají nepochybně význam, ale mnohem důležitější je názor: všechno by mělo být aplikováno v rozumných mezích.

Automatizace a CSS sprites

Pokud nemá smysl spustit generátor spiritu CSS a získat správnou část návrhu, není nic, co byste přestali dělat jen tak. Pokud obvyklá technologie vede k potlačení stovek obrazů, je lepší nakreslit funkci jаvascript, která nutně vybírá požadovanou oblast ze sprite a zobrazí ji.

Je třeba poznamenat, že sprite ze dvou nebo tří částí, nebo jiný tucet - Dobře, ale když v sprite stovky kreseb, některé s psaním problémy jаvascript funkcemi samozřejmě nedojde, ale kolik práce to bude trvat k vytvoření takový velký sprite ... Kromě toho, obrázky lepidlo - tahle CSS sprite generátor a umožňuje požadovaný snímek a CSS kód pro něj, bylo mu jedno, kolik to bude prvky tvořící sprite. Problémy nastávají, když přepracujete web, změníte návrh, odstraníte a přidáte nové položky. Při vývoji spritele byste neměli myslet na to, jak ho používat, ale jak později jej změnit.

Tematické přínosy používání skřetů

Na rozdíl od programovacích jazyků CSS je to relativně statická sada pravidel, její dynamika je určována pravidly a jejich funkčním obsahem (standardně). Vzhledem k tomu, HTML, CSS můžete vytvořit tematické knihovny design-funkční.

Například hotová verze menu: jednoduše připojit více CSS pravidla, js-funkce a obsahují číselný kód HTML divs, můžete získat výsledek. Změnou obsahu obrazového skřítka můžete změnit vzhled této nabídky. Zadáním funkčního tělesa můžete upravit funkci.

Získat originální verzi objektově orientované programování (OOP). Nepochybně to bude jasný nápad, ale nebude to příliš jasně odlišeno od jiných dialektů OOP v reálných jazycích. Je to jen na počátku 90. let, kdy OOP byla oživena a stal se neobyčejně rychle získat své místo na slunci, to je zvláštní nápad a konkrétní formu jejich vyjádření, ale nyní vývojáři přišli s tolika dialekty protože má rozmanité rusky.

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

Vzrušení a programování jsou nekompatibilní pojmy, ale kvalifikace programů psaní programátorů se výrazně liší od společného (jednoduchého kódování) a kreativity (návrh a vývoj nových technologií, nápadů).

Návrh hry se odvolává na vektorovou grafiku, protože kombinace pravidel SVG sprite + CSS je nejen požadována, ale také se často stává z objektu vývojáře (objektu) do objektu skutečné hry. Zejména populární hra Counter Strike se vztahuje na termíny sprites, spreje jsou poměrně smysluplné synonyma: výbuch, krev, pohled ...

Fráze "instalace cvrlikání css v34" pro iniciátor je zcela normální a srozumitelná. Sprites získali nejen užitečnost při aplikaci ve své podstatě, ale také vytvořili místo, které se stalo plně funkčním, přístupným a srozumitelné pro určitý okruh spotřebitelů.

CSS sprites: příklad

různé možnosti pro konkrétní jazyk přepínat stránky na webu jsou použity, ale v případě, že volič jazyka vykonávat jako ikona, řešení pomocí sprite může vypadat například takto:

Zjevné nevýhody sprites

Především je to časově náročný a důkladný proces. Je to jedna věc, jak snížit design na malé kousky, druhou je shromažďovat jeden obrázek z mnoha malých. Aplikujte myšlenku plátna a vložte na něj všechny obrázky, které se na tomto místě používají, zcela zbytečné.

Dokonce ani pomocí generátoru CSS Sprite nelze potíže vyhnout, obzvláště když budete muset přepracovat návrh webu. Umístěte do skříně několik desítek obrázků - to není pole prvků, grafika je grafika, obvykle se jednoduše zobrazí na obrazovce, spíše než tříděná v kódu jako pole při hledání požadovaného prvku.

Standard a vývojáři, kteří sledují to, tvrdí, že jelikož sprites jsou spojeny s pravidly pozadí, je to výhradně obrázek na pozadí, nikoliv prvek stránky. Grafická součást prvků stránky by měla manipulovat s img tagy.

S tím je obtížné se na jednoduchém základě dohodnout, že pozadí nebylo vnímáno jako obecné zázemí. Je to jen pozadí, bez ohledu na to - miniaturní prvek nebo celá stránka jako celek.

Mezitím je grafická součást vážnou překážkou v používání skřítků.

Přiměřené použití

Navzdory tomu, že termíny „Internet technologie“ a „high technologií“ je považován za synonymní, ve skutečnosti, to je časově náročné a někdy i velmi low-tech práce. Skřítci nejsou nijak zvlášť oblečený ve srovnání s ostatními překážek v čisté programování v jazyce jаvascript nebo PHP, stejně jako ve vývoji nezbytných funkcí, nastavení procesů čerpacích míst nebo informace, jako je například pozadí vytvářet archivní kopie.

Výkonnost a perspektiva použitých systémů řízení lokality jsou časově vyrovnány nuancami jejich praktické aplikace a ruční vývoj zdrojů zpravidla vede k nutnosti přepisovat jeden nebo druhý z vlastních algoritmů na 1001. čas.

V kontextu toho, co bylo řečeno, je důležité jednoduše použít v rozumných mezích vše, co poskytuje moderní nástroj. Nebuďte příliš dychtiví použít jeden nad druhým, a zlaté pravidlo v staveništi zní takto: je třeba na to myslet, jak předat práci co nejdříve, a jak to provést tak, že v případě jakékoliv nepředvídané situace, může být rychle vyřešen jakýkoliv problém.