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

Although the usage of braces for @media rules implies grouping, in IE at least that is not the case - your two examples are treated as functionally identical.  So if the initial viewport is 397px wide then the actual viewport is 500px wide and the text is not green.  For other initial viewport widths, the actual viewport will be the width of the initial viewport and the text will be green.

I was hoping there was some specification in the Media Queries spec regarding whether rules within @media must be applied as a group, but didn't find anything.  In fact I didn't see anything specifying the application of rules within @media.  I was expecting something along the lines of "the rules within an @media block are applied if and only if its media query list evaluates to true" -- am I missing the applicable text?

Thanks,
-Matt


> 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 Friday, 10 April 2015 00:07:43 UTC