CSS-sprites: en beskrivelse av de grunnleggende teknikker og nyttige tips

Moderne området for å være rask, hyggelig og effektiv både på utviklingsstadiet, og når du arbeider med en klient. Som regel hver bedrift som skaper elektroniske ressurser, søker å ha sitt eget ansikt, for å tiltrekke seg besøkende med sin design, stil, pålitelighet, hastighet og andre attributter.

Nyttige egenskaper fantomer

CSS-sprites kan forbedre både kvalitative egenskaper av området og selskapets image. I kjernen, er det ikke for komplisert utviklingsverktøy, men det virkelig setter fart på prosessen og ressursutvikling, og hastigheten på sitt arbeid.

Blant annet forenkler den koden, og i en viss forstand er det bærbar til andre ressurser som, på grunn av det faktum at de brukte CSS-sprites er lik som den nære slektninger, fordi du kan bruke den samme grafiske ideer, stil designelementer dialog, strukturen og innholdet i koden.

I normal løpet av utviklingen av området for å gjøre en masse bilder. Svært ofte disse bildene tar opp lite plass, men er alltid en egen fil. For ethvert operativsystem fra en server åpner en fil - denne operasjonen, en tidkrevende, men vil ikke skille seg vesentlig med hensyn til tid når en fil er åpnet på 13 x 13 piksler, og når filen åpnes fra 16 bilder 52 av 52 piksler. I det første tilfellet, har du 16 filer og 16 åpne / lese operasjoner, i det andre tilfellet 16 bilder vil bli oppnådd som følge av åpning av bare én fil.

Hvis du oppretter et sett med filer på emnet (horisontale menyen, former for dialog, kalkulatortastene kalenderdesignelementer ...) at slike bilder kan kombineres fleksibelt flyttet fra sted til sted.

ulempen

Når det er fans, for viltre anbefalte å bruke CSS sprites er nødvendigvis de som er nøye studere problemet og viser klart at det er alltid praktisk å jobbe på gamlemåten.

Faktisk, hvis det er en fil på 16 bilder, i stedet for 16 åpne / lese operasjoner vil være en i stedet for 16 bildefiler. Men trikset er at alle nettlesere har en cache, og den laster noe bare som en siste utvei. I tillegg er vanligvis sideelementer lastes når du først besøke siden, og deretter lastet bare endret.

Et annet aspekt. Typisk, blir bildet skjæres, ikke limt til en enkelt fil. Somehow har det utviklet en teknologi, er det bedre å si, skikken. Designeren skaper layout og layout bruker sine brikker: fint skiver biter av oppsettet. Motstandere sprites tror at plukke opp flere bilder i én fil - tidkrevende aktivitet, noe som øker den totale side design.

Det er de utviklere som tror og optimalisere antall HTTP-forespørsler, å tro at denne okkupasjonen er mer pragmatisk enn CSS-sprites.

Alle klokkeslett er angitt er utvilsomt viktig, men mye viktigere er utsikten: det skal brukes innenfor rimelighetens grenser.

Automatisering og CSS-Sprites

Hvis det gir ingen mening å kjøre CSS Sprites generator og få riktig del av designet, så ingenting hindrer bare utgjør denne delen av på vanlig måte. Ved konvensjonell teknologi gjør det nødvendig å kutte hundrevis av bilder, er det å foretrekke å skissere Javascript-funksjon, som nødvendigvis vil velge fra det ønskede område av sprite og vise den.

Det bør imidlertid bemerkes at sprite av to eller tre elementer, eller et dusin andre - greit, men når i sprite hundrevis av tegninger, noen med å skrive Javascript-funksjon problemer, selvfølgelig, vil ikke forekomme, men hvor mye arbeid det vil ta å skape en så stor sprite ... i tillegg lim bilder - dette en CSS sprite generator og gjør ønsket bilde, og CSS-kode for det, gjorde han ikke bryr seg hvor mye vil de konstituerende elementene i sprite. Problemer oppstår når gjenskape området design endring, fjerning og tillegg av nye elementer. Utvikling av en sprite, bør du tenke ikke om hvordan du bruker det, og hvordan det da endres.

Subject nytte av å bruke spriter

I motsetning til CSS programmeringsspråk, er dette et relativt statisk sett med regler alle dens dynamikk bestemmes av reglene og deres funksjonelle innhold (standard). Tatt i betraktning de sprites i komplekset, HTML, CSS kan skape et tema-funksjonell design av biblioteket.

