CSS-sprites: 'n beskrywing van die basiese tegnieke en nuttige wenke

Moderne webwerf te vinnig, mooi en doeltreffende wees beide op die stadium van ontwikkeling, en wanneer daar gewerk word met 'n kliënt. As 'n reël, elke maatskappy wat aanlyn hulpbronne skep, poog om hul eie gesig te hê, om besoekers met sy ontwerp, styl, betroubaarheid, spoed en ander eienskappe te lok.

Nuttige eienskappe van sprites

CSS-sprites kan verbeter beide die maatskappy se beeld die kwalitatiewe eienskappe van die terrein en. In sy kern, is dit nie te ingewikkeld instrument vir ontwikkeling, maar dit versnel werklik die proses en hulpbron-ontwikkeling, en die spoed van hul werk.

Onder andere, dit vergemaklik die kode en, in 'n sekere sin, dit is draagbaar na ander hulpbronne wat, as gevolg van die feit dat die gebruik CSS-sprites is soortgelyk as die naasbestaandes, omdat jy dieselfde grafiese idees, styl ontwerp elemente dialoog kan gebruik, struktuur en inhoud van die tag.

In die normale gang van die ontwikkeling van die terrein om 'n baie foto's te doen. Baie dikwels, hierdie beelde neem baie min spasie, maar is altyd 'n aparte lêer. Vir enige bedryfstelsel van enige bediener 'n lêer oop te maak - hierdie aksie, 'n tyd in beslag neem, maar sal nie beduidend verskil met betrekking tot tyd wanneer 'n lêer geopen word op die 13 deur 13 pixels, en wanneer die lêer is oop van 16 foto's 52 deur 52 pixels. In die eerste geval, jy het 16 lêers en 16 oop / lees bedrywighede, in die tweede geval 16 beelde sal verkry word as gevolg van die opening van net een lêer.

As jy 'n stel van lêers oor die onderwerp te skep (horisontale spyskaart, vorme van dialoog, die sakrekenaar knoppies kalender ontwerpelemente ...) dat sulke beelde kan gekombineer word sonder huiwering verskuif van werf na werf.

die nadeel

Wanneer daar ondersteuners, te dartel aanbeveel om CSS gebruik sprites is noodwendig diegene wat noukeurig die kwessie bestudeer en toon duidelik dat dit altyd prakties om die outydse manier te werk.

Inderdaad, as daar 'n lêer van 16 foto's, in plaas van 16 oop / lees bedrywighede sal een in plaas van 16 foto lêers. Maar die geheim is dat elke leser het 'n kas, en dit vragte iets net as 'n laaste uitweg. Daarbenewens is gewoonlik die bladsy elemente gelaai word wanneer jy die eerste keer die bladsy besoek, en dan downloaded net verander.

Nog 'n aspek. Tipies, is die beeld sny, nie vasgeplak aan 'n enkele lêer. Een of ander manier het dit 'n tegnologie wat ontwikkel is, is dit beter om te sê, die gewoonte. Die ontwerper skep die uitleg en uitleg gebruik sy stukke: fyn gesny stukke van die uitleg. Teenstanders sprites glo dat die optel van 'n paar foto's in 'n lêer - beslag aktiwiteit, wat die totale bladsy ontwerp verhoog.

Daar is diegene ontwikkelaars wat glo en te optimaliseer die aantal HTTP-versoeke, en glo dat hierdie beroep is meer pragmatiese as CSS-sprites.

Alle aangedui tye is ongetwyfeld belangrik, maar veel meer belangrik is die siening: dit moet binne redelike perke toegepas word.

Outomatisering en CSS-sprites

As dit maak geen sin om CSS sprites kragopwekker loop en kry die regte deel van die ontwerp, dan niks verhoed eenvoudig make-up hierdie deel van die normale manier. As konvensionele tegnologie is dit nodig om honderde beelde sny maak, is dit beter om die JavaScript-funksie, wat noodwendig sal kies uit die verlangde area van die sprite en vertoon dit skets.

Dit moet egter daarop gelet word, dat die sprite van twee of drie elemente, of 'n ander dosyn - alles reg, maar toe in die sprite honderde tekeninge, sommige met die skryf van JavaScript-funksie probleme, natuurlik, sal nie plaasvind nie, maar hoeveel werk dit sal neem om die skepping van so 'n groot sprite ... Daarbenewens, gom foto's - hierdie een CSS sprite kragopwekker en maak die gewenste beeld, en CSS-kode vir dit, het hy nie omgee hoeveel sal die samestellende elemente van die sprite. Probleme ontstaan wanneer andersmaak die site design verandering, verwydering en byvoeging van nuwe elemente. Die ontwikkeling van 'n sprite, moet jy nie dink oor hoe om dit te gebruik, en hoe dit dan verander.

Onderhewig voordeel van die gebruik van sprites

In teenstelling met CSS programmeertale, dit is 'n relatief statiese stel reëls al sy dinamika word bepaal deur die reëls en hul funksionele inhoud (standaard). Met inagneming van die sprites in die kompleks, die HTML, die CSS kan 'n tema-funksionele ontwerp van die biblioteek te skep.

