Is it possible to use CSS sprites for the list background image? Normally, I render my sprites with CSS like this:
.sprite { background: url(sprite.png) no-repeat top left;}
.sprite-checkmark { background-position: 0 -24px; width: 24px; height: 23px; }
.sprite-comment { background-position: 0 -48px; width: 14px; height: 14px; }
<div class="sprite sprite-checkmark"></div>
Is it possible to use sprites for the bullets of <li> elements? There are CSS properties called list-style-image, and list-style-position, but I'm not sure how to make it work without the existence of properties like list-style-image-width and list-style-image-height as well.
Thanks.
You can also use
and thus get an additional element added to the DOM and give that the background image.
Inside your list item you make an empty span like this:
In your css you style like this
This will help solve the issue of users increasing text size and revealing other sections of the sprite. Hope that can help.
you can use a style in the ul to accomplish the same thing.
List elements background images via sprites have pittfalls, due to variable heights and widths. Think of users that enlarge their font size. Now your imagined li height becomes heigher than expected and your other sprite images become visible. Most useful for list and sprites are when the images are top left aligned. Stacking images diagonally from bottom left to top right gives most chance to prevent other sprite elements to become visible. Left vertical centered images required fixed width of the outer element (example 800px), and the width of the sprite images becomes that width, times the number of different images. 10 different tick marks times 800 px = 8000px wide sprite.
A graphical example:
I think using 'traditional' csssprites is too risky - as pointed out by @Pro Backup.
This was the best compromise for me. You put the image in base64 format and a fallback standard style for [really] old browsers. That way you only have 1 request for css. A typical encoded bullet should only be a couple hundred bytes.
View it: http://jsfiddle.net/VThLq/1/
you can use exactly the same method to do CSS sprites on a List. Here's a quick sample:
And the html
You'll have to remove the default padding/margin with the appropriate CSS styles. Personally i've not seen the list-style-image stuff being used before but know the above is a common solution.