@media selector enhancement

[rodneyrehm]

With media-queries we gained the possibility to "easily" design resolution-aware pages. Essentially serving the same markup and stylesheet to desktops (with FullHD screens) and mobile devices (with very few pixels). This allows resizing boxes, slimming margins, removing position:absolute (and everything else CSS has to offer, of course). Very neat!

The Turbine-CSS:

/*
please note that »@media[foo]« is not the syntax I want. 
It's just the first best thing that came to mind to illustrate what I want to achieve.
*/

/***** define some media queries in a central spot *****/
@media[foo] @media only screen and (max-width: 479px)

/***** use media query inline *****/
#foo, #bar
  color: red;
  width: 1000px; /* default declaration */
  @media[foo] width: 400px; /* should only apply when mediaquery foo is true */

The generated CSS:

#foo, #bar {
  color: red;
  width: 1000px; /* default declaration */
}

@media only screen and (max-width: 479px) {
  #foo, #bar {
    color: red;
    width: 400px;
  }
}

Using media-queries is a pain in the ass, though. You have to rethink the structuring of your CSS. The following example will not work:

#bar {
  background-color: red;
  @media only screen and (max-width: 800px) {
    background-color: green;
  }
}

So the CSS-author has to be made aware of the fact that media-query augmented definitions will not be injected in-place, but rather somewhere as a collection of all definitions of a certain media-query. CSS-authors may have a very hard time to understand this. I would therefore suggest another "tag" to »dump all collected media-query-declarations«, like so:

/* define what you'll be using */
@media[foo] @media only screen and (max-width: 479px)

/* use it */
#foo
  color: red;
  width: 1000px;
  @media[foo] width: 400px;

#bar
  width: 900px;
  @media[foo] width: 300px;

/* dump it */
@media[foo]

/* continue */
#baz
  color: green;

which should result in:

#foo { width: 1000px; }
#bar { width: 900px; }
@media only screen and (max-width: 479px) {
  #foo { width: 400px; }
  #bar { width: 300px; }
}
#baz { color:green; }

[MadeMyDay]

great idea!