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

[css3-mediaqueries] media queries grammar

From: Bert Bos <bert@w3.org>
Date: Tue, 5 Feb 2008 18:09:27 +0100
To: W3C Style List <www-style@w3.org>
Message-Id: <200802051809.27498.bert@w3.org>

I had an action in the CSs WG to look at the syntax of media queries as 
shown in 
http://csswg.inkedblade.net/spec/mediaqueries#media-queries-syntax


Referring to CSS 2.1 for the grammar notation and the list of tokens is 
fine. It just requires these extra definitions to be added in the MQ 
draft (and an explicit reference to chapter 4 of CSS 2.1, of course):

    Token  Definition
    -----------------
    ONLY   "only"
    NOT    "not"
    AND    "and"

(The draft already says that media queries are case-insensitive.)

COMMA can be written as ',' (just like ':'), no need for another 
definition.

I replaced the S+ by S*. The difference is that the latter allows

    not/* and I mean not! */print
and
    ... (color)and

while the former requires at least one space. (I'm not saying users 
*should* write queries like that. I just don't see a reason to disallow 
it. But note that "... and(color)" is not correct, because it is a 
functional notation.)

I don't remember if we decided to allow CSS-style comments outside of 
CSS. If we do allow CSS comments in places like HTML's MEDIA attribute, 
then the text should say so. Easiest is to copy the sentence from CSS 
2.1 chapter 4: "COMMENT tokens do not occur in the grammar (to keep it 
readable), but any number of these tokens may appear anywhere between 
other tokens."

I also added S* after IDENT in media_type (and removed the corresponding 
S* from media_query), to allow trailing spaces on a media query, 
e.g., "only print ".

I added the missing '(' and ')' to the grammar.

I replaced the non-terminal "term" (from Appendix G) by "value" (from 
chapter 4), because the latter is normative, albeit a bit more 
permissive. But each media feature has its own mini-grammar to restrict 
the values anyway.

I removed a redundant pair of [].

That yields:

---------------------------------------------------------------------
media_query_list
 : S* media_query [ ',' S* media_query]*
 ;
media_query
 : [ONLY | NOT] S* media_type [ AND S* expression ]*
 | expression [ AND S* expression ]*
 ;
media_type
 : IDENT S*
 ;
expression
 : '(' S* media_feature [':' S* value]? ')' S*
 ;
media_feature
 : IDENT S*
 ;
value
 : /* See section 4.1 of CSS 2.1 */
 ;
---------------------------------------------------------------------

I haven't tried converting this to code (probably yacc) yet, but I hope 
to find some time. It probably needs two hours for coding and light 
testing.



Bert
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France
Received on Tuesday, 5 February 2008 17:09:40 GMT

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