As we noted in the last chapter, CSS3 consists of a number of bolt-on modules. Media queries is just one of these CSS3 modules. Media queries allow us to target specific CSS styles depending upon the display capabilities of a device. For example, with just a few lines of CSS we can change the way content displays based upon things such as viewport width, screen aspect ratio, orientation (landscape or portrait), and so on.
In this chapter, we shall:
- Learn why media queries are needed for a responsive web design
- Learn how a CSS3 media query is constructed
- Understand what device features we can test for
- Write our first CSS3 media query
- Target CSS style rules to specific viewports
- Learn how to make media queries work on iOS and Android devices
Media queries are already widely used and enjoy a broad level of browser support (Firefox 3.6+, Safari 4+, Chrome 4+, Opera 9.5+, iOS Safari 3.2+, Opera Mobile 10+, Android 2.1+, and Internet Explorer 9+). Furthermore, there are easy to implement (albeit JavaScript based) fixes for common aged browsers such as Internet Explorer versions 6, 7, and 8. If you need to grab the fixes for Internet Explorer versions 6, 7, and 8 now, you'll need to look at Chapter 9, Solving Cross-browser Responsive Challenges. In short, there's no good reason why we can't get using media queries today!
Note
Specifications at the W3C go through a ratification process (if you have a spare day, knock yourself out with the official explanation of the process at http://www.w3.org/2005/10/Process-20051014/tr), from Working Draft (WD ), to Candidate Recommendation (CR ), to Proposed Recommendation (PR ) before finally arriving, many years later, at W3C Recommendation (REC ). So modules at a greater maturity level than others are generally safer to use. For example, CSS Transforms Module Level 3 (http://www.w3.org/TR/css3-3d-transforms/) has been at WD status since March 2009 and browser support for it is far scanter than CR modules such as media queries.