Kevin Powell - Community•5mo 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

ἔρως•5mo 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•5mo ago

Lol probably

ἔρως•5mo 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•5mo ago

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

ἔρως•5mo ago

i was surprised by it too

xanOP•5mo ago

I've spent so much time today writing css

xanOP•5mo ago

https://xansnh.neocities.org/

Xan on Neocities

xanOP•5mo ago

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

xanOP•5mo ago

normally looks like this

xanOP•5mo 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•5mo ago

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

_pangalan•5mo ago

or use a tool like lightningcss?

ἔρως•5mo ago

if it is supported by vite, yes

xanOP•5mo ago

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

_pangalan•5mo ago

not everyone uses vite bruh

ἔρως•5mo 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

Did you find this page helpful?