Question

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.

Answer 1

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..