For eksempel, den ferdige versjonen av menyen: bare koble flere css-regler, JS-funksjoner og inkludere koden rekke HTML-divs, kan du få resultatet. Ved å endre innholdet i bildet av sprite, kan du endre utseendet på menyen. Spesifisere kroppen av funksjonen, kan du justere funksjonalitet.

Få en spesiell variant av objektorientert programmering (OOP). Jada, ville det være en lys idé, men det vil ikke være for lyse til å skille seg ut på bakgrunn av andre OOP språk, dialekter ekte. Det er bare i begynnelsen av 90-tallet, da PLO ble gjenopplivet og ble usedvanlig raskt få en plass i solen, er det en bestemt idé og en konkret form av sitt uttrykk, men nå utviklerne har kommet opp med så mange dialekter som det har variert russisk.

Toys - en bonanza for sprites

Spenning og programmering - uforenlige begreper, men programmeringskunnskaper, skriftlig spill, er markant forskjellig fra obschebytovoy (enkel kryptering) og kreativ (design og utvikling av ny teknologi, ideer).

Spilldesign appellerer til vektorgrafikk, fordi kombinasjonen av SVG-sprites + CSS-regler ikke bare etterspørsel, men ofte blir gjenstand for utvikleren (på stedet) gjenstand for en ekte spill. Spesielt populære spillet Counter Strike gjelder vilkårene for sprites, sprayer ganske menings Synonymer: blast, blod, synet ...

Uttrykket "sett sprite css v34" for initiere er helt normalt og forståelig. Sprites finnes ikke bare i bruken av verktøyet, i hovedsak, men også dannet en nisje, som er ganske fullverdig, rimelig og enkel å forstå en viss krets av forbrukerne.

CSS-fantomer: Eksempel

en rekke alternativer for et bestemt språk for å bytte sider på nettstedet er brukt, men hvis språket velgeren til å utføre som et ikon, kan løsningen ved hjelp av en sprite se slik ut:

Åpenbare ulemper fantomer

Først av alt, det er tidkrevende og grundig prosess. Det er én ting - å kutte design i små biter, og den andre - å samle et bilde av mange små. Påfør tanken på lerretet og plassere den på alle bildene som brukes på nettstedet er helt nytteløst.

Selv bruker CSS sprites Generator, kan vanskelighetene ikke unngås, spesielt når det er nødvendig å endre site design. Legg i et par titalls sprite bilder - det er ikke en rekke elementer, grafikken har grafikk, er det vanligvis bare vises på skjermen, i stedet for å sortere ut koden som en matrise for å finne den rette element.

Standard og utviklere å følge hans påstand om at så sprites assosiert med en politikk bakgrunn brukt, er det bare et bakgrunnsbilde og ikke nettstedet element. Grafiske delelementer i en side bør manipulere tag img.

Det er vanskelig å bli enige om de enkle begrunnelse at når nok bakgrunn ble oppfattet som en felles bakgrunn. Det er bare bakgrunnen, uansett hva - en miniatyr element eller hele siden.

I mellomtiden, representerte den grafiske komponenten en alvorlig hindring for bruk av fantomer.

forstandig bruk

Til tross for at begrepene "Internett-teknologi" og "høyteknologisk" anses å være synonymt, faktisk, er det tidkrevende og noen ganger svært low-tech arbeid. Sprites er ikke spesielt kledd i forhold til andre flaskehalser i ren programmering i Javascript eller PHP, samt i utviklingen av nødvendig funksjonalitet, sette prosesser i fylle nettsteder eller informasjon, for eksempel bakgrunnen skape arkiv kopier.

Makt og utsiktene for bruk av innhold styringssystemer ofte flatet nyanser av deres praktiske anvendelse, og manuell ressursutvikling, som regel fører til behovet for 1001st tid til å skrive om det ene eller det andre en proprietær algoritme.

I denne sammenheng er det viktig å bare rimelig å bruke alt som gir et moderne verktøy. Ikke bli for ivrige etter å bruke en over den andre, og den gylne regelen i stedet bygge lyder som følger: du trenger å tenke seg om hvordan å passere arbeidet så snart som mulig, og hvordan å utføre det slik at i tilfelle noen uforutsette situasjoner kan raskt avklart noe problem.