Html5 & Css3

This article discusses Internet Explorer 10 Platform Preview. All information is subject to change.

A few years ago, I was approached by a client who wished to build a mobile-only Web site for its young, tech-savvy user base. The project was actually pitched to us as an “iPhone site,” and came with a fully conceived design. Excited to create such a cutting-edge mobile app, we began in earnest and made decent headway—until it came time to consider other mobile devices on the market. This client wanted support for just about all of them. Thus began our valiant effort to answer two of the most important questions Web developers face when attempting to build mobile-tailored experiences: How do you know when to change the experience for a given mobile browser, and how do you go about making that change when one is required?

These questions are at the heart of responsive Web design, a term coined by Ethan Marcotte . Responsive Web design is about using context clues from the browser to tailor the way a site is presented to a user, and even the way it behaves. It’s about responding to information presented by the browser with a customized and compelling experience that fits a user’s interaction expectations on that device. If the right clues reveal enough information about the browser and device in question, it becomes feasible to provide customizations, such as alternate images and fluid layouts.

Traditionally, you get those context clues by parsing the User Agent string presented by the browser—a practice called browser or UA sniffing—and then using that information to determine how to proceed. I covered UA sniffing in my September 2011 article, “No Browser Left Behind: An HTML5 Adoption Strategy” . As I noted then, browser sniffing is unreliable and has essentially been replaced in favor of feature detection, which helps you make decisions about markup, CSS and JavaScript, based on available features, and not on a given browser and version.

In the context of responsive Web design, all modern desktop and major mobile browsers support a feature called media queries, a CSS3 module that extends the idea of media types introduced in CSS 2.1—the ability to specify alternative style sheets for print, screen and the like—with the ability to determine some of the physical characteristics of a device visiting a site. Similar to the rationale for using feature detection, media queries allow you to focus on getting the right context clues for a current visitor, which you can then use to responsively tailor the delivered experience. The power of media queries is that they provide such clues to your style sheets.In this article, I’ll provide an overview of the media queries CSS3 module. I’ll briefly discuss its syntax and use, and then show a simple example that leverages media queries to build smartphone- and tablet-friendly views for an online photo gallery. Finally, I’ll share a tip essential for all forms of mobile development before wrapping up with a brief discussion on media query listeners, a separate World Wide Web Consortium (W3C) specification that provides an API for reacting to changes in the media environment via JavaScript. By the end of this article, you should have a solid foundation for creating responsive Web sites and applications using only CSS and some tailored styles.

CSS Media Queries
As mentioned previously, CSS 2.1 currently supports media-dependent style sheets based on “media type” declarations. The following markup illustrates how you can use media types to specify conditional style sheets: With these elements in place, a site will load a different style sheet from the default (or “screen”) style sheet when a page is loaded in print preview mode. As useful as this feature is (though historically under-utilized), it doesn’t provide any useful context clues to use for building truly responsive Web sites. And though the media types specification details the use of 10 media types, browser vendors never fully embraced all of the specified types. The “media” attribute lays a solid foundation, though, and the W3C decided to build media queries (bit.ly/zbleDg)right on top. As you specify a media type (such as print, screen or all) media queries let you add expressions to the media attribute that check for the presence of certain media features, such as the width, height, orientation and even screen resolution of the current device. Here’s an example that loads the main.css style sheet if the media type is screen and the device width is at least 800 pixels: The media query is what’s inside the parentheses. The left side specifies the property to test (width), with an optional min- or max- modifier, and the right side specifies the value of that property. If the device or browser in question presents a screen width of at least 800 pixels, the styles in main.css will be applied. If not, they won’t. This illustrates how media queries give developers useful context clues for creating responsive Web sites and applications.