HTML and CSS Reference
In-Depth Information
Replacing the Symbol with Your Own Image
h e
list-style-image
property allows you to replace the symbol with an image of your own. Although it works
with both ordered and unordered lists, the same image is used for every item. So, in practical terms, it makes
sense only with unordered lists.
As explained earlier in this chapter, displaying the symbol in a diff erent color from the text involves wrapping
each list item in a
<span>
. Th e alternative is to use
list-style-image
to replace the default with a custom image.
In replace_bullet.html, an image of a red square is used as the symbol for an unordered list like this:
ul {
list-style-image: url(images/redsquare.png);
}
As Figure
10-9
shows, the image is used in place of the default
disc
. You won't be able to see the diff erent
color in the printed book, but you can check the le in the ch10 folder. Th e image used in this example is
16px
×
14px
, which produces a larger square than the default bullet. It's an odd size because a 2-pixel transparent
border was added to one side to move it away from the text. As a general rule, the height of the image shouldn't
exceed the font size of the text.
Figure 10-9.
Using a custom image solves the problem of using a diff erent color from the text
When using a custom image, it's recommended that you leave
list-style-type
at its default value (or
choose another one), rather than setting it to
none
. Th is ensures that a symbol is still displayed even if the image
is missing or the user is browsing with images turned of . To make sure a square is used instead of a disc, amend
the previous style rule like this:
ul {
list-style-image: url(images/redsquare.png);
list-style-type: square;
}
Embedding an Encoded Image in the Style Sheet
A disadvantage of using an image to replace bullets in unordered lists is that the image needs to be downloaded
by the browser. Although redsquare.png in the preceding example is only 216 bytes, it adds an extra request to the
server. With only one image, it's not a signicant burden, but it can begin to add up if you use many images.
In Chapter
8
, you learned about CSS sprites as a technique for reducing the number of server requests for
small images. Unfortunately, you can't use a CSS sprite with
list-style-image
. However, you can use a
data URI
(Uniform Resource Identier). Th is is a version of the image encoded as text using an encoding system known as
base64
. It's suitable for only small images, but is supported by all browsers in widespread use except IE 7 and earlier.
