Spritide mõiste on olnud juba mõnda aega. See on üks mängutööstuses enim kasutatavaid tehnikaid animatsioonide ekraanil kuvamise protsessi kiirendamiseks. Selles artiklis uurime eriti, kuidas see tehnika aitab meil CSS Sprites'i abil veebikülgede kasutuskogemust parandada:
- Mis on Sprite?
- Mis on CSS Sprite - kiire ülevaade?
- Näide selle kohta, kuidas see veebiarenduses aitab?
- CSS Sprite'i kasutamise eelised
- Mida peab arendaja CSS Spritesega töötades tegema?
- Kuidas luua CSS Sprite Sheet?
- Kuidas töötada CSS Spritesiga?
- CSS Spriteid kasutavad ettevõtted
Mis on Sprite?
Sprite on üksik pilt, mis on osa mängu suuremast stseenist. Seejärel ühendatakse mitu spritsi suureks pildiks, mida nimetatakse sprite leheks. Kui sprite leht on mällu laaditud, renderdatakse animatsiooni illusiooni saamiseks kiiresti erinevad spritid. Seda tehakse samaaegselt kümnete kuni sadade erinevate spritide jaoks, et tekitada mängus stseen.
c ++ ulatuse operaator
Põhiidee on see, et pilti on palju kiirem laadida ja osa sellest igal pool kuvada, kui vaja, võrreldes mitme pildi laadimisega ja kuvamisega.
Mis on CSS Sprite: kiire ülevaade?
CSS sprite on tehnika, mida veebiarendajad kasutavad sageli veebilehtede jõudluse optimeerimiseks. Selles tehnikas ühendatakse mitu väiksemat tavaliselt ühemõõtmelist pilti üheks suureks pildiks, mida nimetatakse a sprite leht või plaatide komplekt . Seejärel kasutatakse seda sprite-lehte üksikute elementide kuvamiseks kõikjal, kus neid vajame.
Tavaliselt lisatakse sprite lehele sellised elemendid nagu logod, navigeerimisnooled, nupud, kuna need on peaaegu samade mõõtmetega ja neid kasutatakse sageli veebilehel.
Näide selle kohta, kuidas see veebiarenduses aitab?
Üldiselt salvestatakse ja kasutatakse veebilehtede kujundamise ajal pilte üksikute failidena. Seega, kui kasutaja avab veebilehe, peab brauser iga faili jaoks esitama HTTP-päringu, laadima need alla ja kuvama. See toob kaasa suurema lehe laadimisaja, kuna konkreetsel veebilehel võib olla palju väiksemaid pilte nagu nupud, ikoonid, logod.
CSS-spritid aitavad arendajatel ühendada need sageli kasutatavad väikesed pildid üheks suureks pildiks. Seejärel peab brauser alla laadima ainult ühe faili, mida seejärel kasutataksekuvage vajalik sektsioon pilti nihutades.
CSS Sprite'i kasutamise eelised
CSS-spritide kasutamisel on tavaliste piltide ees kaks peamist eelist:
Kiirem lehe laadimine: Suurendab lehe laadimisaega, kuna veebilehel kasutatud pildid ilmuvad kohe, kui leht on alla laaditud.
Suurem läbilaskevõime ja väiksem ressursikasutus: Mitte ainult see tehnika ei paranda lõppkasutaja kogemust, muutes lehe kiiremaks laadimiseks,kuid see vähendab ka võrgu ülekoormust, kuna HTTP-päringuid tehakse vähem.
Mida peab arendaja CSS Spritesega töötades tegema?
Üksikute piltidega töötades saab arendaja lihtsalt töötada HTML-märgendiga ja vajadusel kujundage see CSS-is. Kuid CSS Spritesiga töötades peab arendaja tegema kaks konkreetset asja:
- Sprite Sheet'i loomine
Veebilehe väljatöötamise ajal peab arendaja CSS-spritide kasutamise korral kõigepealt looma sprite-lehe, ühendades kõik soovitud elemendid, nagu nupud, logod jne, võrgutaolises mustris. Seda saab teha mis tahes pilditöötlusprogrammi abil, näiteks Photoshop või Gimp. Samuti on saadaval palju veebitööriistu, mis aitavad teil sprite lehte teha. Neid tööriistu käsitletakse edaspidi selles artiklis.
- Juurdepääs sprite'i kindlale elemendile, kasutades CSSi taust-positsioon vara
Kui sprite-leht on valmis, peab arendaja lehe erinevatele osadele juurde pääsemiseks kasutama CSS-i atribuute.
- laius: Sprite laius
- kõrgus: Sprite kõrgus
- taust: Viide sprite lehele
- Taustapositsioon: Nihteväärtused (pikslites), et pääseda juurde ainult sprite lehe vajalikule osale
Kuidas luua CSS Sprite Sheet?
Väiksemate piltide ruudustikku paigutamiseks võite kasutada mis tahes pilditöötlustarkvara, kuid allpool käsitletakse kahte lihtsamat meetodit:
1. Veebileht Sprite Sheet Creation
LINK: toptal.com/developers/css/sprite-generator/
Seda tööriista pole mitte ainult tasuta kasutada, vaid see annab teile ka vajaliku CSS-koodi, mida saab kasutada sprite-lehele viitamisel. Samuti saate ringi käia erinevate omadustega, näiteks elementide vahelise polsterdusega ja nende joonduse muutmisega.
2. Sprite'i lehe genereerimine Sprityga
Kui kasutate Grunti, Node'i või Gulppi, võite installida paketi nimega Sprity, mis aitab teil luua mitmesugustes vormingutes nagu PNG, JPG jne.
Esiteks peate installima Sprity, kasutades järgmist:
npm installige sprity -g
Seejärel kasutage sprite-lehe genereerimiseks järgmist käsku:
sprity ./output-directory/ ./input-directory/*.png
Kuidas töötada CSS Spritesiga?
Selles näites kasutame järgmist sprite-lehte:
Nagu ülaltoodud pildil näha, on kuus ikooni (Instagram, Twitter ja Facebook) paigutatud ruudukujuliseks mustriks. Esimeses reas on meil normaalne olek ja teises reas on nende hõljumisolek (pilt, mis ilmub siis, kui hõljutame hiirekursorit nende peal).
Kui tegite sprite-lehe eespool käsitletud tööriistade abil, teate juba CSS-is nõutavaid nihkeid, kuid kui kasutasite mõnda muud tööriista või teile anti lihtsalt mõni sprite-leht, siis ärge muretsege, arutame meetodit, mis aitab teil vajaliku elemendi nihkeid saada.
Vaatame nüüd väga lihtsat viisi kõigi kuue ikooni jaoks vajalike nihete saamiseks MS Paint abil. Spritidega töötamine ei pruugi olla ideaalne lahendus, kuid kuna sellel on funktsioon, mis annab hiire kursori koordinaadid, saab seda kasutada vajalike X- ja Y-koordinaatide saamiseks.
Esiteks avage oma sprite lehe pilt (ruudustik, mis sisaldab kõiki väiksemaid pilte) ja viige hiirekursor sprite'i vasakusse ülanurka, mille soovite haarata.
Kui olete oma sprite'i ülemise vasaku punkti koordinaadid (ülemine vasakpoolne Instagrami pilt), saate CSS-koodi abil seda konkreetset sprite alati kuvada:
taust: url ('img_sprites.png')
taustasend: 0 0
laius: 125px
kõrgus: 125px
Kasutame laiust ja kõrgust 125 pikselina, kuna meie ikoonid on selle mõõtmega. Samas reas järgmise pildi (Twitter) toomiseks kasutame järgmist koodi:
taust: url ('img_sprites.png')
taustasend: -128px 0px
laius: 125px
kõrgus: 125px
Pange tähele ülaltoodud koodilõigu atribuuti background-position. (-128px, 0) tähendab, et me nihutame oma sprite-lehte vasakule 128 piksli võrra (võttes arvesse elementide vahelist polsterdust) ja 0 pikslit Y-teljel. Kui peaksime pääsema twitteri hõljuki ikoonile, oleks meie taustapositsiooni atribuut järgmine:
taust-positsioon: -128px -128px
Sel moel saame CSS-i abil nüüd juurde pääseda oma sprite-lehe igale komponendile. Läheme läbi täielik HTML- ja CSS-kood, kuidas seda teha.
Samm 1: Nõutava HTML-koodi kirjutamine
Allolevas koodis lisame lihtsalt kolm linki. Samuti seome oma HTML-i stiililehega (screen.css).
2. samm: Vajaliku CSS-i kirjutamine. Esiteks kujundame meie jagatud ikooniklassi. Siin näete, et viidame meie loodud sprite-lehele.
/ * Jagatud ikooni klass * /
span.ikon a: link,
span.ikon a: külastatud{
kuva:blokeerida
teksti taane:-9999px
c ++ massiivi sorteerimine
taustapilt: URL (./ img_sprites.png)
taust-kordus:ei korda
}
3. samm: üksikute ikoonide hankimine sprite lehelt nihete abil.
/ * Instagrami ikoon * /
span.instagram a: link,
span.instagram a: külastatud{
laius:125px
kõrgus:125px
taust-positsioon:0 0
}
/ * Twitteri ikoon * /
span.twitter a: link,
span.twitter a: külastatud{
laius:125px
kõrgus:125px
taust-positsioon:-128px 0
}
tõsta Java-s midagi võimule
/ * Facebooki ikoon * /
span.facebook a: link,
span.facebook a: külastatud{
laius:125px
kõrgus:125px
taust-positsioon:-257px 0
}
4. samm: Hõljutavate ikoonide hankimine sprite lehelt nihete abil.
span.instagram a: hõljutage kursorit{taust-positsioon:0 -128px}
span.twitter a: hõljutage kursorit{taust-positsioon:-128px -128px}
span.facebook a: hõljutage kursorit{taust-positsioon:-255px -128px}
CSS Spriteid kasutavad ettevõtted
Paljud valdkonna suured nimed kasutavad oma veebisaitide reageerimisvõime parandamiseks CSS Spriteid. Sellised ettevõtted nagu Google, Facebook, Amazon kasutavad seda meetodit laialdaselt, kuna see aitab neil vähendada konkreetse kasutaja HTTP-päringute arvu seansi kohta. See on tohutu eelis, kui arvestada, et need ettevõtted teenivad igal hetkel miljoneid kliente.
Nüüd, kui olete aru saanud, mis on CSS-spritid ja kuidas nendega töötada, olete CSS-i õppimise sammu võrra lähemal. Sellised kontseptsioonid nagu spritid on tänapäeval mängude muutja, kuna arendajatele on muutunud ülitähtsaks iga jõudluse eraldamine veebilehelt.
Vaadake meie mis on varustatud juhendajate juhitud elava koolituse ja reaalse elu projektikogemusega. See koolitus võimaldab teil omandada oskusi, mis võimaldavad töötada tagumise ja esiotsa veebitehnoloogiatega. See sisaldab koolitust veebiarenduse, jQuery, Angular, NodeJS, ExpressJS ja MongoDB kohta.
Kas teil on meile küsimus? Palun mainige seda blogi „HTML Images” kommentaaride jaotises ja me võtame teiega ühendust.