[css-device-adapt] Bad way to solve circular dependency

The whole section defining the relationship between viewport-based MQ
and MQ-defined viewport is really unclear.
"1. Apply @viewport rules. If @viewport rules rely on media queries,
use the viewport properties of the initial viewport.
2. Apply style rules. If style rules rely on media queries, use the
viewport properties obtained from step 1 when evaluating the media
queries."
(http://www.w3.org/TR/css-device-adapt/)
What happens when both viewport declaration and style rules are
defined in a viewport-based MQ?

@viewport {
  width: 397px;
}

@media screen and (width: 397px) {
  @viewport {
    width: 500px;
  }
}

@media screen and (width: 397px) {
  div { color: green; }
}

So here, as the draft says, the following logic is used:
1. Initial VW unknown; actual VW set to 397px;
2. @media ... (width:397px) : false, as initial VW != 397px =>
viewport NOT set to 500px
3. @media ... (width:397px) : true, as actual VW = 397px => color:green.

A condition cannot be "true" or "false" according to the code which
has to be executed. What happens, e.g. here

@viewport {
  width: 397px;
}

@media screen and (width: 397px) {
  @viewport {
    width: 500px;
  }
  div { color: green; }
}

Is this condition true and false at the same time?

Received on Thursday, 9 April 2015 00:51:37 UTC