CSS3 Media Queries & Media Query Listeners

Introduced in IE9, CSS3 Media queries enable you to style a page based on different display surface factors such as width, height, orientation, resolution, etc.

New to IE10, Media Query Listeners enable you to execute script in response to a change in a media query. In this demo, script changes the image sources between high and low resolution photos using Media Query Listeners. Mobile browsers only download the low resolution images, while desktops and netbooks download whichever is appropriate for the current window size. Browsers which don't support listeners will download both versions of the images.

Change the width of your browser to change the page layout. See what's new!

Cool Travel Photos

Optimized for Mobile!

Optimized for your Netbook!

Optimized for large screens!

I took all these photos at different interesting spots while vacationing. Let me know what you think of them.

Skagit Valley Tulip Festival

Skagit Valley

Skagit Valley is located about an hour an a half north of Seattle. April is when the tulips are blooming. There are so many tulips that from a distance the ground looks like it's painted.

Olympic Sculpture Park, The Eagle

The Eagle

The Olympic Sculpture park is one of my favorite places to visit in Seattle. I take all my out of town guests here. I took this photo during the grand opening weekend of the park, January 2007.

Grandfather Mountain, North Carolina

Grandfather Mtn.

This is just a photo of a cool old street sign pointing to Grandfather Mountain in North Carolina.

The Pink House, Oak Bluffs, MA

The Pink House

This is the Pink House located in the Martha's Vineyard Camp Meeting Association Camp Ground community. The house was build in 1864. It has 2 bedrooms, 770 square feet

What's different about this demo for IE10?

Originally, this demo's HTML contained <img> elements for both the large and small resolution images. CSS3 Media Queries were used to hide and show these images based on the media's dimensions. However, this means that both the large and small resolution versions of each image were downloaded by the browser.

With Media Query Listeners, the demo's script can determine the current evaluation of a media query and just download the necessary resolution image. For mobile devices, this could mean you save money on that expensive data plan by not having to download the large image files!

CSS3 Media Queries

CSS3 Media Queries enable web authors to selectively style their page based on properties of the media where the page is being displayed. For example, a web author could choose to style their page differently when it is displayed on the screen versus when it "displayed" on a print medium. Going further, web authors can now choose to style their page differently when it is displayed on a small screen such as a phone versus when it is displayed on a widescreen monitor.

Here is the syntax to use a media query:

@media screen and (max-width:400px) { div {border:none;}}
In this declaration, screen is the media type and max-width is the media property. The declaration states that the rules inside are only to be applied when the webpage is displaying on a screen with a width of at most 400px. There are many other media properties defined by CSS3 Media queries including width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome and resolution and many of these properties accept min or max as a prefix. Media properties can be used together to create very specific queries, for example: screen and (max-width:400px) and (max-height:600px).

This page uses media queries to change the layout of the page based on the width. As you change the width of the page, the media queries change the layout of the page to use more or less columns, longer or shorter titles and larger or smaller images. The following media queries are defined for this page:

@media (min-width:950px)
@media (min-width:450px) and (max-width:950px)
@media (max-width:899px)
@media (max-width:450px)

Media Query Listeners

CSSOM View provides the ability to evaluate a media query at runtime in script. In the demo, this is used at page load to decide which image resources to use initially.

var mediaQueryList = window.msMatchMedia("(min-width:950px)");
isLargeScreen = mediaQueryList.matches;

Additionally, you can register for callbacks ("media query listeners") whenever the evaluation of the media query changes. In the demo, this is used to update which image resources to use whenever the media's dimensions crosses the width threshold of 950px.

mediaQueryList.addListener(mediaSizeChange);
function mediaSizeChange(mediaQueryList)
{
    //Executed whenever the media query changes from true to false or vice versa
    if(mediaQueryList.matches)
    {
        showLargeScreen();
    }else{
        showSmallScreen();
    }
}
Other possible uses include dynamically loading additional comments on your blog as the window is resized larger or reacting to changes in portrait/landscape orientation.