0

I know its quite easy topic, but I found the syntax provided on w3.com is quite complex. Can anyone decode it? Is it important to understand it?

Syntax here:

media_query_list
 : S* [media_query [ ',' S* media_query ]* ]?
 ;
media_query
 : [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
 | expression [ AND S* expression ]*
 ;
media_type
 : IDENT
 ;
expression
 : '(' S* media_feature S* [ ':' S* expr ]? ')' S*
 ;
media_feature
 : IDENT
 ;

It also specifies some tokens below it. Can anyone please decode them also.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Mahesha999
  • 22,693
  • 29
  • 116
  • 189
  • Try finding some tutorials online. If you have a specific technical question then rewrite the post. – Lowkase Aug 21 '12 at 17:02
  • No, it's not important to understand it. It's the grammar; it's not meant to be very human-readable. If you want to understand the syntax, read the rest of the spec, not the grammar. – BoltClock Aug 21 '12 at 17:17
  • tutorials go on explaining using examples and are easy understand and readable this syntax is actually a W3C recommendation for standard will still like to understand whats *S and IDENT since the standard also says "Unknown media types are distinct from media types that do not actually match the IDENT production. Those fall under the malformed media query clause." – Mahesha999 Aug 21 '12 at 17:51
  • 1
    `S*` means any amount of whitespace and `IDENT` is an identifier. There isn't much more to it. – BoltClock Aug 21 '12 at 18:53

2 Answers2

2

This is a formal EBNF definition of the syntax. If you're looking for easy-to-read examples, have a look at chapter 2 of the standard.

In short, S stands for a space character, IDENT for an identifier (like foobar2), * for zero or more repetitions. Let's go through it in detail:

media_query_list
 : S* [media_query [ ',' S* media_query ]* ]?
 ;

means that a media_query_list (that's the everything that can be in @media ( here )) consists of one or more media_query, separated by comma and optional spacing. For example, these are valid media_query_lists:

media_query
 media_query,  media_query,   media_query,media_query

The definition of media_query is given later, in

media_query
 : [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
 | expression [ AND S* expression ]*

The | means there are two forms. Either one of

 media_type
 ONLY media_type
 NOT media_type

(and optional expressions, joined with AND), or just an expression followed by optional multiple other expressions, joined with AND.

An expression is defined as follows:

expression
 : '(' S* media_feature S* [ ':' S* expr ]? ')' S*

That means it's always in parentheses, and consists of either just a media_feature, or a media feature followed by an expr. For example, these are valid expressions:

(foo)
(foo: 2px)

In this definition, media_type and media_feature can be arbitrary identifiers. In practice, they will be identifiers that are recognized by the browsers, like print, screen, max-width etc..

phihag
  • 278,196
  • 72
  • 453
  • 469
  • Arbitrary identifiers are still parsed whether they are recognized or not; they'll be resolved as `unknown` if they are not recognized. But that's just a little tidbit and nothing important... – BoltClock Aug 22 '12 at 07:54
0

For those who might be confused by the above syntax, check out my post here for a less techincal explanation of Media Query syntax as I understand it. It's too long to meaningfully repost here:

https://stackoverflow.com/a/23524569/1963978

Community
  • 1
  • 1
matthewsheets
  • 4,535
  • 2
  • 15
  • 11