Jo site rapper meitsje mei CSS-sprites

spritemaster web

Ik skriuw op dizze side nochal wat bladsnelheid en it is in wichtich ûnderdiel fan 'e analyze en ferbetteringen dy't wy oan' e siden fan ús kliïnten oanbringe. Neist it ferpleatsen 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 jo side besykje te besykjen, downloade se gjin stylblêd elke kear ... allinich de pagina-ynhâld.

Ien elemint fan CSS dat faak ûnderbenut is, binne CSS Sprites, As in brûker jo webside besiket, kinne jo jo miskien net beseffe dat se net gewoan ien fersyk foar de pagina 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 te sjen hoe't se se brûke, 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 fersiken binne en tafoegje oant 20.5Kb. As sammele yn ien sprite, is it 1 fersyk dat is 13kb! De rûnreis-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 presintearret de regio fan' e juste steat oan 'e brûkersbrowser. Al dizze steaten binne tegearre yn ien grafyk ynstoart - mar regio foar regio werjûn 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 Blêdwizer.

Skermprint fan Sprite Master Web:
spritemaster web

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

2 Comments

  1. 1

    Wachtsje ... is de hiele kolleksje net in "ôfbylding" (of in "fleantúch"), en elke sub-ôfbylding (of sub-groep fan ôfbyldings yn it gefal fan animearre of ynteraktyf feroarjende) in "sprite"?

    Miskien is guod omneamd sûnt de lêste kear dat ik dit soarte dingen behannele, mar ik koe swarde dat de Sprite it elemint wie dat úteinlik werjûn waard, net de tabel mei grutte gegevens wêrfan it waard helle.

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

    • 2

      Wy kinne twa ferskillende dingen prate, Mark. Mei CSS kinne jo yn prinsipe opjaan hokker 'diel' fan in ôfbyldingsbestân jo wolle werjaan mei koördinaten. Hjirmei kinne jo al jo ôfbyldings yn ien 'sprite' pleatse en dan gewoan oanwize nei 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.