CSS-sprites: en beskrivelse af de grundlæggende teknikker og nyttige tips

Moderne websted for at være hurtig, nice og effektiv både i den fase af udviklingen, og når man arbejder med en klient. Som regel hver virksomhed, der skaber online-ressourcer, søger at få deres eget ansigt, for at tiltrække besøgende med sit design, stil, pålidelighed, hastighed og andre attributter.

Nyttige egenskaber af sprites

CSS-sprites kan forbedre både de kvalitative egenskaber af sitet og virksomhedens image. I sin kerne, er det ikke alt for kompliceret udviklingsværktøj, men det virkelig fremskynder processen og ressource udvikling, og hastigheden af deres arbejde.

Blandt andet det forenkler koden og i en vis forstand er det bærbar til andre ressourcer, som på grund af det faktum, at de anvendte CSS-sprites er ens som de nære slægtninge, fordi du kan bruge dialogen samme grafiske ideer, stil design elementer, struktur og indhold tag.

I normale udvikling af området til at gøre en masse billeder. Meget ofte, disse billeder fylder meget lidt plads, men er altid en separat fil. For alle operativsystemer af enhver server åbne en fil - denne operation, en tidskrævende, men vil ikke afvige væsentligt med hensyn til tid, når en fil åbnes på 13 med 13 pixels, og når filen åbnes fra 16 billeder 52 af 52 pixels. I det første tilfælde, har du 16 filer og 16 åbne / læse operationer, i det andet tilfælde 16 billeder vil blive opnået som resultat af åbningen af kun én fil.

Hvis du opretter et sæt filer om emnet (vandret menu, dialogformer, lommeregneren knapperne kalender designelementer ...), at sådanne billeder kan kombineres fleksibelt flyttet fra sted til sted.

Ulempen

Når der er fans, for sprælske anbefales at bruge CSS sprite er nødvendigvis dem, der er nøje studerer problemet og viser klart, at det altid er praktisk at arbejde den gammeldags måde.

Faktisk hvis der er en fil på 16 billeder, i stedet for 16 åben / læse operationer vil være én i stedet for 16 billedfiler. Men det trick er, at hver browser har en cache, og det indlæser noget kun som en sidste udvej. Hertil kommer, er som regel de sideelementer indlæses, når du først besøge siden, og derefter indlæst kun ændret.

Et andet aspekt. Typisk er billedet skæres, ikke limet til en enkelt fil. En eller anden måde har det udviklet en teknologi, det er bedre at sige, den brugerdefinerede. Designeren skaber layout og layout bruger sine brikker: fint snittede stykker af layoutet. Modstandere sprites mener at plukke op flere billeder i én fil - forbrugende aktivitet, hvilket øger den samlede side design.

Der er de udviklere, der tror og optimere antallet af HTTP-forespørgsler, der mener, at denne besættelse er mere pragmatisk end CSS-sprites.

Alle tider er angivet er uden tvivl vigtige, men langt vigtigere er det synspunkt: det skal anvendes inden for rimelige grænser.

Automation og CSS-sprites

Hvis det ikke giver mening at køre CSS Sprites generator og få den rigtige del af designet, så intet forhindrer simpelthen udgør denne del af den normale måde. Hvis konventionel teknologi gør det nødvendigt at skære hundredvis af billeder, er det foretrukket at skitsere JavaScript-funktion, som nødvendigvis vælge fra det ønskede område af sprite og vise den.

Det skal dog bemærkes, at Sprite af to eller tre elementer, eller en anden dusin - okay, men når i sprite hundredvis af tegninger, nogle med at skrive JavaScript-funktion problemer, selvfølgelig, vil ikke forekomme, men hvor meget arbejde det vil tage at oprettelsen af sådan en stor sprite ... Desuden lim billeder - dette ene CSS sprite generator og gør det ønskede billede, og CSS-kode for det, var han ligeglad hvor meget vil de enkelte elementer i sprite. Problemerne opstår, når genskabe sitet konstruktionsændring, fjernelse og tilføjelse af nye elementer. Udvikling af en sprite, bør du tænke ikke om, hvordan man bruger det, og hvordan det så ændre.

Emne fordel ved at anvende sprites

I modsætning til CSS programmeringssprog, er dette en forholdsvis statisk regelsæt alle dets dynamik er bestemt af de regler og deres funktionelle indhold (standard). I betragtning af de sprites i komplekset, HTML, CSS kan oprette et tema-funktionelt design af biblioteket.

