KPC
Kevin Powell - Community•9mo ago
patwasalinguist

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
ἔρως
ἔρως•9mo 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
patwasalinguist
patwasalinguistOP•9mo ago
hmm, thanks for your suggestion
ἔρως
ἔρως•9mo ago
you're welcome

Did you find this page helpful?