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

> On 09 Apr 2015, at 02:51, Andrea Rendine <master.skywalker.88@gmail.com> wrote:
> 
> 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.

You are correct in terms of what the result is, but your steps imply a
linear execution, top to bottom, which isn't what the spec you quoted
says.

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

There is no code being executed. You seem to have a imperative understanding
of the code you, reading it from top to bottom, implying this happens, then
this branch is taken, then the value is this, then that happens... This isn't
what's happening. 

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

This is exactly identical to your earlier example. Assuming (as you did) that the initial viewport
isn't 397px, and based on the spec you quoted earlier:

> 1. Apply @viewport rules. If @viewport rules rely on media queries,
> use the viewport properties of the initial viewport.

There are 2 viewport rules. One which depends on a media query,
and one which doesn't:

The one which doesn't sets the viewport width to 397px.
The one which depends on a media query uses the initial viewport,
which isn't 397px, so it doesn't do anything.

=> The viewport width is set to 397px;

> 2. Apply style rules. If style rules rely on media queries, use the
> viewport properties obtained from step 1 when evaluating the media
> queries."

There is one style rule, and it does depend on a media query. The viewport
obtained on step 1 is 397px, so the media query matches, and the rule is
applied.
=> <div>s have a green color

I agree that the fact that some parts of the @media block end up getting applied
and some other parts not can be a bit surprising, but the author did
set himself up for trouble by writing apparently contradictory rules, so we
have to break the contradiction somehow.

The current behavior leads to The Right Thing (tm)
in situations where the author isn't contradicting himself,
and give predictable (if somewhat counter intuitive) results
when he does. I think we should keep it this way.

 - Florian

Received on Friday, 10 April 2015 08:26:45 UTC