CSS Sprites: deskripsyon, teknik debaz ak rekòmandasyon itil

Sou sit la modèn yo ta dwe vit, bèl ak efikas tou de nan etap nan devlopman ak lè k ap travay avèk kliyan an. Kòm yon règ, chak konpayi ki kreye resous entènèt chèche gen pwòp moun li yo, atire vizitè pa konsepsyon li yo, style, fyab, vitès ak lòt kalite.

Pwopriyete itil nan sprites

CSS Sprites pèmèt ou amelyore tou de karakteristik sa yo bon jan kalite nan sit la, ak imaj la nan konpayi an. Nan sans, sa a se pa yon zouti pwomotè trè konplèks, men li vrèman vitès moute pwosesis la pou yo devlope resous, ak vitès la nan travay yo.

Pami lòt bagay, kòd la senplifye epi, nan yon sans, vin pòtab nan lòt resous, ki, gras a itilize nan Sprit CSS, vin menm jan ak fanmi pre, depi ou ka sèvi ak lide yo menm grafik, Estrikti ak kontni nan Tags.

Nan pwosesis la nòmal nan devlope yon sit entènèt, ou bezwen fè yon anpil nan foto yo. Trè souvan foto sa yo pran anpil ti espas, men yo toujou yon dosye separe. Pou nenpòt ki sistèm operasyon nan nenpòt ki sèvè, ouvèti yon dosye se yon operasyon tan konsome, men li pa pral diferan siyifikativman nan tan lè se dosye a louvri pa 13 pa 13 piksèl, ak lè yon dosye nan 16 foto 52 pa 52 piksèl louvri. Nan ka a an premye, ou bezwen gen 16 dosye ak 16 ouvè / li operasyon, nan dezyèm ka a, 16 foto yo pral jwenn nan louvri yon sèl dosye.

Si ou kreye yon seri dosye sou sijè a (meni orizontal, fòm nan dyalòg, bouton kalkilatris kalandriye eleman yo konsepsyon ...) ke imaj sa yo ka konbine genyèn flexibilité te deplase soti nan sit nan sit la.

Fèy la bò nan pyès monnen an

Lè gen fanatik ki twò rapid pou rekòmande lè l sèvi avèk CSS Sprites, asire w ke ou jwenn moun ki ak anpil atansyon etidye kesyon an ak entèlijans montre ke li se toujou plis pratik nan travay nan fason la fin vye granmoun-alamòd.

Vreman vre, si olye pou yo 16 dosye dosye gen yon dosye nan 16 foto, Lè sa a, olye pou yo 16 ouvèti / lekti operasyon pral gen yon sèl. Men, jwe fent la se ke chak navigatè gen yon kachèt, epi li chaje yon bagay sèlman kòm yon dènye rekou. Anplis de sa, anjeneral eleman yo paj yo chaje premye fwa paj la te vizite, epi sèlman yo menm ki chanje yo chaje pita.

Yon lòt aspè. Anjeneral foto yo koupe olye ke kole nan yon sèl dosye. Yon jan kanmenm teknoloji a te devlope konsa, li pi bon yo di, koutim lan. Designer a kreye yon Layout, ak Layout sèvi ak moso li yo: tise byen koupe pati nan Layout la. Opozan nan Sprites kwè ke koleksyon an nan imaj plizyè nan yon sèl dosye a se yon travay tan konsome, ogmante tan an devlopman jeneral nan paj la.

Genyen tou devlopè ki konsidere ak optimize kantite a nan HTTP demann, kwè ke aktivite sa a se pi plis dogmatik pase CSS Sprites.

Tout moman yo endike san dout pwoblèm, men pi plis enpòtan se opinyon an: tout bagay yo ta dwe aplike nan limit rezonab.

Otomatik ak CSS sprites

Si gen nan pa gen pwen nan kouri CSS Sprite dèlko a ak ap resevwa pati nan dwa nan konsepsyon an, pa gen anyen yo sispann jis fè moute pati sa a nan fason nòmal la. Si teknoloji abityèl la mennen nan bezwen an nan koupe dè santèn de imaj, Lè sa a, li pi preferab a trase fonksyon an JavaScript, ki, si sa nesesè, pral chwazi zòn ki nesesè yo nan Sprite a epi montre li.

Li ta dwe remake, sepandan, ke yon Sprite nan de oswa twa eleman oswa yon douzèn oswa de pa ale nenpòt kote, men lè gen dè santèn de desen nan Sprite a, gen sètènman pa pral pwoblèm ak ekri fonksyon an JavaScript, men ki jan anpil efò li pral pran yo kreye Tankou yon Sprite gwo ... Anplis de sa, foto lakòl se yon sèl bagay, CSS a dèlko Sprite fè tou de foto a vle ak kòd la CSS pou li, li pa gen pwoblèm ki jan anpil eleman nan luten la pral. Pwoblèm leve lè ou redresiman sit la, chanje konsepsyon, efase epi ajoute atik nouvo. Lè w ap devlope yon Sprite, ou pa ta dwe reflechi sou fason yo sèvi ak li, men ki jan yo chanje li pita.

Benefis tematik nan lè l sèvi avèk sprites

