[css-media-queries] Nesting Media Queries

[andresgalante]

Hi,
This is related to: https://www.w3.org/TR/mediaqueries-4/

I just found myself in a situation where I wanted to nest media queries. For example:

@media (min-width: 50em) {
  ...
  and @media (orientation: landscape) { ... }
}

I know I can use and on a new declaration, but nesting them makes it so much nicer IMO.

Is this something that others think it's useful or I am just pushing it?

[Loirooriol]

I don't know media queries, but doesn't the following already work?

@media (min-width: 50em) {
  /* ... */
  @media (orientation: landscape) { /* ... */ }
}

Example: https://jsfiddle.net/9kt1gozg/

[frivoal]

As @Loirooriol pointed out, it is already allowed:
https://drafts.csswg.org/css-conditional/#contents-of

Closing, since there's nothing to fix.

[andresgalante]

@Loirooriol it does work!

thanks 👍