CSS sprite: opis, osnovne tehnike in koristna priporočila

Sodobna spletna stran mora biti hitra, lepa in učinkovita tako v fazi razvoja kot pri delu s stranko. Praviloma vsako podjetje, ki ustvarja internetne vire, želi imeti svoj obraz, privablja obiskovalce s svojo zasnovo, slogom, zanesljivostjo, hitrostjo in drugimi kvalitetami.

Koristne lastnosti duhov

CSS-sprite omogoča izboljšanje kvalitativnih značilnosti mesta in podobe podjetja. V bistvu, to ni zelo zapleteno orodje za razvijalca, vendar resnično pospešuje proces razvoja virov in hitrost njihovega dela.


Med drugim je koda poenostavljena in v nekem smislu postane znosna za druge vire, ki so zaradi dejstva, da je CSS sprite uporabljen, podobni bližnjim sorodnikom, saj lahko uporabite iste grafične ideje, slog oblikovanja. elementi dialoga, struktura in vsebina oznak. V normalnem procesu razvoja spletne strani morate narediti veliko slik. Zelo pogosto te slike zavzemajo zelo malo prostora, vendar so vedno ločena datoteka. Za vsak operacijski sistem katerega koli strežnika je odpiranje datoteke dolgotrajno delo, vendar se v času, ko se datoteka odpre 13 do 13 slikovnih pik in ko se odpre datoteka s 16 slikami, 5252 slikovnih pik, ne bo bistveno razlikovala. V prvem primeru je potrebno imeti 16 datotek in 16 operacij odpiranja /branja, v drugem primeru pa 16 slik, ki so rezultat odpiranja samo ene datoteke. Če ustvarjate nabor takih datotekpo predmetu (vodoravni meni, pogovorni obrazci, gumbi kalkulatorja, elementi koledarja), se lahko taki agregati slik prenesejo iz mesta v mobilni.


Obratna stran medalje

Kadar oboževalci preveč živo priporočajo uporabo sprite CSS, so nujno tisti, ki skrbno preučijo problem in jasno kažejo, da je vedno bolj praktično delati na star način . Če namesto 16 slikovnih datotek obstaja ena datoteka s 16 slikami, bo namesto 16 operacij odprtje /branje eno. Ampak trik je v tem, da ima vsakdo predpomnilnik brskalnika, in naloži vse kar je v skrajnem primeru. Poleg tega se elementi strani običajno naložijo ob prvi obiskani strani, nato pa se naložijo samo spremembe.
Še en vidik. Ponavadi so slike izrezane, ne lepljene v eno samo datoteko. Tehnologija se je nekako razvila in bolje, po meri. Oblikovalec ustvari postavitev, postavitev uporablja njegove dele fino narezanih delov postavitve. Nasprotniki duhov verjamejo, da je zbiranje več slik v eni datoteki dolgotrajen pouk, ki poveča celoten čas razvoja strani. Obstajajo tudi razvijalci, ki upoštevajo in optimizirajo število zahtev HTTP, glede na to, da je ta lekcija bolj pragmatična kot CSS sprite. Vse te točke so seveda pomembne, toda veliko več je ideja: vse bi bilo treba uporabiti v razumnih mejah.

Avtomatizacija in CSS sprite

Če ni smisla izvajati generatorja CSS sprite in dobiti pravega \ tdel oblikovanja, potem nič ne preprečuje, da se ta del ustvari na običajen način. Če običajna tehnologija vodi v potrebo po zmanjšanju stotin slik, je bolje, da vržemo javascript funkcijo, ki bo po potrebi izbrala regijo iz sprita in jo prikazala.
Vendar pa je treba opozoriti, da je sprite dveh ali treh elementov ali ducat drugih - kjer ni šel, ampak, ko v primeru več sto risb, nato pa s pisanjem problemov javascript funkcijo, seveda, ne bo prišlo, ampak koliko dela Poleg tega, lepljenje slik - ta, CSS sprite generator naredi želeno sliko, in CSS kodo je pod njim, je popolnoma enako, koliko bodo komponente sprite. Težave se bodo pojavile pri obdelavi spletnega mesta, spreminjanju zasnove, brisanju in dodajanju novih predmetov. Pri razvoju sprite ne smete razmišljati o tem, kako ga uporabiti, temveč kako ga pozneje spremeniti.

Tematska korist od uporabe duhov

