HTML and CSS Reference
In-Depth Information
FIGURE 6.13
CSS sprites in action.
as you are displaying a different part of the image in each case. The result is shown
in
Figure 6.13
.
MAKING YOUR ICONS MORE BULLETPROOF
In the examples you've seen so far, you have a solid implementation that works
well. The only trouble at this point is that if you are using percentages for your
container widths; the icon can start to look misplaced or become too big for the
containers when the screen gets narrower. To remedy this, you can adopt a few
different approaches, either separately or in combination:
Use
min-width
to limit the shrinking of the containers to an acceptable
amount.
Use
Media Queries
to serve up some different styling at smaller screen
widths, for example, a smaller version of the image used for the icon. You'll
learn more about media queries in Chapter 8.
Use
background-size
to constrain the icon to a particular size, proportional
to the container.
The solution I considered for my icon set (see basic-icons-background-size.
html) incorporates a combination of
min-width
and
background-size
. Let's go
through it now: You'll first set a
min-width
on the list:
ul {
.
: ;
}
