5

All the threads I've found regarding nested media queries are a few years old.

With the wide spread of CSS3, are nested media queries now considered safe to use in production?

Would any browser that supports CSS3 fully support nested media queries? Or would that not always be the case? In that case, which browsers do not support nested media queries?

EDIT:

Example of a nested media query for illustration:

@media screen and (min-width: 1024px) {
   body {
       background-color: blue;
   }

   @media (-webkit-min-device-pixel-ratio: 1.5) {
       body {
           background-color: red;
       }
   }
}
Liran H
  • 9,143
  • 7
  • 39
  • 52
  • 1
    "Would any browser that supports CSS3 fully support nested media queries?" No because the notion of supporting CSS3 is meaningless when you consider that browsers as old as IE7 support CSS3 attribute selectors - but virtually no other CSS3 feature. – BoltClock Jan 06 '16 at 11:43
  • 1
    @torazaburo: http://www.w3.org/TR/css3-conditional/#processing – BoltClock Jan 06 '16 at 11:43
  • I think it's safe enough. http://caniuse.com/#feat=css-mediaqueries – Christoph Jan 06 '16 at 11:44
  • @Christoph Thanks, I did look at that, but I can't be certain that their support chart includes nested media queries as well. – Liran H Jan 06 '16 at 12:04
  • 1
    There's a footnote there that indicates versions of browsers that don't support nested at-media, but its information conflicts with the findings in [this question](http://stackoverflow.com/questions/11746581/nesting-media-rules-in-css), even for a question asked in mid-2012. That being said, since I'm still active, I'll gladly update my answer without there needing to be a new question in 2016. I last updated my answer in mid-2014. Which is not all that long ago. – BoltClock Jan 06 '16 at 12:09
  • 1
    If there is conflicting info, I'd say, play it safe! The example in the question can very easily be written in a non-nested way. Although it is, indeed, 2016, not everybody is using the latest browsers. Unless you have compelling reasons to explicitly shut out older browsers, but then I'd like to know what those reasons are. – Mr Lister Jan 06 '16 at 16:21
  • Thanks for the advice @MrLister. The example I gave was for illustration only. I do realise that this particular example could have easily been written as two separate media queries. My question was just if it is generally safe to use nested media queries these days. While in instances such as this example it is not really necessary, nested media queries can be very helpful in other instances. – Liran H Jan 06 '16 at 16:31
  • It's 2019 so I'm filing this away as a duplicate of the question I answered, where I've already updated my answer with a fairly simple statement. – BoltClock Mar 22 '19 at 04:38

1 Answers1

1

According to CanIUse, yes you're probably safe... Most of the unsupported browsers don't have a huge market share. But, if your audience is using any version of IE, it will break. This means much of Corporate America, Healthcare, Education, and Government will be out...

The catch is that I struggle to find beneficial use cases to support the need. Is there a better example of something that's a lot easier with nested queries?

Given your example code... (yes I understand it's just an example)

@media screen and (min-width: 1024px) {
   body {
       background-color: blue;
   }

   @media (-webkit-min-device-pixel-ratio: 1.5) {
       body {
           background-color: red;
       }
   }
}

Is would give the same result as

@media screen and (min-width: 1024px) {
   body {
       background-color: blue;
   }
}

@media screen and (min-width: 1024px) and (-webkit-min-device-pixel-ratio: 1.5) {
       body {
           background-color: red;
       }
   }

The second version is barely more code. It's easier to read and follow. Likely easier to maintain down the road AND proven to work on most browsers.

Personally, the question of "can I...?" isn't as important as "should I...?". But only your specific situation will dictate if its a good idea or not.

Bryce Howitson
  • 7,339
  • 18
  • 40
  • 1
    Having to account for multiple occurrences of the same media query, going through every one of them and deciding which ones of them need to be changed, should the media query need revision down the road, isn't easier maintenance IMO. That's probably the single beneficial use case of nesting at-media - keep things DRY. On the other hand... if a nested rule appears far enough down the stylesheet you'd need to scroll back up to remind yourself what the parent media query was. You win some and you lose some, I guess. – BoltClock Mar 22 '19 at 04:37
  • Right it feels like a toss-up to me... One of those "right in this situation, but wrong in another" ¯\\_(ツ)_/¯ – Bryce Howitson Mar 22 '19 at 04:46