Targeting Styles with Media Queries - Beginning CSS3 - page 391

Setting Resolution/Pixel Density for Background Images
As so often happens with new developments in web technology, the need to specify pixel density emerged before
the specification had stabilized. So, WebKit-based browsers, which are prevalent on modern mobile devices,
came up with a nonstandard media feature called -webkit-device-pixel-ratio for use in media queries. It also
has min- and max- equivalents: -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio . It
takes as its value a number that acts as a multiplier. To specify an Apple retina display, the multiplier is 2 .
Other browsers followed suit with different browser-specific prefixes, but slightly different syntax. Not only
was this confusing, the feature name is painfully long. What's more, the list of official media features in
Table 17-1 already includes resolution , which is much easier to type and remember. The original idea was to
specify resolution in terms of dots per inch ( dpi ) or dots per centimeter ( dpcm ). Because 1px is defined as
1/96 of an inch, it meant multiplying the pixel ratio by 96 to get the correct value for dpi . More confusion. . .
Thankfully, sanity prevailed, and a new measurement was introduced: dots per pixel ( dppx ). So, to specify
styles for an Apple retina display, all that should be necessary is this:
only screen and (min-resolution: 2dppx) {
/* Retina display styles */
}
However, it's likely to take some time before browsers recognize dppx as a valid unit of measurement. The
most reliable cross-browser way of specifying a minimum pixel ratio of 2 is to use the nonstandard WebKit
property, as well as resolution with dppx :
only screen and (min-resolution: 2dppx),
screen and (-webkit-min-device-pixel-ratio: 2) {
/* High-resolution styles */
}
To include Android high-resolution displays, change the values like this:
only screen and (min-resolution: 1.5dppx),
screen and (-webkit-min-device-pixel-ratio: 1.5) {
/* High-resolution styles */
}
When using a larger image for high-resolution displays, you also need to adjust the size of the background
image using the background-size property (see “Setting the Size of Background Images” in Chapter 8). Set the
actual size you want in CSS pixels with the width followed by the height. For example, if your high-resolution
image is 800 × 600 pixels, and the standard one is 400 × 300, resize the high-resolution one by adding this to its
style rule:
background-size: 400px 300px;
Using a High-resolution CSS Sprite
If your background images are combined in a CSS sprite, all the dimensions in the high-resolution sprite need
to be an exact multiple of those in the standard sprite. For example, the CSS sprite in Chapter 8, icons.png, is
35 × 179 pixels, and the icons are 40 pixels apart. The high-resolution version used in sprites_hires.html in the
ch17 folder is twice the size: 70 × 358, with the icons 80 pixels apart. The dimensions of the individual icons are
also double the original size.