Kevin Powell - Community•4w 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

ἔρως•4w 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•4w ago

Lol probably

ἔρως•4w 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•4w ago

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

ἔρως•4w ago

i was surprised by it too

XanOP•4w ago

I've spent so much time today writing css

XanOP•4w ago

https://xansnh.neocities.org/

Xan on Neocities

XanOP•4w ago

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

XanOP•4w ago

normally looks like this

XanOP•4w 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•4w ago

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

pangalan1•4w ago

or use a tool like lightningcss?

ἔρως•4w ago

if it is supported by vite, yes

XanOP•4w ago

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

pangalan1•4w ago

not everyone uses vite bruh

ἔρως•4w 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