CSS sprites: kuvaus, perustekniikat ja hyödylliset suositukset

Nykyaikaisen sivuston tulisi olla nopeaa, kaunista ja tehokasta sekä kehittämisvaiheessa että yhteistyössä asiakkaan kanssa. Yleensä jokainen yritys, joka luo Internet-resursseja, pyrkii olemaan oma henkilö, houkuttelee kävijöitä sen suunnittelun, tyylin, luotettavuuden, nopeuden ja muiden ominaisuuksien mukaan.

Spritsien hyödylliset ominaisuudet

CSS-spritsien avulla voit parantaa sekä sivuston laatuominaisuuksia että yrityksen kuvaa. Itse asiassa se ei ole liian monimutkainen kehittäjäväline, mutta se todella nopeuttaa resurssien kehityksen prosessia ja niiden nopeutta.

Koodia on muun muassa yksinkertaistettu ja tietyssä mielessä siirrettävä muille resursseille, jotka CSS-spritsien käytön ansiosta tulevat samankaltaisiksi läheisiksi sukulaisiksi, koska samat graafiset ideat, Tunnisteiden rakenne ja sisältö.

Tavallisessa verkkosivuston kehittämisprosessissa sinun on tehtävä paljon kuvia. Usein näissä kuvissa on hyvin vähän tilaa, mutta ne ovat aina erillinen tiedosto. Minkä tahansa palvelimen käyttöjärjestelmässä tiedoston avaaminen on aikaa vievää, mutta se ei poikkea merkittävästi ajankohdasta, kun tiedosto avataan 13 x 13 pikselin kohdalla ja kun 16 kuvaa 52 x 52 pikselin tiedosto avataan. Ensimmäisessä tapauksessa sinun on oltava 16 tiedostoa ja 16 avointa / lukemaa, toisessa tapauksessa 16 kuvaa saadaan avaamalla vain yksi tiedosto.

Jos luot tällaisten tiedostojen sarjoja aiheen mukaan (vaakasuorat valikot, valintaikkunat, laskinpainikkeet, kalenterit ...), niin tällaisia kuvia voi siirtää matkapuhelimesta sivustolta sivustoon.

Kolikon kääntöpuoli

Kun on olemassa faneja, jotka ovat liian nopeita suosittelemaan CSS-spritsien käyttöä, muista löytää ne, jotka tutkivat huolellisesti kysymystä ja osoittavat älykkäästi, että on aina käytännöllisempää työskennellä vanhanaikaisella tavalla.

Itse asiassa, jos 16 kuvatiedostojen sijaan on yksi tiedosto 16: sta kuviosta, sen sijaan 16 avaus / lukemistoiminnosta tulee olemaan yksi. Mutta temppu on se, että jokaisella selaimella on välimuisti ja se lataa jotain vain viimeisenä keinona. Lisäksi sivun elementit ladataan yleensä sivun ensimmäistä kertaa, ja vain muutokset ladataan myöhemmin.

Toinen näkökohta. Yleensä kuvia leikataan eikä liitetty yhteen tiedostoon. Jotenkin tekniikka on kehittynyt niin, on parempi sanoa, tapana. Suunnittelija luo asettelun ja asettelu käyttää osiinsa: hienosäädettyjä osia ulkoasusta. Spritsien vastustajat uskovat, että useiden kuvien kerääminen yhdessä tiedostossa on aikaa vievä tehtävä, mikä lisää sivun yleistä kehitysaikaa.

On myös kehittäjiä, jotka pitävät HTTP-pyyntöjen määrää ja optimoivat sen, uskoen, että tämä toiminta on käytännöllisempi kuin CSS-spritsejä.

Kaikki mainitut hetket ovat epäilemättä tärkeitä, mutta paljon tärkeämpää on mielipide: kaiken olisi sovellettava kohtuullisin rajoin.

Automaatio ja CSS-spritit

Jos CSS-sprite-generaattorin käyttämisestä ja oikean osan suunnittelusta ei ole mitään järkeä, ei ole mitään tekemistä siitä, että tämä osa muodostetaan tavalliseen tapaan. Jos tavanomainen tekniikka johtaa tarpeeseen leikata satoja kuvia, on parempi luonnosta JavaScript-toiminto, joka tarvittaessa valitsee vaaditun alueen spriteistä ja näyttää sen.

On kuitenkin huomattava, että kaksi tai kolme elementtiä tai kymmenkunta tai kaksi spriteä ei mene mihinkään, mutta kun spriteissä on satoja piirustuksia, JavaScript-toimintoa ei ole varmasti ongelmallista, mutta kuinka paljon ponnisteluja tarvitaan luomaan Tällainen suuri sprite ... Lisäksi liima-kuvia on yksi asia, sprite generaattori CSS tekee sekä halutun kuvan että CSS-koodin sille, ei ole väliä kuinka monta elementtiä sprite on. Ongelmia ilmenee, kun suunnittelet sivuston uudelleen, muutat muotoilua, poistat ja lisäät uusia kohteita. Kun kehität spriteä, sinun ei pitäisi miettiä, miten sitä käytetään, mutta miten sitä muutetaan myöhemmin.

Spritsien käytön aiheet

