Is there a way to test for css nesting support?

I’ve run into some trouble with nesting support on mobile browsers, and I was thinking it might make sense to make a non-nested version until browser support is wider. I would like to do something like:

@supports (nesting){
  .nested {
    .selector {
      color:red;
    }
  }
}

@supports (nesting){
  .nested {
    .selector {
      color:red;
    }
  }
}

Obviously

nesting

nesting

won’t work there, is there some way to do the equivalent?

Ἔ

ἔρως•4/26/24, 2:56 PM

the best you can do is actually test it with javascript, and pass it along to css

Ἔ

ἔρως•4/26/24, 2:57 PM

but why would you want to test support like that?

Ἔ

ἔρως•4/26/24, 2:57 PM

just have your css preprocessor produce 2 versions: 1 with nesting and one without, and then you can use a tiny bit of javascript to load the "big hunk" of css

Ἔ

ἔρως•4/26/24, 2:58 PM

and you serve the critical path css without any nesting

Ἔ

ἔρως•4/26/24, 2:58 PM

what you can also do is to detect features

Ἔ

ἔρως•4/26/24, 2:58 PM

this way, you can use the attribute in the tag

Ἔ

ἔρως•4/26/24, 2:59 PM

for example, you know that all browsers that support feature x and y will have support for nested css as well

patwasalinguistOP•4/26/24, 6:49 PM

hmm, thanks for your suggestion

Ἔ

ἔρως•4/26/24, 6:57 PM

you're welcome