Kevin Powell - Community•7mo ago

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 won’t work there, is there some way to do the equivalent?

3 Replies

ἔρως•7mo ago

the best you can do is actually test it with javascript, and pass it along to css but why would you want to test support like that? 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 and you serve the critical path css without any nesting what you can also do is to detect features this way, you can use the media attribute in the <link> tag for example, you know that all browsers that support feature x and y will have support for nested css as well

patwasalinguistOP•7mo ago

hmm, thanks for your suggestion

ἔρως•7mo ago

you're welcome

Gaming

Programming

Is there a way to test for css nesting support?