Byvoorbeeld, die finale weergawe van die spyskaart: eenvoudig te koppel verskeie css-reëls, JS-funksies en sluit die kodenommer van HTML-divs, kan jy die resultaat te kry. Deur die verandering van die inhoud van die beeld van die sprite, kan jy die voorkoms van die spyskaart verander. Vermelding van die liggaam van die funksie, kan jy die funksionaliteit te pas.

Kry 'n eienaardige variant van objekgeoriënteerde programmering (OOP). Seker, dit sal 'n blink idee wees, maar dit sal nie te helder om uit te staan teen die agtergrond van ander OOP tale, dialekte real. Dit is net in die vroeë '90, toe die PLO herleef en het buitengewoon vinnig 'n plek in die son te kry, dit is 'n spesifieke idee en 'n konkrete vorm van uitdrukking, maar nou is die ontwikkelaars het met soveel dialekte kom as daar 'n diverse Russies.

Speelgoed - 'n meevaller vir sprites

Opwinding en ontwikkeling - onversoenbare konsepte, maar programmeringsvaardighede, skryf speletjies, is aansienlik anders as obschebytovoy (eenvoudige enkripsie) en kreatiewe (ontwerp en ontwikkeling van nuwe tegnologie, idees).

Game Ontwerp 'n beroep op vektorgrafika, want die kombinasie van SVG-sprites + CSS-reëls nie net die vraag, maar dikwels word die voorwerp van die ontwikkelaar (van die webwerf) om die voorwerp van 'n werklike spel. In die besonder, die gewilde spel counter strike van toepassing op die terme van die sprites, ruikers baie sinvolle Sinonieme: ontploffing, bloed, die oë ...

Die frase "stel die sprite css v34" vir die begin is heel normaal en verstaanbaar. Sprites is gevind nie net in die gebruik van die program, in wese, maar ook gevorm 'n nis, wat baie volledige, bekostigbare en maklik om 'n sekere sirkel van verbruikers te verstaan.

CSS-sprites: Voorbeeld

'n verskeidenheid van opsies vir 'n bepaalde taal bladsye op die werf te skakel gebruik, maar as die taal selector om uit te voer as 'n ikoon, kan die oplossing met behulp van 'n sprite lyk:

Voor die hand liggend nadele sprites

In die eerste plek, is dit tyd in beslag neem en noukeurige proses. Dit is een ding - om die ontwerp in klein stukkies, en die ander sny - om 'n prentjie van baie klein in te samel. Pas die idee van die doek en plaas dit op al die beelde wat gebruik word op die terrein is heeltemal nutteloos.

Selfs met behulp van CSS sprites Generator, kan probleme nie vermy word nie, veral wanneer dit nodig is om die webwerf ontwerp te verander. Voeg in 'n paar dekades van sprite beelde - dit is nie 'n skikking van elemente, die grafiese hê grafiese, dit is gewoonlik net op die skerm vertoon, in plaas van uit te sorteer die kode as 'n skikking met die regte item te vind.

Standard en ontwikkelaars na aanleiding van sy eis dat as sprites wat verband hou met 'n beleid agtergrond gebruik word, is dit 'n agtergrond beeld en nie die terrein element is net. Grafiese komponent elemente van 'n bladsy moet tag img manipuleer.

Dit is moeilik om in te stem op die eenvoudige rede dat wanneer genoeg agtergrond as 'n algemene agtergrond is waargeneem. Dis net die agtergrond, maak nie saak wat - 'n miniatuur element of die hele bladsy.

Intussen het die grafiese komponent verteenwoordig 'n ernstige struikelblok vir die gebruik van sprites.

oordeelkundige gebruik

Ten spyte van die feit dat die terme "Internet tegnologie" en "hoë-tegnologie" word beskou as sinoniem te wees, in werklikheid, dit is tydrowend en soms 'n baie lae-tegnologie werk. Sprites is nie besonder geklee in vergelyking met ander knelpunte in suiwer ontwikkeling in JavaScript of PHP, sowel as in die ontwikkeling van die nodige funksionaliteit, die opstel van prosesse van die vulling van webwerwe of inligting, soos die agtergrond skep argief kopieë.

Krag en vooruitsigte vir die gebruik van content management stelsels dikwels gelyk nuanses van die praktiese toepassing daarvan, en ontwikkeling handleiding hulpbron, as 'n reël, lei tot die behoefte aan die 1001 tyd om een of die ander 'n eie algoritme herskryf.

In hierdie konteks, is dit belangrik om net redelik om alles wat 'n moderne instrument bied gebruik. Moenie te gretig om een te gebruik oor die ander wees, en die goue reël in site gebou lui soos volg: jy nodig het om te dink oor hoe om die werk so gou slaag as dit moontlik is, en hoe om dit uit te voer, sodat in die geval van enige onvoorsiene situasie vinnig opgelos kan word enige probleem.