CSS sprites: kirjeldus, põhitehnika ja kasulikud soovitused

Kaasaegne veebileht peaks olema kiire, ilus ja efektiivne nii arendusetapis kui ka kliendiga töötamisel. Reeglina püüab iga Interneti-ressursse loov ettevõte oma isikut meelitada, meelitab külastajaid selle disaini, stiili, usaldusväärsuse, kiiruse ja muude omaduste järgi.

Sprittide kasulikud omadused

CSS-i sprites saate parandada nii saidi kvaliteediomadusi kui ka ettevõtte pilti. Tegelikult ei ole see liiga keeruline arendaja tööriist, kuid see kiirendab ressursside arendamise protsessi ja nende töö kiirust.

Muuhulgas on kood lihtsustatud ja muutub teatud mõttes teistele ressurssidele teisaldatavateks, mis tänu CSS-i sprite kasutamisele muutuvad lähedaste sugulastena sarnaseks, sest saate kasutada samu graafilisi ideesid, Märksõnade struktuur ja sisu.

Veebisaidi arendamise tavapärases protsessis peate tegema palju pilte. Väga sageli jäävad need pildid väga vähe ruumi, kuid nad on alati eraldi fail. Iga serveri operatsioonisüsteemi puhul on faili avamine aeganõudev toiming, kuid see ei erine oluliselt ajahetkega, kui fail avatakse 13 13 piksliga ja kui 16 pilti 52 faili 52 piksliga fail avaneb. Esimesel juhul on teil vaja 16 faili ja 16 avatud / lugemisoperatsiooni, teisel juhul saadakse 16 pilti, avades ainult ühe faili.

Kui loote selliseid faile vastavalt teemale (horisontaalsed menüüd, dialoogivormingud, kalkulaatornupud, kalendriüksused jne), siis saab selliseid piltide kogumeid mobiillikult saidilt saidilt üle kanda.

Mündi tagakülg

Kui on olemas fänne, kes on liiga kerge soovitada CSS-i sprite kasutamist, siis kindlasti leiate need, kes seda küsimust hoolikalt uurivad ja näitavad arukalt, et alati on praktilisem töötada vanamoodulisena.

Tõepoolest, kui 16 pildifaili asemel on üks 16 pilti, siis 16 avamise / lugemise toimingu asemel on see üks. Kuid trikk on see, et igal brauseril on vahemälu ja see koormab midagi ainult viimase abinõuna. Lisaks sellele laaditakse tavaliselt lehe elemendid lehe esmakordsel külastamisel ja ainult neid muudetud laaditakse hiljem.

Teine aspekt. Tavaliselt on pildid lõigatud, mitte liimitud ühte faili. Kuid nagu tehnoloogia on välja arendanud, on parem öelda, custom. Disainer loob paigutuse, ja paigutus kasutab oma tükki: peeneks lõigatud paigutusosad. Spreedi vastased usuvad, et mitme faili kogumine ühes failis on aeganõudev ülesanne, mis suurendab lehe üldist arengusaega.

On ka arendajaid, kes arvavad ja optimeerivad HTTP-taotluste arvu, uskudes, et see tegevus on pragmaatilisem kui CSS-i sprites.

Kõik märgitud hetked on kahtlemata oluline, kuid palju olulisem on arvamus: kõik tuleks kohaldada mõistlike piiridena.

Automation ja CSS sprites

Kui pole mõtet kasutada CSS-i sprite generaatorit ja saada õige osa disainist, ei jää midagi, mis lihtsalt selle osa moodustaks tavapärasel viisil. Kui tavaline tehnoloogia toob kaasa vajaduse lõigata sadu pilte, siis on eelistatav joonistada JavaScripti funktsioon, mis vajaduse korral valib sprite vajaliku ala ja kuvab selle.

Siiski tuleb märkida, et kahe või kolme elemendi või kümne või kahe elemendiga ei lähe kuhugi, vaid siis, kui sprites on sadu jooniseid, siis loomulikult ei tekita probleem JavaScripti funktsiooniga, vaid seda, kui palju jõupingutusi see nõuab, et luua Selline suur sprite ... Lisaks on piltide liimimiseks üks asi, sprite genereerija CSS kasutab nii soovitud pilti kui ka CSS-koodi, see ei oma tähtsust, kui palju elemente sprites saab. Probleemid tekivad siis, kui te redigeeri saidi, muudate disaini, kustutate ja lisate uusi objekte. Sprite arendamisel ei peaks mõtlema, kuidas seda kasutada, vaid kuidas seda hiljem muuta.

Sprittide kasutamise temaatilised eelised

Erinevalt CSS-i programmeerimiskeeltest on see suhteliselt staatiline reeglite kogum, kogu selle dünaamikat määravad reeglid ja nende funktsionaalne sisu (standardne). Arvestades sprite, HTML, CSS-i komplekti , saate luua temaatilisi disain-funktsionaalseid raamatukogusid.

