HTML and CSS Reference
In-Depth Information
To demonstrate the difference between standard and high-resolution background images, the file displays
two identical sets of links. Both use the same styles, but those intended for high-resolution display also use a class
called
hires
.
The
hires
class resets the
background-size
property of the sprite to the same size as the standard one. As
a result, the 80-pixel gap in the high-resolution sprite is halved to 40 pixels when the browser displays it. So, the
same
background-position
offsets apply to both sprites. Apart from the addition of the high-resolution media
query, the styles in sprites_hires.html are identical to sprites.html in the ch08 folder. The styles look like this:
.icons {
background-image: url('images/icons.png');
background-repeat: no-repeat;
}
.rss {
padding-left: 30px;
}
.phone {
padding-left: 25px;
background-position: left -40px;
}
a[href^='mailto:'] {
padding-left: 30px;
background-position: left -80px;
}
a[href$='.pdf'] {
padding-right: 24px;
background-position: right -120px;
}
a[href^="http://"] {
padding-right: 25px;
background-position: right -160px;
}
@media only screen and (min-resolution: 2dppx), screen and
(−webkit-min-device-pixel-ratio: 2) {
.icons.hires {
background-image: url(images/icons_large.png);
background-size: 35px 179px;
}
}
Figure
17-8
shows how the standard and high-resolution icons look on a retina display iPad. Because the
icons are small, the difference isn't immediately visible, but it's markedly noticeable when they're scaled up.
