Artiklar » (X)HTML/CSS » CSS-sprite

 
 

CSS-sprite

Författare: mactommy
Datum: den 24 juli 2009
Antal lästa: 3600
Ej stjärnmärkt

Har du hört talas om CSS-sprite men inte kommit fram till vad det är? Tänkte köra igenom en liten artikel som förklarar vad det är och hur man kan använda det på ett sätt.

CSS-sprite är möjligheten att utnyttja olika delar i en bild och minska förfrågningarna mot servern. Har vi en bild med massa småbilder, så begär vi endast att få ut en bild ifrån servern. Vi använder CSS för att bestämma hur stor del av bilden vi vill ta del av och med hjälp av förskjutna bakgrundspositioner så kan vi justera och visa en valfri del i bilden.

Låt oss säga att vi har en sida som har flera språkmöjligheter. Om vi har 3st olika språk så kommer vi att begära att få ta del utav 3st bild förfrågningar till servern, en för varje flagga (normalt förfarande). Varje förfrågning tar en viss tid och bilderna kan sakteligen rulla upp beroende på hur snabbt servern svarar och hur många bilder som skall visas. Genom att skapa en bild med flera flaggor så begär vi ut endast en bild ifrån servern och får således alla flaggor på plats samtidigt.

Vi börjar med att göra en bild med flaggorna. Nu har jag valt att inte enbart placera de tre flaggorna som artikeln är byggd för, utan lagt till ytterligare några flaggor i bilden för framtida bruk. Vi har då en bild med 9st flaggor med en total storlek av 2kB.
Klicka för att se bilden i full skala...


Jag kommer att välja att placera flaggorna i länk-taggen som en bakgrundsbild, det innebär att jag inte behöver använda både länktagg och bildtagg. På det sättet så minskar jag ner HTML-koden som laddas in och låter CSS-koden bli något större eftersom den cachas på clienten.

Vi börjar med våra länkar, Kod:
<a href="?sprak=se" class="se" title="Svenska">Svenska</a>
<a href="?sprak=uk" class="uk" title="Engelska">Engelska</a>
<a href="?sprak=fi" class="fi" title="Finska">Finska</a>



Sen så skapar vi våran CSS-class för våra länkar, Kod:
a
{
  background-image: url(flag.gif);
  background-repeat: no-repeat;
  display: inline-block;
  margin: 0;
  padding-left: 15px;
}

På varje länk så kopplar vi bilden med våra flaggor och talar om att bakgrunden inte ska repeteras. "padding-left" är enbart så att flaggorna syns till vänster om texten.

Sen när vi är klar med det så flyttar vi bakgrundspositionen i våra classer som ska visa rätt flagga vid rätt land, Kod:
.se
{
  background-position: 0px 5px;
}

.uk
{
  background-position: 0px -10px;
}

.fi
{
  background-position: 0px -106px;
}


Jag har nu påvisat ett sätt att använda CSS-sprite på. Det finns flera sätt att lägga upp detta på i CSS:en och allt beror på hur sidan är uppbyggd. Detta upplägget ger en lite CSS-kod, men kommer att trassla till det om man inte är van med CSS och dess uppbyggnad så att man kan styra det med hieraktisk CSS alt. extra class-namn på valda länkar.

CSS-sprite går följdakteligen att placera på alla html-taggar som kan hantera bakgrundsbilder. Fördelen med att placera bildvisningen i CSS:en och inte i HTML-koden som en <img>-tagg, är att vi kan styra detta om vi vill göra en egen print.css för utskrift eller då bespara mobiltelefon-surfarna att hålla ner mängden info som ska skickas över. Vi kan även låta en designer göra en ny design av sidan och låta denne ta fram nya flaggor eller låta bli att visa dessa mellan olika teman, utan att göra något i originalkoden på sidan.

Lycka till med CSS-sprite...
 
     

  » Logga in  
 
Användarnamn

Lösenord

 
     

  » Bli medlem  
  Bli medlem på ASPsidan!  
     

     
  Microsoft  
     

  » Partners  
  Comsolvia  
     
  » ANNONS  
  ingen annons än  
     

  » Senast online  
  Endast för inloggade  
  Antal inloggade: 1  
     

Copyright © 2007 www.ASPsidan.se
ingen sponsrar längre ASPsidan med Dedikerad Server
ASPsidan RSS
   
 XHTML / CSS
Det tog 0,0625 sekunder att ladda sidan