Jo site rapper meitsje mei CSS-sprites

spritemaster web

Ik skriuw op dizze side nochal wat snelheid oer siden en it is in wichtich ûnderdiel fan 'e analyze en ferbetteringen dy't wy oan' e siden fan ús kliïnten oanbringe. Utsein fan ferpleatse nei krêftige servers en gebrûk fan ark lykas Ynhâldferlieningsnetwurken, d'r binne in oantal oare programmeartechniken dy't de gemiddelde webûntwikkelder kin brûke.

De standert foar it orizjinele Cascading Style Sheet is no mear dan 15 jier âld. CSS wie in wichtige evolúsje yn webûntwikkeling om't it ynhâld skiede fan ûntwerp. Sjoch nei dit blog en alle oare en de mearderheid fan it stylingferskil is gewoan yn it taheakke stylblêd. Stylblêden binne ek wichtich, om't se lokaal wurde opslein yn in cache yn jo browser. As resultaat, as minsken trochgean mei it besykjen fan jo side, downloade se net elke kear in stylblêd ... allinich de pagina-ynhâld.

Ien elemint fan CSS dat faak underutiliseare is CSS Sprites, As in brûker jo webside besiket, kinne jo miskien net beseffe dat se net gewoan ien fersyk foar de side dogge. Sy meitsje meardere fersiken... in fersyk foar de pagina, foar alle stylblêden, foar alle taheakke JavaScript-bestannen, en dan elke ôfbylding. As jo ​​in tema hawwe dat in searje ôfbyldings hat foar rânen, navigaasjebalken, eftergrûnen, knoppen, ensfh. ... moat de browser elk ien tagelyk oanfreegje fan jo webserver. Fermannichfâldigje dat mei tûzenen besikers en dat kinne tsientûzen oanfragen oan jo server wêze!

Dit fertraget jo side wer. IN stadige side kin in dramatyske ynfloed hawwe op 'e belutsenens en konversaasjes dat jo publyk makket. In strategy dy't grutte webûntwikkelders brûke is it pleatsen fan alle ôfbyldings yn ien bestân ... neamd a sprite, Yn stee fan in fersyk te meitsjen foar elk fan jo bestânôfbyldings, hoecht der no mar ien fersyk te wêzen foar de single spriteôfbylding!

Jo kinne lêze oer hoe't CSS Sprites wurkje by CSS-Tricks or Smashing Magazine's CSS Sprite peal. Myn punt is net om jo sjen te litten hoe se te brûken, gewoan om jo te advisearjen om te soargjen dat jo ûntwikkelteam se opnimt yn 'e side. It foarbyld dat CSS Tricks leveret toant 10 ôfbyldings dy't 10 oanfragen binne en tafoegje oant 20.5Kb. As sammele yn ien sprite, is it 1 fersyk dat is 13kb! De fersyk en antwurdtiden foar 9-ôfbyldings binne no fuort en de hoemannichte gegevens wurdt fermindere mei mear as 30%. Fermannichfâldigje dat mei it oantal besikers op jo side en jo sille wat boarnen echt ôfskeare!

globalnavDe Appel navigaasjebalke is in geweldich foarbyld. Elke knop hat in pear steaten ... of jo no op 'e pagina binne, of fan' e pagina, of as jo oer de knop mûzje. CSS definieart de koördinaten fan 'e knop en presinteart de regio fan' e juste steat foar de brûkersbrowser. Al dizze steaten binne tegearre yn ien grafyk ynstoart - mar werjûn regio foar regio lykas oantsjutte yn it stylblêd.

As jo ​​ûntwikkelders fan ark hâlde, binne d'r in ton dy't se kinne helpe, ynklusyf de Kompas CSS-kader, RequestReduce foar ASP.NET, CSS-Spriter foar Ruby, CSSSprite-skript foar Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Project Fondue's CSS Sprite Generator, Sprite Master Web, En de SpriteMe Bookmarklet.

Skermprint fan Sprite Master Web:
spritemaster web

Martech Zone brûkt gjin eftergrûnbylden yn syn tema, dat wy hoege dizze technyk op dit stuit net te brûken.

2 Comments

  1. 1

    Wachtsje ... is de heule kolleksje net in "ôfbylding" (as in "flak"), en elke subôfbylding (of subgroep fan ôfbyldings yn 't gefal fan animearre of ynteraktyf feroarjende) in "sprite"?

    Miskien binne dingen omneamd sûnt de lêste kear dat ik dit soarte dingen behannele, mar ik koe beëdigje dat de Sprite it elemint wie dat úteinlik werjûn waard, net de grutte gegevens tafel wêr't it fan waard lutsen.

    ("Sprite tafel" ... wie it net it?)

    • 2

      Wy prate miskien twa ferskillende dingen, Mark. Mei CSS kinne jo yn prinsipe oantsjutte hokker 'diel' fan in ôfbyldingbestân te sjen wurdt mei koördinaten. Hjirmei kinne jo al jo ôfbyldings yn ien 'sprite' pleatse en dan gewoan wize op it gebiet dat jo wolle werjaan mei de CSS.

Wat tinksto?

Dizze side brûkt Akismet om spam te ferleegjen. Learje hoe't jo kommentaargegevens ferwurke wurde.