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

> 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, I agree that the presented case is quite messy on the side of
the author's mind, but then, why not simply stating "@viewport in
media blocks are not considered at all"? This would be easier to
understand IMHO.

2015-04-10 10:26 GMT+02:00 Florian Rivoal <florian@rivoal.net>:
>
>> 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 10:44:40 UTC