Kontrèman ak lang yo pwogram CSS, sa a se yon seri relativman estatik nan règleman yo, tout dinamik li yo detèmine pa règ ak kontni fonksyonèl yo (pa estanda). Lè ou konsidere sprites yo nan konplèks la, HTML a, CSS la kapab kreye yon konsepsyon tematik-fonksyonèl nan bibliyotèk la.

Pou egzanp, vèsyon an fini nan meni an: tou senpleman pa konekte yon kèk css-règ, js-fonksyon ak ki gen ladan divès HTML divs nan kòd la, ou ka jwenn rezilta a. Chanje sa ki nan foto a luten, ou ka chanje aparans nan meni sa a. Pa espesifye kò a fonksyon, ou ka ajiste fonksyonèl la.

Jwenn yon Variant spesifik nan objè-oryante pwogram (op). San dout, li pral yon lide klere, men li pa pral kanpe deyò twò klere kont background nan nan lòt dyalòg OOP nan lang reyèl. Li te sèlman nan 90 yo byen bonè, lè OOP la vle fè reviv ak te kòmanse jwenn yon plas trè vit nan solèy la, li reprezante yon lide konkrè ak yon fòm konkrè nan ekspresyon li yo, ak jodi a devlopè yo te vini ak anpil dyalèk ke pa gen yon lang divès lang.

Jwèt - yon m 'lò pou sprites

Eksitasyon ak pwogramasyon yo se konsèp enkonpatib, men kalifikasyon nan pwogram yo ekri pwogramè diferan deman soti nan komen an (senp kod) ak kreyatif (desine ak devlope nouvo teknoloji, lide).

Aparèy konsepsyon jwèt nan grafik vektè, paske konbinezon an nan SVG Sprite + CSS règ se pa sèlman nan demann, men tou, souvan vire soti nan yon objè nan yon pwomotè (sit) nan yon objè nan yon jwèt reyèl. An patikilye, jwèt grèv la Counter popilè aplike nan tèm de Sprites, espre yo se byen sinonim sans: eksplozyon, san, je ...

Fraz "enstale sprites css v34" pou inisye a se byen nòmal ak konprann. Sprites te vin pa sèlman itilite nan aplikasyon nan sans yo, men tou, ki te fòme yon Tanporèman nich ki te vin okonplè fonksyonèl, aksesib ak konprann nan yon sèk sèten nan konsomatè yo.

CSS Sprites: yon egzanp

Pou chanje paj yon sit nan yon sèl oswa yon lòt lang, yo itilize yon varyete opsyon, men si yo seleksyone langaj la nan fòm yon icon, solisyon an lè l sèvi avèk sprite a ka sanble tankou:

Dezavantaj evidan nan Sprites

Premye a tout, li se yon pwosesis travayè ak skrupuleu. Li se yon sèl bagay yo koupe yon konsepsyon an ti moso, lòt la se kolekte yon foto soti nan anpil ti moun. Aplike lide nan twal la epi mete sou li tout imaj yo itilize sou sit la, konplètman initil.

Menm lè l sèvi avèk yon CSS Sprite dèlko, difikilte pa ka evite, espesyalman lè ou gen refè Design sit la. Mete nan luten yon foto douzèn kèk - li pa yon etalaj de eleman, grafik yo se grafik, li anjeneral jis parèt, olye ke Ranje nan kòd kòm yon etalaj nan rechèch nan eleman a vle.

Estanda a ak devlopè sa yo reklamasyon ke depi sprit yo ki gen rapò ak background nan règ, Lè sa a, sa a se yon imaj sèlman background, pa yon eleman nan sit la. Eleman nan grafik nan eleman yo paj ta dwe manipile Tags yo img.

Avèk sa a li difisil a dakò sou baz la senp ki background nan pa te konnen kòm yon background jeneral. Se jis yon background, pa gen pwoblèm sa - yon eleman Miniature oswa paj an antye kòm yon antye.

Pandan se tan, li se eleman nan grafik ki se yon obstak grav nan itilize nan Sprites.

Itilize rezonab

Malgre lefèt ke tèm yo "teknoloji entènèt" ak "teknoloji segondè" yo konsidere kòm synonym, an reyalite li se travay-entansif ak nan kèk kote trè ki pa teknolojik travay. Sprites pa patikilyèman kanpe kont kontni lòt, tankou pwogram pi bon nan JavaScript oswa PHP, oswa an tèm de devlope fonksyonalite ki nesesè yo, konfigirasyon pwosesis yo nan ranpli sit ki gen enfòmasyon, oswa, pou egzanp, kreye kopi background nan achiv.

Pouvwa ak pèspektiv nan sistèm administrasyon sit yo te itilize nan nivo pa nuans yo nan aplikasyon pratik yo, ak devlopman manyèl nan resous, tankou yon règ, mennen nan bezwen nan reyekri youn oswa yon lòt nan algoritm pwòp li yo pou tan an 1001st.

Nan kontèks la nan sa ki te di, li enpòtan tou senpleman yo sèvi ak nan limit rezonab tout bagay ke yon enstriman modèn bay. Pa dwe twò zele pou itilize youn nan detriman yon lòt, ak règ an lò nan bilding sit sa a se: yon sèl ta dwe reflechi sou ki jan nan men sou travay la pi vit ke posib, men sou jan yo ka aplike li pou ke nan evènman an nan nenpòt sitiyasyon enprevi li ka byen vit rezoud Nenpòt pwoblèm.