Getting Started - Metro Revealed: Building Windows 8 Apps with HTML5 and JavaScript - page 9

Exploring the default.css File
Listing 1-3 shows the contents of the default.css file. Metro projects rely on standard CSS with
some vendor-specific prefixes. Microsoft used to be terrible for introducing its own CSS proper-
ties, but the ones you'll encounter in this topic exist either because the relevant W3C standard
is still unfinished or because there are properties that are specific to Windows 8 functionality
that need to be expressed to Metro apps. You can see examples of both in the listing. The file that
Visual Studio creates is very simple, and my additions are shown in bold.
Listing 1-3. The Contents of the default.css File
body {
background-color: #3E790A;
}
#contentGrid {
display: -ms-grid;
-ms-grid-rows: 1fr 1fr;
-ms-grid-columns: 60% 60%;
height: 100%;
overflow: scroll;
}
#contentGrid div.gridLeft {
margin-left: 1em;
margin-right: 1em;
}
#contentGrid div.gridRight {
margin-right: 1em;
}
#leftContainer {
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
}
#topRightContainer {
-ms-grid-column: 2;
-ms-grid-row: 1;
}
#bottomRightContainer {
-ms-grid-column: 2;
-ms-grid-row: 2;
}
@media screen and (-ms-view-state: fullscreen-landscape) {
}
@media screen and (-ms-view-state: filled) {
}