Toisin kuin CSS-ohjelmointikielet, tämä on suhteellisen staattinen sääntöjoukko, jonka kaikki dynamiikka määräytyy sääntöjen ja niiden funktionaalisen sisällön mukaan (standardin mukaan). Kun otetaan huomioon joukko spritsejä, HTML, CSS, voit luoda teemakuvia kirjastoja, jotka toimivat toiminnallisina.

Esimerkiksi valikon lopullinen versio: yksinkertaisesti yhdistämällä muutamia css-sääntöjä, js-toimintoja ja useita HTML-divs-koodeja, voit saada tuloksen. Kuvan spriteen sisällön muuttaminen voi muuttaa tämän valikon ulkoasua. Määritä toimintoelin, voit säätää toimintoja.

Siinä ilmenee oopperasuunnittelun erikoisversio (OOP). Epäilemättä se on kirkas idea, mutta se ei erottele liian kirkkaita muiden OOP-murteiden taustalla todellisissa kielissä. Se oli vasta 90-luvun alussa, jolloin OOP elvytti ja alkoi saada epätavallisen nopeasti paikan auringossa, se oli konkreettinen ajatus ja konkreettinen ilmaisu, ja nykyään kehittäjät ovat keksineet niin monta murteita kuin ei ole moninaista venäjänkieltä.

Lelut - kultakaivos spritsejä varten

Jännitys ja ohjelmointi ovat yhteensopimattomia käsitteitä, mutta ohjelmoijan kirjoituspeleiden pätevyys poikkeaa huomattavasti yhteistä (yksinkertaista koodausta) ja luovaa (uusien tekniikoiden suunnittelu ja kehittäminen, ideoita).

Pelisuunnittelu vetoaa vektorigrafiikkaan, koska SVG sprite + CSS-sääntöjen yhdistelmä ei ole pelkästään kysyntä vaan myös usein kehittämän kohteen (sivuston) kohde muuttuu todellisen pelin kohteeksi. Erityisesti suosittu peli Counter Strike koskee spritsejä, sumut ovat melko merkityksellisiä synonyymejä: räjähdys, veri, näkö ...

Ilmaisu "install sprites css v34" aloittajalle on melko normaalia ja ymmärrettävää. Spriteillä ei ollut vain käyttökelpoisuutta sovelluksessa niiden pohjimmiltaan, vaan myös muodostivat kapean kapasiteetin, joka tuli täysin toimivaksi, helposti saatavaksi ja ymmärrettäväksi tiettyyn kuluttajapiiriin.

CSS sprites: esimerkki

Jos haluat vaihtaa sivuston sivuja tietylle kielelle, käytetään monenlaisia vaihtoehtoja, mutta jos kielivalitsin toteutetaan kuvakkeena, sprite-ratkaisu voi näyttää tältä:

Spritsien ilmeiset haitat

Ensinnäkin se on työläs ja tarkka prosessi. Yksi asia on leikata muotoilu pieniksi paloiksi, toinen on kerätä yksi kuva monista pienistä. Sovella kangasjulkaisua ja levitä sille kaikki sivustossa käytetyt kuvat, aivan turhaksi.

Jopa käyttämällä CSS sprite generaattoria, vaikeuksia ei voida välttää, varsinkin kun sinun on redesign sivuston suunnitteluun. Aseta spriteeseen muutamia tusinaa kuvia - se ei ole joukko elementtejä, grafiikka on grafiikkaa, se yleensä näkyy vain sen sijaan, että se lajitellaan koodiksi taulukonä halutun elementin etsimiseksi.

Standardi ja seuraavat kehittäjät väittävät, että koska spritit liittyvät säännön taustaan, tämä on yksinomaan taustakuva, ei osa sivustosta. Sivunelementtien graafisen osan tulisi manipuloida img-tunnisteita.

Tämän vuoksi on vaikea päästä yksimielisyyteen siitä, että tausta ei ole yleinen tausta. Se on vain tausta, ei väliä mitä - pienoiselementti tai koko sivu kokonaisuudessaan.

Sillä välin se on graafinen komponentti, joka on vakava este spritsien käytössä.

Kohtuullinen käyttö

Huolimatta siitä, että termejä "Internet-teknologia" ja "huipputeknologia" pidetään synonyymeinä, itse asiassa se on työvoimavaltaista ja joissakin paikoissa erittäin ei-teknistä työtä. Spriteet eivät erottele toisia pullonkauloja, kuten puhtaan ohjelmoinnin JavaScript- tai PHP-ohjelmissa, tai kehittääkseen tarvittavaa toimintoa, konfiguroi prosesseja, joiden avulla sivustot täyttävät tiedot, tai esimerkiksi luoda arkistokokoja.

Käytettyjen sivustonhallintajärjestelmien voima ja perspektiivit tasoittuvat ajoittain niiden käytännön soveltamisen vivahteilla, ja resurssien manuaalinen kehitys johtaa pääsääntöisesti yhden tai toisen oman algoritmiensa uudelleenkirjoittamiseen 1001. kertaa.

Edellä sanotun mukaisesti on tärkeää yksinkertaisesti käyttää kohtuullisissa rajoissa kaikkea, mitä moderni väline tarjoaa. Älä ole liian innokkaita käyttää jotakuta toiselle vahingoksi ja kultainen sääntö sivuston rakentamisessa on tämä: ei pitäisi ajatella, miten luovuttaa työ mahdollisimman pian, mutta miten se toteutetaan niin, että mikä tahansa odottamatonta tilannetta voidaan nopeasti ratkaista Kaikki ongelmat.