MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

content—content styles are drawn from the iframe HTML source. This is why using text-overflow:
ellipsis doesn’t work, nor will font-color and so forth. But styles like height and width, along with
borders, margin, padding, and other properties that don’t affect the content can be applied.
What We’ve Just Learned
• Layout that is consistent with Windows 8 design principles—specifically the silhouette and
typography—helps users focus immediately on content rather than having to figure out each
specific app.
• The principle of “content before chrome” allows content to use 75% or more of the display space
rather than 25% as is common with chrome-heavy desktop or web applications.
• In some cases, such as a home or hub page of an app with varied and content that does not
come from a single collection, it’s best to just use plain HTML/CSS layout rather than using a
control.
• Pannable HTML sections can use snap points to automatically stop panning at particular
intervals within the content.
• The CSS grid is a highly useful mechanism for adaptive page-level layout, and it can also be used
inline. The CSS flexbox is most useful for inline content, though it has uses at the page level as
well, as for centering content vertically and horizontally.
• Every page of an app (including the extended splash screen) can encounter all four view states,
so an app design must show how those states are handled. Media queries and the Media Query
Listener API can be used to handle the view states declaratively and programmatically.
• Apps can specify a preferred orientation in their manifest and also lock the orientation at run
time.
• The window.onresize event is best for knowing when the window size has changed, due to view
states and/or changes in screen size and pixel density.
• Handling varying screen sizes is accomplished either through a grid-based adaptive layout or a
fixed layout utilizing the WinJS.UI.ViewBox control that does automatic scaling of its content.
• The chief concern with pixel density is providing graphics that scale well. This means either using
vector graphics or providing scaled variants of each raster graphic.
• Windows Store apps can take advantage of a wide range of CSS 3 options, including the grid,
flexbox, transforms, multicolumn text, and regions.
270