Nesting media queries in non-media query

I see https://developer.mozilla.org/en-US/docs/Web/API/CSSNestedDeclarations#css does this, but "CSSNestedDeclarations" is only supported by less than 50% of browsers. (https://caniuse.com/mdn-api_cssnesteddeclarations) Is it ok to put a media query inside the declaration block of another regular selector?

nav {
  display: flex;
  flex-direction: row;
  @media (max-width: 512px) {
    flex-direction: column;
  }
  justify-content: center;
}

nav {
  display: flex;
  flex-direction: row;
  @media (max-width: 512px) {
    flex-direction: column;
  }
  justify-content: center;
}

or do I need to seperate them?

nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

@media (max-width: 512px) {
  nav {
    flex-direction: column;
  }
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

@media (max-width: 512px) {
  nav {
    flex-direction: column;
  }
}

11 Replies

ἔρως•this hour

depends... do you care about ios users? and do you care about users that didn't update the browser in the last month?

XanOP•this hour

Lol probably

ἔρως•this hour

then use scss if you want to write like that and use the nesting or just don't use nesting until about next year

Whoops I didn’t know nested media queries are not well supported ! I have some refactoring to do…

ἔρως•17h ago

i was surprised by it too

XanOP•14h ago

I've spent so much time today writing css

XanOP•14h ago

XanOP•14h ago

How do I stop stuff from going off screen? (Using flex, at least on the 1st one)

XanOP•13h ago

normally looks like this

XanOP•13h ago

I was going to say something about how :focus wasn't acting right on https://xan.nekoweborg/, unlike on https://xansnh.neocities.org/, but appling this css fixed it

XanOP•13h ago

oh no, but that css reset code also breaks this table layout element