Za razliko od programskih jezikov CSS je to sorazmerno statičen sklop pravil, vsa njegova dinamika je določena s pravili in njihovo funkcionalno vsebino (v skladu s standardom). Glede na sprite, HTML, CSS v kompleksu lahko ustvarite tematske knjižnice.
Na primer, dokončana menijska možnost: preprosto povezovanje večih css-pravil, js-funkcij in vključitev več HTML-kod v kodo, lahko dobite rezultat. Spreminjanje vsebine podobe sprite lahko spremeni videz tega menija. Po izpopolnitvi telesa funkcije lahko prilagodite funkcijo. To bo neke vrste variantaObjektno usmerjeno programiranje (OOP). Nedvomno bo to živa ideja, vendar ne bo preveč živo izstopala v ozadju drugih narečij OOP-ja v realnih jezikih. Šele v zgodnjih devetdesetih letih, ko se je PLO ponovno rodil in postal izjemno hiter, da bi zavzel mesto pod soncem, je predstavljal konkretno idejo in konkretno obliko njegovega izraza, danes pa so razvijalci izumili toliko narečij toliko različnih jezikov.

Igrače - zlato dno za duhove

. Igre na srečo in programiranje so nezdružljivi koncepti, vendar je kvalifikacija programerja, piše igre, se bistveno razlikuje od splošnega (preprostega) in ustvarjalnega (oblikovanje in razvoj novih tehnologij in idej). Game design privlači vektorske grafike, zato kombinacija SVG-sprite + CSS-pravil ni le povpraševanje, temveč se pogosto preoblikuje iz predmeta razvijalca (mesta) v objekt prave igre. Še posebej, priljubljena igra Counter Strike velja za izraze sprite, spray je popolnoma razumeti sinonimi: eksplozija, kri, pogled
Izraz "install sprite css v34" za namensko popolnoma normalno in razumljivo. Sprite je prejel ne samo uporabnost aplikacije v svojem bistvu, temveč je ustvaril tudi nišo, ki je postala popolnoma opremljena, dostopna in razumljiva določenemu krogu potrošnikov.

CSS sprite: primer

Za zamenjavo strani spletnega mesta v en ali drug jezik se uporabljajo različne variante, če pa je izbirnik jezika izveden kot ikona, potem lahko rešitev, ki uporablja duh, izgleda takole:

Očitne pomanjkljivosti sprites

Prvič, to je težaven in natančen proces. Ena stvar je, da zasnovo razrežemo na majhne koščke, drugo pa, da zberemo eno sliko iz številnih majhnih. Uporabite zamisel o platnu in nanj prenesite vse slike, ki so uporabljene na spletnem mestu, popolnoma brezupne.
Tudi z uporabo generatorja sprite CSS se težavam ni mogoče izogniti, zlasti ko gre za preoblikovanje mesta. Postavite na desetine slik v primeru - to ni paleto predmetov, grafika je grafika, običajno preprosto izhod na zaslon, vendar ne brskajte po kodi kot polje v iskanju želenega elementa. Standard in takšni razvijalci trdijo, da je, če je sprite povezan s pravilom ozadja, le slika v ozadju, ne element mesta. Grafično komponento elementov strani je treba manipulirati z img oznakami. S tem se je težko strinjati glede preprostega razloga, da je bilo ozadje malo, ko je bilo zaznano kot splošno ozadje. To je samo ozadje, ne glede na to - miniaturni element ali celotna stran kot celota. Medtem je grafična komponenta sama po sebi resna ovira za uporabo duhov.

Inteligentna uporaba

Kljub temu, da se izraza „internetna tehnologija“ in „visoke tehnologije“ štejeta za sinonimi, je v praksi to delo, ki je delovno intenzivno in včasih zelo netehnološko. Sprite ni posebej izpostavljen drugim ozkim grlom v čistem programiranju javascripta ali PHP-ja, kot tudi pri razvoju potrebne funkcionalnosti, prilagoditvi procesov polnjenja spletnih mest z informacijami ali, na primer, ozadjuustvarjanje arhivskih kopij.
Moč in obljuba uporabljenih sistemov upravljanja mesta včasih izravnata nianse njihove praktične uporabe, ročni razvoj virov pa praviloma vodi k potrebi po 1001. prepisu določenega algoritma. V kontekstu zgoraj navedenega je pomembno preprosto uporabiti v razumnih mejah vse, kar ponuja sodobno orodje. Ne smete biti pretežki, da bi ga uporabili v škodo drugega, in zlato pravilo pri gradnji gradbišča predlaga naslednje: ne smete razmišljati o tem, kako čim prej opraviti delo, temveč kako ga izvesti, tako da je v primeru kakršnekoli nepredvidene situacije mogoče. hitro rešite vsak problem.

Sorodne publikacije