Question

This is part question, and part hope for confirmation. I have my suspicions about the answer to this, and will add my two-cents, but I’d like independent confirmation since the Win8 Forums don’t have this particular feature documented very well that I could find.

In Windows 8, when building Metro Style Applications using HTML/JS/CSS, the templates all include a series of CSS Media Queries in default.css. They are:

@media screen and (-ms-view-state: fullscreen-landscape) {}
@media screen and (-ms-view-state: filled) {}
@media screen and (-ms-view-state: snapped) {}
@media screen and (-ms-view-state: fullscreen-portrait) {}

I’m quite familiar with Media Queries, so my questions are: Why the need for vendor-prefixed expressions in Windows 8, and how do the -ms-view-state expressions differ from the W3C standard expressions like width, height and orientation?

Here’s my take, please add yours below, and confirm, deny or correct me: I suspect that these rules are similar to the standard rules, but are a bit more adaptive, meaning that rather than defining sets of rules that match to a given width and height, these expressions encompass a state in a resolution-agnostic way. Because of this, I can use a single rule for my application in landscape mode -ms-view-state: fullscreen-landscape and it will work when the app is running at 1366×768, 1920×1080 or 2560×1440. Otherwise, I would have to define these rules three times:

@media screen and (width: 1366px) and (height: 768px) {}
@media screen and (width: 1920px) and (height: 1080px) {}
@media screen and (width: 2560px) and (height: 1440px) {}

Assuming my assertion is true, the only gap for me is why I couldn’t then just define a single rule using ‘min-‘ and orientation to achieve the same result:

@media screen and (min-width: 1366px) and (min-height: 768px) and (orientation: landscape)

Single rule, standard expressions. No need for a vendor-prefixed version. What am I missing?

Answer 1

In response to your two questions

Why the need for vendor-prefixed expressions in Windows 8?

Because view-state is not a part of the official CSS3 spec and vendor prefixes are there precisly so vendors can independently try new things outside the spec without breaking it for everyone else.

How do the -ms-view-state expressions differ from the W3C standard expressions like width, height and orientation?

They appear to be more semantic in their meaning and less restrictive on actual screen resolutions or sizes.

And while yes, your css media query of @media screen and (min-width: 1366px) and (min-height: 768px) and (orientation: landscape) does infact reduce the three lines youd previously posted down to one, it dosnt really describe what the -ms-view-states look like their trying to achieve.

They seem to be trying to give the developer/designer context to how their application is currently being consumed, explicitly stating the app is running either fullscreen or snapped (which i assume is the side by side mode microsoft have demostrated for having multiple apps running in metro simultaneously).

Update
Microsoft have released a blog post talking about their design decisions around screen resolutions and such. Which is pertinant to this conversation and is available here