1

I've been having some issues with my CSS3 media queries...

Here's a small snippet of one I'm currently working on:

@media only screen 
and (max-width : 420px) {
    .page { min-width: 300px; max-width: 480px; width: 100%; }
    .page .alpha { font-size: 2em; }

    /* Set-up the column */
    .page .column { margin: 0 auto 2%; width: auto; }
    .page .gallery .column { min-height: 470px; height: auto; padding: 2%; }
}

/* Increase the main title for slightly larger screens! */
@media only screen 
and (max-width : 480px) {
    .page .alpha { font-size: 3em; }
}

I'm working from a 'mobile first' standpoint and given the normal behaviour of CSS regarding the 'cascading' aspect I would expect the second @media statement to inherit all of the styles from the previous statement, whilst overriding any for which it has a matching or 'heavier' selector.

(Plus CSS's order of precedence would mean any matching style definitions would use the last defined rule-set unless 'trumped' with an !important statement!)

From what I've seen though, through testing and some Google / SE searches this is not the case.

Is it possible for @media style rules to inherit from applicable earlier statements or am I stuck with having to repeat all the rules I need for each statement? (not very DRY)

I'd really appreciate any help and clarifications / explanations for this.

Oriol
  • 274,082
  • 63
  • 437
  • 513
Chris
  • 882
  • 1
  • 10
  • 22
  • fyi update -- I was wondering if nesting the second statement would work. It is in the CSS3 spec but some search results suggested that it's not supported in browsers yet? – Chris Aug 25 '12 at 11:47
  • That is quite correct - currently only Firefox supports it. See [this answer](http://stackoverflow.com/questions/11746581/nesting-media-rules-in-css/11747166#11747166). – BoltClock Aug 25 '12 at 17:05
  • Note that CSS's definition of "inheritance" does not apply here since `@media` rules don't have any parent-child semantics whatsoever. This is purely a cascade issue. – BoltClock Aug 25 '12 at 17:08

2 Answers2

3

Firstly thanks @BoltClock (for both comments), and to the other comments and answers for all your help.

I think I made a mistake in my media queries and/or was miss-understanding how they worked and interacted together. I was going to edit my question with the following but decided it would make more sense as an answer (since it's the solution I used). I apologise if this has wasted anyone else's time.

Here's my fixed snippet of code:

@media only screen 
and (max-width : 480px) {
    .page { min-width: 300px; max-width: 480px; width: 100%; }
    .page .alpha { font-size: 2em; }

    /* Set-up the column */
    .page .column { margin: 0 auto 2%; width: auto; }
    .page .gallery .column { min-height: 470px; height: auto; padding: 2%; }
}
/* Increase the main title for slightly larger screens! */
@media only screen 
and (min-width : 421px)
and (max-width : 480px) {
    .page .alpha { font-size: 3em; }
}

I realised from your comments that if I increased the max-width in my first block to cover the necessary range/limit I could then either nest or add the second block after it (I tried both and they both worked for me -- using chromium browser [18.0.1025.151]). This successfully gave me the desired result, in that the page .alpha element's font size increased at the required stepping/interval.

Thanks again for all SO'ers who helped! (and to SE for the awesome communities they've helped build)

Knowledge > OpenSource > Freedom

Chris
  • 882
  • 1
  • 10
  • 22
1

If you want to work from mobile up, you will need to set the mobile layout as the default layout. (Remove the query). From there the queries will inherit from above.

.page { min-width: 300px; max-width: 480px; width: 100%; }
.page .alpha { font-size: 2em; }

 /* Set-up the column */
.page .column { margin: 0 auto 2%; width: auto; }
.page .gallery .column { min-height: 470px; height: auto; padding: 2%; }

/* Increase the main title for slightly larger screens! */
@media only screen 
and (max-width : 480px) {
    .page .alpha { font-size: 3em; }
}
Neograph734
  • 1,714
  • 2
  • 18
  • 39
  • Thanks, I really appreciate your mobile first tip -- I have some base styles outside of my MQ's but it makes more sense to have the smallest mobile ones here too! Although this still doesn't explain why @media rules don't cascade the way other css rules do. – Chris Aug 25 '12 at 14:58
  • 1
    @Chris: As far as I can tell, the `@media (max-width : 420px)` rules should stop applying only when the width exceeds 420px. If you're not seeing those rules taking effect *at all*, something is wrong. Other than that, `@media` rules are supposed to follow the same cascade as all other rules do. – BoltClock Aug 25 '12 at 17:14