Kevin Powell - Community•2mo ago

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;
  }
}

16 Replies

ἔρως•2mo ago

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

XanOP•2mo ago

Lol probably

ἔρως•2mo ago

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

clevermissfox•2mo ago

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

ἔρως•2mo ago

i was surprised by it too

XanOP•2mo ago

I've spent so much time today writing css

XanOP•2mo ago

https://xansnh.neocities.org/

Xan on Neocities

XanOP•2mo ago

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

XanOP•2mo ago

normally looks like this

XanOP•2mo 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•2mo ago

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

pangalan1•2mo ago

or use a tool like lightningcss?

ἔρως•2mo ago

if it is supported by vite, yes

XanOP•2mo ago

update: fixed it through a lot of work but still don't know how to stop flexbox contents from overflowing

pangalan1•5w ago

not everyone uses vite bruh

ἔρως•5w ago

i know, but if you have a plain html website, using vite is the best option that depends on what is overflowing and how and why and at what resolutions you can add this to your css, to check it: * {outline: 1px solid red;} this way, all elements have an outline, and you can see which outline is going outside the viewport DO NOT CHANGE IT TO BORDER!!! borders cause changes on the size of the elements

Gaming

Programming

Nesting media queries in non-media query