HTML and CSS Reference
In-Depth Information
@media screen and (-ms-view-state: snapped) {
}
@media screen and (-ms-view-state: fullscreen-portrait) {
}
he
@media
rules work like regular media queries, but the property that they are responding
to is specific to Metro and represents different orientations and usage scenarios (which I will
explain and demonstrate in
Chapter 4
).
■
Visual Studio indents CSS styles to create a visual hierarchy. This drives me crazy for
some reason, so I have disabled this feature for all of the listings in this topic. You can change the
way that Visual Studio displays CSS by selecting Options from the Tools menu, navigating to Text
Editor
➤
CSS
➤
Formatting, and unchecking the “Hierarchical indentation” option.
Tip
With my additions, I have defined a background color for the app, following the apparent
Metro trend toward muted colors. The other additions I have made apply a CSS3 grid layout to
the
div
elements I defined in
default.html
. You can use any of the new CSS3 layout models in
a Metro app (or any CSS layout for that matter), but the specification for the grid layout has yet
to be finalized, so I have to prefix my layout properties with
-ms
.
A Quick inTroducTion To css3 Grid lAyouTs
You may not have used the grid layout because it is not consistently implemented in
mainstream web browsers. Fortunately, when developing Metro web apps, we need to
worry only about Internet Explorer 10, which is used to display JavaScript Metro apps to
the user. In this sidebar, I provide you with a very quick introduction to the basic features
of CSS3 grid layouts. To get started with a grid layout, you must set the
display
property
and specify the number of rows and columns for the element that will contain the grid,
like this:
#contentGrid {
display: -ms-grid;
-ms-grid-rows: 1fr 1fr;
-ms-grid-columns: 60% 60%;
}
The
display
property must be set to
-ms-grid
. The
-ms-grid-rows
and
-ms-grid-
columns
properties specify the dimensions of the grid. These can be specified as
fractional units (expressed as
fr
), as a percentage of the available space, or as using
fixed dimensions. I have specified two equal-sized rows and two columns, the width of
which is set to be 60 percent of the width of the parent element.
It is common in Metro apps (or at least common in the ones developed so far) to provide
a content area that is wider than the screen and allow the user to scroll from left to right
Search WWH ::
Custom Search