CSS SPRITE

wróć

CSS SPRITE

Wiadomość dodano 2010-01-06 14:44:25

 Aby przyśpiszyć działanie strony WWW, powinniśmy ograniczyć ilość żądań HTTP podczas ładowania strony. Takie żądanie jest wywoływane za każdym razem gdy przeglądarka chce np. pobrać obrazek osadzony w kodzie HTML. W przypadku użycia wielu małych obrazków (ikonek) na stronie może to być kłopotliwe. Na stronie biura rzeczy znalezionych zastosowałem metodę „CSS Sprite”, polegającą na umieszczeniu na jednym obrazie wielu ikonek a następnie odwoływanie się do niego poprzez umiejętne operowanie dyrektywą css „background-image

CSS Sprite


Aby jakikolwiek znacznik XHTML jako tło posiadał obrazek przestawiający wizerunek użytkownika (3 rząd – 3 kolumna), w pliku css należy nadać mu dyrektywę podobną do tej z poniższego listingu.

.user {

    background-image: url(../images /sprite.png);

      width: 18px;

      height: 18px;

      float: left;

      margin-right: 2px;

      background-position: -50px -55px;

}

 
„CSS Sprite” jest jedno z wielu bardzo przydatnych technik przyśpieszających działanie stron www. O jej jakości może świadczyć fakt, że stosuję ją największy polski portal informacyjny Onet.pl.

Copyright © 2008-2010 dean26.pl.