W3C home > Mailing lists > Public > www-style@w3.org > October 2009

Re: media queries syntax

From: Bert Bos <bert@w3.org>
Date: Thu, 15 Oct 2009 21:45:00 +0200
To: Yves Lafon <ylafon@w3.org>
Cc: www-style@w3.org
Message-Id: <200910152145.00430.bert@w3.org>
On Thursday 15 October 2009, Yves Lafon wrote:
> Hi,
> I am looking at the media-queries CR document [1], form a CSS
> Validator standpoint, and I am wondering why the syntax of expression
> is '(' .. ')' instead of using a function name like 'feature(' ...
> ')'.

I think it was never considered. So the question would more properly be 
the opposite: why is a functional notation better?

There is no absolute answer, but here are a couple of considerations:

  - Media Queries are used in CSS, but not only there. They also occur
    in HTML (in the LINK and STYLE elements) and in XML (in the
    xml-stylesheet PI). They are expressly designed to be used in yet
    other places that we don't know about. Parentheses are a common
    vocabulary that works almost anywhere.

  - You may think that "feature()" is more readable, I think it just
    adds redundancy and makes many expressions too long to fit nicely on
    one line. :-)

  - Parentheses are normal delimiters in CSS. They appear in the grammar
    alongside functional notations, and together with the similar square
    brackets. The grammar wasn't changed in any way to accommodate
    Media Queries.

  - We indeed haven't used parentheses much in CSS, although we've been
    on the brink of using them several times, because we always
    hesitated whether we would not find a better use for them later,
    where their brevity would be even more appreciated. We didn't have
    that hesitation for Media Queries. They will also appear inside
    expressions, i.e., inside the calc() functional notation.

> Changing the parser in one place, for handling media-queries is one
> thing, but adding support for '('..')' introduce lots of new error
> handling in other part of the spec for errors like
> color: rgb (1,2,3); (instead of rgb(1,2,3);)

But the validator already handles that, as far as I know. "rgb(" is one 
token, while "rgb (" is a pair of tokens. You get an error message that 
rgb isn't a valid color and that the rest of the value cannot be 

Or do you mean that you want to add specific heuristics so that the 
error message can say that there is probably a space too many?

> plus 'feature(...)' seems more readable than '(..)' (but that's
> subjective
> :) ).

Indeed it is. :-)

> [1] http://www.w3.org/TR/2009/CR-css3-mediaqueries-20090915/

  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 Thursday, 15 October 2009 19:45:32 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:39 UTC