Layouts and Tiles - Metro Revealed: Building Windows 8 Apps with HTML5 and JavaScript - page 60

responding to being filled or snapped; you can use CSS or use the Windows.UI.ViewManagement
API. I'll show you both approaches in the sections that follow.

■ Applications can be snapped in the landscape view only, and Windows 8 Consumer
Preview supports snapping only if the horizontal resolution of the display is 1366 pixels or
greater. You must ensure that you have selected the correct orientation and resolution in the
simulator if you want to experiment with snapping.

Note

Snapping and Filling with CSS
Microsoft has added some custom CSS media query properties that can be used to change the
CSS for a Metro app when it is snapped or filled. These are added to the default.css file when
Visual Studio creates a new Metro application project, as shown in Listing 4-1.

Listing 4-1. The Custom Snapped and Filled Media Query Properties
/* MetroGrocer styles removed for brevity */
@media screen and (-ms-view-state: fullscreen-landscape) {
}
@media screen and (-ms-view-state: filled) {
}
@media screen and (-ms-view-state: snapped) {
#contentGrid div.gridRight, #listTable td:last-child, #listTable th {
display: none;
}
#listTable td { white-space: nowrap;}
#listTable td:first-child { border-right: thin solid white;}
#contentGrid div.gridLeft { margin-left: 0.5em;}
}
@media screen and (-ms-view-state: fullscreen-portrait) {
}

The four media queries defined in default.css define the four basic layout states that a
Metro app can find itself in: snapped, filled, full-screen in landscape mode, and full-screen in
portrait mode. The CSS styles I define within the media queries are applied only when the app
is in the corresponding state.
For my example application, the snapped view presents too little space to display the entire
layout. As you can see in the listing, I have used the snapped media query to hide some elements
and change the appearance and behavior of others. You can see how these styles are applied in
the snapped view in Figure 4-1 .

■ The normal CSS precedence rules apply to styles defined within these queries, which
means that you would normally want to make the link element for the default.css file the last
one to appear in the default.html file.

Tip