CSS3 media queries for ultimate style sheet flexibility

With the plethora of devices (iPad, iPhone, netbooks) that are being used for browsing websites these days, it makes sense to adapt your style sheet so that each user device gets the best experience possible. Yet, how do you make a website display well on a wide screen monitor but still be perfectly usable on, for example, an iPhone with a horizontal resolution of 480 pixels?

CSS3 media queries are one of the best ways of solving this dilemma because they enable you to specify style sheets based on properties such as device width. Here are a few articles about media queries that I have been reading recently:

• Russ Weakley’s presentation is a step-by-step guide; it’s definitely worth spending some time going through each slide because it will give you the basics for implementing media queries on your own site
• Responsive Web Design by Ethan Marcotte is a great description of media queries; the final example provides an alternative layout for smaller devices. Resize your browser window smaller to see the different layout.
• You can even tailor your style sheet to iPad landscape or portrait orientations. Now, that’s cool!

Browser support. Yes, well you know what I’m gonna say here don’t you?! Media queries are supported by most modern browsers (Firefox 3.6, Chrome, Safari, Opera) but not Internet Explorer 8. Still, IE9 looks like it will support CSS3 media queries judging by this article about IE9 preview on the IE blog and this demo site. Hurrah!