If you are building a Metro style application then your application needs to look great when used on a wide variety of devices. Your application needs to work on tiny little phones, slates, desktop monitors, and
the super high resolution displays of
the future.
Your application also must support portable devices used with different orientations. If someone tilts their phone from portrait to landscape mode then your application must still be usable.
Finally, your Metro style application must look great in different states. For example, your Metro application can be in a “snapped state” when it is shrunk so it can share screen real estate with another application.
In this blog post, you learn how to use Cascading Style Sheet media queries to support different devices, different device orientations, and different application states. First, you are provided with an overview of
the W3C Media Query recommendation and you learn how to detect standard media features.
Next, you learn about
the Microsoft extensions to media queries which are supported in Metro style applications. For example, you learn how to use
the –ms-view-state feature to detect whether an application is in a “snapped state” or “fill state”.
Finally, you learn how to programmatically detect
the features of a device and
the state of an application. You learn how to use
the msMatchMedia() method to execute a media query with JavaScript.
Using CSS Media Queries
Media queries enable you to apply different styles depending on
the features of a device. Media queries are not only supported by Metro style applications, most modern web browsers now support media queries including Google Chrome 4+, Mozilla Firefox 3.5+, Apple Safari 4+, and Microsoft Internet Explorer 9+.
Loading Different Style Sheets with Media Queries
Imagine, for example, that you want to display different content depending on
the horizontal resolution of a device. In that case, you can load different style sheets optimized for different sized devices.
Consider
the following HTML page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>U.S. Robotics and Mechanical Men</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<!-- Less than 1100px -->
<link href="medium.css" rel="stylesheet" type="text/css"
media="(max-width:1100px)" />
<!-- Less than 800px -->
<link href="small.css" rel="stylesheet" type="text/css"
media="(max-width:800px)" />
</head>
<body>
<div id="header">
<h1>U.S. Robotics and Mechanical Men</h1>
</div>
<!-- Advertisement Column -->
<div id="leftColumn">
<img src="advertisement1.gif" alt="advertisement" />
<img src="advertisement2.jpg" alt="advertisement" />
</div>
<!-- Product Search Form -->
<div id="mainContentColumn">
<label>Search Products</label>
<input id="search" /><button>Search</button>
</div>
<!-- Deal of
the Day Column -->
<div id="rightColumn">
<h1>Deal of
the Day!</h1>
<p>
Buy two cameras and get a third camera for free! Offer
is good for today only.
</p>
</div>
</body>
</html>
The HTML page
above contains three columns: a leftColumn, mainContentColumn, and rightColumn. When
the page is displayed on a low resolution device, such as a phone, only
the mainContentColumn appears:
When
the page is displayed in a medium resolution device, such as a slate, both
the leftColumn and
the mainContentColumns are displayed:
Finally, when
the page is displayed in a high-resolution device, such as a computer monitor, all three columns are displayed:
Different content is displayed with
the help of media queries.
The page
above contains three style sheet links. Two of
the style links include a media attribute:
<link href="main.css" rel="stylesheet" type="text/css" />
<!-- Less than 1100px -->
<link href="medium.css" rel="stylesheet" type="text/css"
media="(max-width:1100px)" />
<!-- Less than 800px -->
<link href="small.css" rel="stylesheet" type="text/css"
media="(max-width:800px)" />
The main.css style sheet contains default styles for
the elements in
the page.
The medium.css style sheet is applied when
the page width is less than 1100px. This style sheet hides
the rightColumn and changes
the page background color to lime:
html {
background-color: lime;
}
#rightColumn {
display:none;
}
Finally,
the small.css style sheet is loaded when
the page width is less than 800px. This style sheet hides
the leftColumn and changes
the page background color to red:
html {
background-color: red;
}
#leftColumn {
display:none;
}
The different style sheets are applied as you stretch and contract your browser window. You don’t need to refresh
the page after changing
the size of
the page for a media query to be applied:
Using
the @media Rule
You don’t need to divide your styles into separate files to take advantage of media queries. You can group styles by using
the @media rule.
For example,
the following HTML page contains one set of styles which are applied when a device’s orientation is portrait and another set of styles when a device’s orientation is landscape:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Application1</title>
<style type="text/css">
html {
font-family:'Segoe UI Semilight';
font-size: xx-large;
}
@media screen and (orientation:landscape) {
html {
background-color: lime;
}
p.content {
width: 50%;
margin: auto;
}
}
@media screen and (orientation:portrait) {
html {
background-color: red;
}
p.content {
width: 90%;
margin: auto;
}
}
</style>
</head>
<body>
<p class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas porttitor congue massa. Fusce posuere, magna sed
pulvinar ultricies, purus lectus malesuada libero, sit
amet commodo magna eros quis urna.
</p>
</body>
</html>
When a device has a landscape orientation then
the background color is set to
the color lime and
the text only takes up 50% of
the available horizontal space:
When
the device has a portrait orientation then
the background color is red and
the text takes up 90% of
the available horizontal space:
Using Standard CSS Media Features
The official list of standard media features is contained in
the W3C CSS Media Query recommendation located here:
http://www.w3.org/TR/css3-mediaqueries/
Here is
the official list of
the 13 media features described in
the standard:
· width –
The current width of
the viewport
· height –
The current height of
the viewport
· device-width –
The width of
the device
· device-height –
The height of
the device
· orientation –
The value portrait or landscape
· aspect-ratio –
The ratio of width to height
· device-aspect-ratio –
The ratio of device width to device height
· color –
The number of bits per color supported by
the device
· color-index –
The number of colors in
the color lookup table of
the device
· monochrome –
The number of bits in
the monochrome frame buffer
· resolution –
The density of
the pixels supported by
the device
· scan –
The values progressive or interlace (used for TVs)
· grid –
The values 0 or 1 which indicate whether
the device supports a grid or a bitmap
Many of
the media features in
the list
above support
the min- and max- prefix. For example, you can test for
the min-width using a query like this:
(min-width:800px)
You can use
the logical and operator with media queries when you need to check whether a device supports more than one feature. For example,
the following query returns true only when
the width of
the device is between 800 and 1,200 pixels:
(min-width:800px) and (max-width:1200px)
Finally, you can use
the different media types – all, braille, embossed, handheld, print, projection, screen, speech, tty, tv — with a media query. For example,
the following media query only applies to a page when a page is being printed in color:
print and (color)
If you don’t specify a media type then media type all is assumed.
Using Metro Style Media Features
Microsoft has extended
the standard list of media features which you can include in a media query with two custom media features:
· -ms-high-contrast –
The values any, black-white, white-black
· -ms-view-state –
The values full-screen, fill, snapped, device-portrait
You can take advantage of
the –ms-high-contrast media feature to make your web application more accessible to individuals with disabilities. In high contrast mode, you should make your application easier to use for individuals with vision disabilities.
The –ms-view-state media feature enables you to detect
the state of an application. For example, when an application is snapped,
the application only occupies part of
the available screen real estate.
The snapped application appears on
the left or right side of
the screen and
the rest of
the screen real estate is dominated by
the fill application (Metro style applications can only be snapped on devices with a horizontal resolution of greater than 1,366 pixels).
Here is a page which contains style rules for an application in both a snap and fill application state:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>MyWinWebApp</title>
<style type="text/css">
html {
font-family:'Segoe UI Semilight';
font-size: xx-large;
}
@media screen and (-ms-view-state:snapped) {
html {
background-color: lime;
}
}
@media screen and (-ms-view-state:fill) {
html {
background-color: red;
}
}
</style>
</head>
<body>
<p class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas porttitor congue massa. Fusce posuere, magna sed
pulvinar ultricies, purus lectus malesuada libero, sit
amet commodo magna eros quis urna.
</p>
</body>
</html>
When
the application is snapped,
the application appears with a lime background color:
When
the application state is fill then
the background color changes to red:
When
the application takes up
the entire screen real estate – it is not in snapped or fill state – then no special style rules apply and
the application appears with a white background color.
Querying Media Features with JavaScript
You can perform media queries using JavaScript by taking advantage of
the window.msMatchMedia() method. This method returns a MSMediaQueryList which has a matches method that represents success or failure.
For example,
the following code checks whether
the current device is in portrait mode:
if (window.msMatchMedia("(orientation:portrait)").matches) {
console.log("portrait");
} else {
console.log("landscape");
}
If
the matches property returns true, then
the device is in portrait mode and
the message “portrait” is written to
the Visual Studio JavaScript Console window. Otherwise,
the message “landscape” is written to
the JavaScript Console window.
You can create an event listener which triggers code whenever
the results of a media query changes. For example,
the following code writes a message to
the JavaScript Console whenever
the current device is switched into or out of Portrait mode:
window.msMatchMedia("(orientation:portrait)").addListener(function (mql) {
if (mql.matches) {
console.log("Switched to portrait");
}
});
Be aware that
the event listener is triggered whenever
the result of
the media query changes. So
the event listener is triggered both when you switch from landscape to portrait and when you switch from portrait to landscape. For this reason, you need to verify that
the matches property has
the value true before writing
the message.
Summary
The goal of this blog entry was to explain how CSS media queries work in
the context of a Metro style application written with JavaScript. First, you were provided with an overview of
the W3C CSS Media Query recommendation. You learned about
the standard media features which you can query such as width and orientation.
Next, we focused on
the Microsoft extensions to media queries. You learned how to use –ms-view-state to detect whether a Metro style application is in “snapped” or “fill” state. You also learned how to use
the msMatchMedia() method to perform a media query from JavaScript.
