Menu
There are two image sprite techniques. The "classic" version uses the background and the background-position css properties. (as it's described here http://www.alistapart.com/articles/sprites)
The "second" version uses an image tag and its clip css property. ( http://css-tricks.com/css-sprites-with-inline-images/)
My question is that are there advantages of using the "second" version over the "classic" version?
thanks and best, Viktor
905
CSS Sprites are a collection of images that are combined into a single file that an HTML document can access. These images are then called into use within the HTML code to be displayed on the website.
You create a defined area with a <a> with display:block; or <div> and use overflow hidden; to hide overflow and position:relative; . Then you place your <img> image sprite inside absolutely positioned, which is possible since you positioned the parent. Then use :hover on the image to change position.
The use of image sprites is done for two main reasons: For faster page loading since use only single image. It reduce the bandwidth used to load multiple images. This way less data is consume.
Sprites are two-dimensional images which are made up of combining small images into one larger image at defined X and Y coordinates. To display a single image from the combined image, you could use the CSS background-position property, defining the exact position of the image to be displayed.
The difference comes mainly down to the semantics of the document: You should still only use backgrounds for decorative and layout graphics, and only use image tags for graphics that are part of the content of your page.
Remember that pages should still be useful and usable without any CSS: with the second technique, this would mean that your whole sprite-map would be visible (you wouldn't get any clipping) everywhere you used a sprite - very confusing!
The first technique wouldn't show any sprites, but wouldn't be wrong or confusing either.
Whether a graphic is content or decoration gets a bit tricky when you consider things like icons - where sprite techniques are really useful. Personally, I prefer to use background images for icons, as they are adding information to another element (say a link or button control), not elements in their own right.
In short - the image tag based sprites is a bit of a broken technique - I wouldn't use it.
151
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
