CSS sprites: aprašymas, pagrindiniai metodai ir naudingos rekomendacijos

Moderni svetainė turėtų būti greita ir graživeiksmingas tiek kūrimo stadijoje, tiek dirbant su klientu. Paprastai kiekviena interneto išteklių kūrimo bendrovė siekia turėti savo asmenį, pritraukti lankytojus pagal jo dizainą, stilių, patikimumą, greitį ir kitas savybes.

Naudingos sprite savybės

CSS spritai leidžia pagerinti kokybęsvetainės charakteristikos ir įmonės įvaizdis. Iš esmės tai nėra labai sudėtingas kūrėjo įrankis, tačiau tai iš tiesų pagreitina išteklių kūrimo procesą ir jų darbo spartą.

Be kitų dalykų, kodas yra supaprastintas, irtam tikra prasme tampa nešiojamas kitais ištekliais, kurie, naudojant CSS puslapius, tampa panašūs kaip artimi giminaičiai, nes galite naudoti tas pačias grafines idėjas, dialogo elementų dizaino stilių, žymių struktūrą ir turinį.

Įprastame svetainių kūrimo procese jums reikiapadaryti daug nuotraukų. Labai dažnai šios nuotraukos užima labai mažai vietos, tačiau jos visada yra atskiras failas. Bet kokios serverio operacinės sistemos atveju failo atidarymas yra operacija, kuri užima daug laiko, tačiau ji nesiskirs žymiai, kai failas bus atidarytas 13 pikselių, o kai bus atidaryta 16 paveikslėlių 52 pikselių failas. Pirmuoju atveju turi būti 16 failų ir 16 atidarytų / perskaitytų operacijų, antruoju atveju 16 paveikslėlių bus gautas atidarant tik vieną failą.

Jei sukursite tokių rinkmenų rinkinius pagal temas(horizontalus meniu, dialogo formos, skaičiuoklio mygtukai, kalendoriaus dizaino elementai ...), tuomet tokius nuotraukų rinkinius galima perkelti iš svetainės į svetainę.

Monetos pusė

Kai yra gerbėjų, kurie pernelyg greitai rekomenduoja naudoti CSS šaukštus, būtinai raskite tuos, kurie atidžiai ištyrė klausimą, ir protingai rodo, kad visada praktiškiau dirbti senamadiškai.

Iš tikrųjų, jei vietoj 16 vaizdų rinkmenųbus vienas failas iš 16 paveikslėlių, tada vietoj 16 atidarymo / skaitymo operacijų ten bus vienas. Tačiau apgauti yra tai, kad kiekviena naršyklė turi talpyklą, ir ji įkelia kažką tik kaip paskutinę priemonę. Be to, dažniausiai puslapio elementai įkeliami pirmą kartą apsilankę puslapyje ir atsisiųsti tik pakeistus.

Kitas aspektas. Paprastai nuotraukos yra nukirpta, o ne įklijuota į vieną failą. Kažkokia technologija sukūrė, geriau pasakyti, pagal užsakymą. Dizaineris sukuria maketą, o maketą naudoja jo dalys: smulkiai supjaustytos išdėstymo dalys. Priešininkai "sprite" mano, kad kelių rinkmenų viename rinkinyje surinkimas yra daug laiko reikalaujanti užduotis, didinant bendrą puslapio kūrimo laiką.

Yra tie kūrėjai, kurie tiki ir optimizuoti HTTP užklausų skaičių, manydamas, kad šis darbas yra labiau pragmatiški nei CSS sprites.

Visi nurodyti akimirkai neabejotinai turi reikšmės, tačiau daug svarbiau yra nuomonė: viskas turėtų būti taikoma protingomis ribomis.

Automatika ir CSS spritai

Jei nėra prasmės valdyti CSS sprite generatoriųir gaukite tinkamą dizaino dalį, tada niekas neapsaugo tik įprasto šio žingsnio. Jei dėl įprastos technologijos reikia mažinti šimtus vaizdų, pageidautina, kad būtų parodyta "JavaScript" funkcija, kuri būtinai parinktų reikalingą sritį iš paraštės ir parodys ją.

Tačiau reikia pastebėti, kad išdu ar trys elementai, ar keliolika kitų - viskas gerai, bet kai šimtai piešinių iš Sprite, tada raštu JavaScript, funkcinių problemų, žinoma, nebus, bet kiek darbo ji imsis teikti tokį didelį Sprite ... Be to, klijai nuotraukos - tai vienas CSS Sprite generatorius ir daro norimą vaizdą ir CSS kodas, tai jis nerūpėjo kiek sudedamosios elementai Sprite. Problemos kyla, kai redaguojate svetainę, pakeiskite dizainą, ištrinate ir pridėkite naujų elementų. Kuriant sprite, neturėtumėte galvoti apie tai, kaip jį naudoti, bet kaip tai pakeisti vėliau.

Teminiai pranašumai naudojant šablonus

Tai skiriasi nuo CSS programavimo kalbųsantykinai statinis taisyklių rinkinys, visa jo dinamika yra nustatoma pagal taisykles ir jų funkcinį turinį (pagal standartą). Atsižvelgiant į sprite, HTML, CSS rinkinį, galite sukurti temines bibliotekas dizaino-funkcinės.

