Putting it All Together - HTML5 with CSS3 - page 392

 device-aspect-ratio : the aspect ratio of the display device, not just the browser window.
 color : the number of bits per color component the device can render, such as 8 or 24 (for 8-bit or
24-bit displays).
 color-index : the number of entries in the color lookup table for the output device, such as 256
for an 8-bit display.
 monochrome : the number of bits per pixel on a monochrome (grayscale) device, or 0 if the device
isn't monochrome.
 resolution : the pixel density of the output device, specified as dots per inch ( dpi ) or dots per
centimeter ( dpcm ).
 orientation : the relative orientation of the output device, either portrait (taller than it is wide)
or landscape (wider than it is tall). This feature does not accept min- or max- prefixes.
 scan : the scanning process for television devices (media type tv ), either progressive or
interlace . This feature does not accept min- or max- prefixes.
 grid : determines if the output device is a grid device (such as a teletype terminal or Braille
reader) or bitmap device (such as a computer or television monitor). This feature's value is a
binary integer: 1 if the device is grid-based or 0 if it isn't.
Of all these features, the ones you'll probably find most useful are those pertaining to viewport width and
device width. With CSS media queries, you can easily alter the layout of your page depending on the
available space.
Media queries are well supported by the current generation of web browsers. Firefox has supported them
since version 3.5, Safari since version 3.2, Chrome since version 4, and Opera since version 9.5. Internet
Explorer implemented media queries more recently, in version 9. Unfortunately there are still a lot of
people around the world using IE 8, 7, or even 6, but those numbers are rapidly dwindling. People using
outdated browsers won't benefit from your media queries so use them wisely and try to ensure graceful
degradation.
CSS3 media queries are at the heart of a design trend dubbed responsive web design .
This term, coined by designer Ethan Marcotte in 2010, is a useful label for the combined
techniques of a liquid grid layout, fluid images, and media queries to tailor the page to
the viewport. You can read up on responsive web design in Ethan's seminal article,
“Responsive Web Design” ( alistapart.com/articles/responsive-web-design/ ).
The Power Outfitters website has a liquid width that can adapt and respond to the size of the viewport.
However, as we mentioned in Chapter 9, this can present some problems in very narrow windows. We've
addressed this for the most part by including min-width and max-width values in our CSS, setting the
minimum and maximum widths of the page, and it can still move freely within those constraints. Even so,
there's a problem with the main navigation bar when the window approaches the minimum width, as you
can see in Figure 10-34. The navigation links wrap to a second line when the window is too narrow for all
of them to fit side by side.