For eksempel er den færdige version af menuen: blot slutte flere css-regler, js-funktioner og omfatter kodenummeret af HTML-divs, kan du få resultatet. Ved at ændre indholdet af billedet af Sprite, kan du ændre udseendet af menuen. Angivelse kroppen af funktionen, kan du justere funktionaliteten.

Få en mærkelig variant af objektorienteret programmering (OOP). Sikker på, ville det være en lys idé, men det vil ikke være for lyst til at skille sig ud på baggrund af andre OOP sprog, dialekter reel. Det er kun i begyndelsen af 90'erne, da PLO blev genoplivet og blev usædvanligt hurtigt få en plads i solen, er det en konkret idé og en konkret form for sit udtryk, men nu udviklerne er kommet op med så mange dialekter, som der har forskelligartet russisk.

Legetøj - en guldgrube for sprites

Spænding og programmering - uforenelige begreber, men viden om programmering, skrive spil, er markant forskellig fra obschebytovoy (simpel kryptering) og kreative (design og udvikling af nye teknologier, ideer).

Game Design appellerer til vektorgrafik, fordi kombinationen af SVG-sprites + CSS-regler ikke kun efterspørgsel, men ofte bliver genstand for udvikleren (af webstedet) til genstand for et rigtigt spil. Især det populære spil Counter Strike gælde for vilkårene for de sprites, spray ganske meningsfuld Synonymer: blast, blod, synet ...

Udtrykket "indstille Sprite css V34" for den indviede er helt normalt og forståeligt. Sprites findes ikke kun i brugen af værktøjet, i det væsentlige, men også dannet en niche, som er helt komplet, overkommelig og let at forstå en bestemt kreds af forbrugere.

CSS-sprites: Eksempel

en række muligheder for et bestemt sprog til at skifte sider på webstedet, anvendes, men hvis sprogvælgeren at udføre som et ikon, kan opløsningen ved hjælp af en sprite se sådan ud:

Indlysende ulemper sprites

Først og fremmest, det er tidskrævende og omhyggelig proces. Det er én ting - at skære designet i små stykker, og den anden - at indsamle et billede af mange små. Påfør ideen om lærredet og placere den på alle de billeder, der anvendes på hjemmesiden er helt forgæves.

Selv bruger CSS-sprites Generator, ikke kan undgås vanskeligheder, især når det er nødvendigt at ændre site design. Tilføj i et par snese sprite billeder - det er ikke en vifte af elementer, grafikken har grafik, er det som regel bare vises på skærmen, i stedet for at sortere ud koden som en matrix til at finde den rigtige vare.

Standard og udviklere efter hans påstand om, at som sprites er forbundet med en politisk baggrund Brugt, er det kun et baggrundsbillede og ikke sitet element. Grafisk komponent elementer af en side skal manipulere tag img.

Det er svært at blive enige om de simple begrundelse, at når nok baggrund blev opfattet som en fælles baggrund. Det er bare baggrunden, uanset hvad - en miniature element eller hele siden.

I mellemtiden, den grafiske komponent repræsenterede en alvorlig hindring for brugen af sprite.

fornuftig anvendelse

På trods af, at udtrykkene "Internet-teknologi" og "højteknologiske" anses for at være synonymt, i virkeligheden, det er tidskrævende og til tider meget lavteknologisk arbejde. Sprites er ikke specielt klædt i forhold til andre flaskehalse i ren programmering i JavaScript eller PHP, samt i udviklingen af den nødvendige funktionalitet, indstilling processer påfyldning websteder eller oplysninger, såsom baggrunden skaber arkiv kopier.

Magt og kontrol systemer, der anvendes af udsigten til den sider nivelleret sommetider nuancer af deres praktiske anvendelse, og manuel ressource udvikling, som regel fører til behovet for, at 1001:e tid til at omskrive den ene eller den anden en proprietær algoritme.

I denne sammenhæng er det vigtigt, at blot rimeligt at bruge alt, der giver et moderne værktøj. Må ikke være alt for ivrige efter at bruge den ene over den anden, og den gyldne regel i stedet bygning lyder som følger: du nødt til at tænke ikke om, hvordan man passerer det arbejde så hurtigt som muligt, og hvordan man kan udføre den, så i tilfælde af eventuelle uforudset situation kan hurtigt løst ethvert problem.