Pavyzdžiui, galutinė meniu versija: tiesiog sujungdami keletą CSS-taisyklių, JS-funkcijų ir įtraukdami tam tikrus HTML-divus į kodą, galite gauti rezultatą. Pakeitus vaizdo ieškos turinį, galite pakeisti šio meniu išvaizdą. Nurodžius funkcijos kūną, galite koreguoti funkcinį.

Gaukite originalią versijąObjektinis programavimas (OOP). Žinoma, tai būtų ryškus idėja, tačiau ji negali būti per šviesus išsiskirti iš kitų OOP kalbų fone, tarmės reali. Tai tik 90-ųjų pradžioje, kai PIO buvo atgaivinta ir tapo neįprastai greitai įgyti saulėje vieta, tai yra specifinė idėja ir betono forma savo išraiška, bet dabar kūrėjai turi sugalvoti, kaip daug tarmių, nes turi įvairios rusų.

Žaislai - auksinė kasykla "Sprite"

Jausmas ir programavimas yra nesuderinamos sąvokosbet rašytojo žaidimų programuotojo kvalifikacija pastebimai skiriasi nuo bendro (paprasto kodavimo) ir kūrybiškumo (naujų technologijų ir idėjų kūrimas ir kūrimas).

Žaidimo dizainas kreipiasi į vektorinę grafiką, nesiš SVG-sprites + CSS taisyklių ne tik paklausos, bet dažnai derinys tampa kūrėjas (svetainės) į nekilnojamojo žaidimo daiktas. Visų pirma, populiarus žaidimas Counter Strike taikomos nuo sprites sąlygomis, purškikliai gana prasmingas Sinonimai: sprogimo, kraujas, akyse ...

Frazė "įdiegti sprites css v34" užskirta yra gana įprasta ir suprantama. Spritai įgijo ne tik naudingumą taikant jų esmę, bet ir sukūrė nišą, kuri tapo visiškai funkcionali, prieinama ir suprantama tam tikram vartotojų ratui.

CSS sprites: pavyzdys

Norėdami perjungti svetainės puslapius į vieną ar kitą kalbą, naudojamos įvairios parinktys, tačiau, jei kalbos parinkiklis vykdomas piktograma, sprendimas naudojant šabloną gali atrodyti taip:

Akivaizdūs trūkumai sprite

Visų pirma, tai daug darbo jėgos ir kruopštumasprocesas. Vienas dalykas - supjaustyti dizainą į mažus gabalėlius, kita - surinkti vieną nuotrauką iš daugybės mažų. Taikykite drobės idėją ir įdėkite ant jos visus vaizdus, ​​naudojamus svetainėje, visiškai beprasmiška.

Net naudojant CSS sprite generatorius, sunkumainegalima išvengti, ypač kai reikia pertvarkyti svetainės dizainą. Į judesį įdėkite keletą dešimčių vaizdų - tai nėra elementų masyvas, grafika yra grafika, paprastai ji paprasčiausiai rodoma ekrane, o ne surūšiuota į kodą kaip masyvas ieškant norimo elemento.

Standartas ir kiti kūrėjai patvirtina,Kadangi spritai yra susiję su taisyklėmis, tai yra tik fono paveikslėlis, o ne svetainės elementas. Puslapio elementų grafinė sudėtinė dalis turėtų manipuliuoti img žymėmis.

Šiuo atveju sunku susitarti dėl paprasto pagrindo, kad fonas nebuvo suvokiamas kaip bendrasis pagrindas. Tai tik fonas, nesvarbu, kas - miniatiūrinis elementas arba visas puslapis.

Tuo tarpu tai yra grafinis komponentas, kuris yra rimta kliūtis naudojant "sprites".

Protingas naudojimas

Nepaisant to, kad terminai "interneto technologijos"ir "aukšta technologija" paprastai laikoma sinonimu, iš tikrųjų tai yra daug darbo jėgos ir kai kuriose vietose labai netechnologinis darbas. "Sprites" nėra ypač aiškiai atskirtos nuo kitų kliūčių, pvz., Grynas "JavaScript" ar PHP programavimas ar būtinų funkcijų kūrimas, svetainių pildymo procesų nustatymas arba, pvz., Archyvų fono kopijų kūrimas.

Naudojamų sistemų galia ir perspektyvossvetainių valdymas kartais sumažėja dėl jų praktinio pritaikymo niuansų, o rankinis išteklių kūrimas paprastai įpareigoja 1001-ą kartą perrašyti vieną ar kitą savo algoritmus.

Kalbant apie tai, svarbu tiesiog protingairibos naudoti nieko, kuri suteikia šiuolaikišką priemonę. Ar ne per daug nori naudoti vieną prieš kitą, o auksinė taisyklė į svetainę pastato suformuluota taip: jums reikia galvoti ne apie tai, kaip kuo greičiau perduoti darbą, kaip įmanoma, ir kaip jį vykdyti taip, kad tuo atveju nenumatyto situacija gali būti greitai išspręstas bet kokia problema.

</ p>>