W3C home > Mailing lists > Public > www-style@w3.org > June 2008

Re: [css3-mediaqueries] Width/Height Clarifications

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Mon, 09 Jun 2008 17:19:44 -0700
Message-ID: <484DC8A0.4040201@terrainformatica.com>
To: Andrew Fedoniouk <news@terrainformatica.com>, Boris Zbarsky <bzbarsky@MIT.EDU>, Anne van Kesteren <annevk@opera.com>, www-style@w3.org

L. David Baron wrote:
> On Monday 2008-06-09 15:14 -0700, Andrew Fedoniouk wrote:
>   
>> @import url(a.css) min-device-width:800;
>> and a.css contains:
>> @media max-device-width:1200
>> {
>> p { color: red;}
>> }
>> will p get color red if your screen happens to be 640 pixel wide?
>>     
>
> No.  (I'm assuming the syntax is corrected to have the required
> parentheses.)
>
>   
>> Specs (CSS 2.1 and CSS3) are not clear on the subject.
>> They say (http://www.w3.org/TR/css3-cascade/#at-import) you "can" skip  
>> a.css loading.
>> So you may load or you may not load that conditional import. So is  
>> ambiguity that I have.
>>
>> I think that wording should be as:
>>
>> "So that user agents can avoid retrieving resources for unsupported  
>> media types, authors may specify media-dependent @import rules. These  
>> conditional imports specify comma-separated “media queries” after the  
>> URI. *If user agent makes an attempt to retrieve the CSS resource then  
>> that UA shall behave as if all rules from that conditionally imported  
>> CSS sheet are enclosed in correspondent @media section.*
>>     
>
> Ah, you're saying that nothing says that the rules in the imported
> sheet are excluded if the media given don't match the device.  (This
> is in fact the case, although I agree the spec is very unclear.)
>   

According to http://www.w3.org/TR/css3-cascade/#at-import :

"Style sheets are only imported if the media query on the '@import' (if 
any) matches the media for
which the UA renders the document. If an '@import' is skipped, then all 
'@import's inside the style
sheet it points to are also skipped, no matter what their names."

What does it mean "matches the media"? Say following statement:
   @media screen and (device-width: 800px)

Does it match any screen or only 800px screens?
If it matches only 800px screens then according to the spec UA shall not 
even make an
attempt to load correspondent resource (is this the meaning of the 
"skip"?).
So rulesets there shall not be even parsed.

I am saying following:  according to current  specs (CSS 2.1 and 3) 
@import and
@media assume that conditional statement is true during lifespan of the DOM.
If we speak about MQs that may change in runtime (dynamic changes for 
the given
instance of the DOM) then statement above has to be changed somehow.

Recently Boris told us that Gecko loads all accessible style sheets 
despite of their media types.
That is against the spec and a bit bandwidth greedy as far as I can tell.

I believe that MQs document shall have clear statement about support of 
dynamically
changeable properties. If this:
   @import url(a.css) screen and (device-width: 800px);
is a runtime statement (device-width can be changed by the user) then UA 
has to
import it even it does not match at the moment of parsing. Or at least 
UA shall implement
dynamic style set reorganization if e.g. device-width will change - so 
to behave as if
it parses the whole system of styles accessible through MQs.

Sorry for producing so much noise about the subject but this is somehow 
critical as
it changes evaluation model of the CSS (in my point of view at least). 
If MQs are about
runtime evaluation then we are entering different ground: CSS is getting 
runtime evaluation
part in the form of procedural language ( or at least elements of ): 
calc() - statements,
MQs - conditions. Probably variables if Daniel will insist further. The 
only thing left
is the loop. But if you will add variables in MQs then keen CSS lovers 
will easily make loops from them.
May be we just need to relax and add something procedural with unified 
syntax instead of
adding procedural bites here and there? Just kidding :)

BTW: I am wondering why (min-device-height:800px) and not just 
(device-height >= 800px)?

> You don't want to define it in terms of syntactic equivalence; that
> would trigger other rules in the spec that you don't want to trigger
> (e.g., not allowing @import after @media).
>
> However, I agree that it should be clearer that @media,
> @import-with-media, <link>-with-media, <style>-with-media, etc. are
> all adding restrictions, and for a rule to be applied, the device
> has to match the medium restrictions of each link on a chain to that
> rule.  (Note that the rule might be reachable in multiple ways,
> e.g., a style sheet could be imported twice with different media
> lists; it only needs to be reachable through one chain.)
>
> I thought we had a CSS 2.1 issue on that before, though.  But I
> suspect the only thing we clarified for that was the last paragraph
> in 7.2.1.
>
> -David
>
>   
-- 
Andrew Fedoniouk.

http://terrainformatica.com
Received on Tuesday, 10 June 2008 00:20:35 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:55:07 GMT