Näiteks menüü lõppversioon: võite tulemuse saada, lihtsalt ühendades mõne CSS-i reegli, js-funktsioonide ja mitme kodeeringu HTML-divi. Pildi sprite sisu muutmine võimaldab muuta selle menüü välimust. Täpsustades funktsiooni keha, saate funktsionaalsust reguleerida.

Selgub objektorienteeritud programmeerimise (OOP) omapärane versioon . Kahtlemata on see ere idee, kuid see ei paista silma paistma teiste OOP-murrete taustal tõelistes keeltes. Alles 90. aastate algul, mil OOP taaselustati ja hakkas päikese käes ebatavaliselt kiire koha saama, kujutas see endast konkreetset ideed ja konkreetse väljendusvormi ning täna on arendajad teinud nii palju dialekte, et ei ole mitmekesist vene keelt.

Mänguasjad - kuldmüük sprittidele

Põetus ja programmeerimine on kokkusobimatud mõisted, kuid kirjutamismängija programmeerija kvalifikatsioon erineb tavalisest (lihtsast kodeerimisest) ja loomingulisest (uute tehnoloogiate ja ideede kujundamine ja arendamine) märgatavalt.

Mängu disain pöördub vektorgraafika poole, sest SVG sprite + CSS reeglite kombinatsioon ei ole mitte ainult nõudlus, vaid see muutub tihti ka arendaja (saidi) objektiks reaalse mängu objektiks. Eriti kehtib populaarse mängu Counter Strike tingimuste kohta sprites, pihustid on üsna tähendusrikkad sünonüümid: plahvatus, veri, nägemine ...

Algatuseks on mõiste "install sprites css v34" üsna tavaline ja arusaadav. Sprites ei ole nende kasutuses mitte ainult kasulikud, vaid on ka nišš, mis sai täielikult teatud funktsionaalseks, juurdepääsetavaks ja arusaadavaks teatud kindlale tarbijarühmale.

CSS sprites: näide

Saidi lehtede vahetamiseks ühe või teise keele abil kasutatakse mitmesuguseid valikuid, kuid kui keelevalik on täidetud ikooni kujul, võib sprite kasutamine olla selline:

Äretide ilmsed puudused

Esiteks on see töömahukas ja hoolikas protsess. Üks asi on disaini lõikamine väikesteks tükkideks, teine on koguda üks pilt paljudest väikestest tükkidest. Rakenda lõuendi idee ja pannakse sellele kõik saidil kasutatud pildid, täiesti mõttetu.

Isegi CSS-i sprite generaatori kasutamisel ei saa raskusi vältida, seda eriti siis, kui peate saidi disaini ümber kujundama. Paigutage spetsi paar tosinat pilti - see ei ole hulga elemente, graafika on graafika, tavaliselt kuvatakse see lihtsalt lihtsalt ekraanil, mitte sorteeritud koodina kui soovitud elemendi otsimiseks massiiv.

Standard ja järgmised arendajad väidavad, et kuna spreedid on seotud reegli taustaga, siis on tegemist ainult taustapildiga, mitte saidi elemendiga. Lehekülje elementide graafiline komponent peaks manipuleerima img-siltidega.

Sellega on raske kokku leppida lihtsal alusel, et tausta ei tajuta üldist tausta. See on lihtsalt taust, ükskõik mida - miniatuurne element või kogu leht tervikuna.

Vahepeal on see graafiline komponent, mis on tõsine takistus sprite kasutamisel.

Mõistlik kasutamine

Hoolimata asjaolust, et mõisteid "Interneti-tehnoloogia" ja "kõrgtehnoloogia" peetakse sünonüümiks, on see tegelikult töömahukas ja mõnes kohas väga mittetehnoloogiline töö. Sprites ei paista eriti silma teiste kitsaskohtade vastu, näiteks lihtsalt JavaScripti või PHP programmeerimine või vajaliku funktsionaalsuse arendamine, infosisu täitmisega seotud protsesside konfigureerimine või näiteks arhiivide taustakkoopiate loomine.

Kasutatavate saidihaldussüsteemide võimsust ja perspektiive korrigeeritakse mõnikord praktiliste rakenduste nüanssidega ja ressursside käsitsi arendamine viib reeglina 1001-nda aja ümberkirjutamiseks ühe või teise oma algoritmi.

Nagu juba öeldud, on oluline lihtsalt mõistlike piirangute abil kõik, mida kaasaegne vahend annab. Ärge olge liiga uhked, kui kasutate seda teisele kahjuks, ja kullaväärtus saidi ehitamisel on see: ei peaks mõtlema sellele, kuidas töö võimalikult kiiresti üle anda, vaid selle kohta, kuidas seda rakendada, et mis tahes ettenägematu olukorra korral oleks võimalik seda kiirelt lahendada Mis tahes probleem.