How does the cascade affect media/container queries?

Hey, if I’m catering for browsers that don’t support @container, I may do something like so-

@media (min-width: 55rem) {
  .element {…}
}

@supports (container-type: inline-size) {
  @container (min-width: 45rem) {
    .element {…}
  }
}

@media (min-width: 55rem) {
  .element {…}
}

@supports (container-type: inline-size) {
  @container (min-width: 45rem) {
    .element {…}
  }
}

Since the media query will run despite the support for @container, if the browser supports containers, do they both run and the container query styles take over the media query ones due to it being lower in the cascade? Or does the media query styles activate as well and if so should you wrap it in an @supports not block? Thanks in advance

3 Replies

Jochem•2w ago

the values in the query would be overwritten by the values in the container query

snxxwyyOP•2w ago

Ah okay cool, that’s what I was leaning towards, thank you

clevermissfox•2w ago

Just make sure all properties are taken care of. For example if in you media query you're setting something like an aspect-ratio but in your container query you arent/don't want an aspect ratio, make sure to address and revert the aspect ratio value in the @container

@media (width > 55rem) { .element { aspect-ratio: 1;} }

@supports (container-type: inline-size) { @container (width > 45rem) { .element { aspect-ratio:  revert; }}}

@media (width > 55rem) { .element { aspect-ratio: 1;} }

@supports (container-type: inline-size) { @container (width > 45rem) { .element { aspect-ratio:  revert; }}}

Gaming

Programming

How does the cascade affect media/container queries?