As discussed in the introduction of this chapter, recent times have seen an explosion in the variety of media through which people interact with websites, particularly the explosion of "smart phones" and tablets. Moreover, as discussed, a web page design that is appropriate, even necessary for a wide-screen experience, is often inappropriate, overly cluttered, or just plain dysfunctional in a tiny screen.
The solution to this is Media Queries, a new element of CSS introduced with CSS3. However, before we examine new media features in CSS3, it will be helpful to understand the basic evolutionary path that led to CSS3 Media Queries. That background will be useful both in getting our hands around the concepts involved, and because, in the crazy wild-west state of browsing environments these days (with emerging and yet-unresolved standards conflicts), designing for the widest range of media requires combining new CSS3 Media Queries with older CSS Media detection...