Any heuristics on using new JS/CSS features?
I thought of waiting 2 years, but I just saw an article that recommended waiting 6 months.
Another factor could be covered percentage, based on caniuse. 98%+ is the coverage of things we can all agree we can use, so is 95%+ enough for new features? 90%+ (so 1 in 10 people wouldn't get the expected experience)?

Avoid having to write backwards-compatible code as much as possible. There are tools which will convert / polyfill new features as needed to achieve the desired level of backwards compatibility. That way, your code will stay cleaner and easier to maintain, and you don't need to rewrite anything once some feature becomes widely supported.

Also think of whether some new feature is really necessary for your use case, i.e. is that feature an obvious best approach which wasn't possible before, or something you wouldn't even consider unless you knew this exact feature has recently been introduced.

@hitko That's a good way for JS and Mozilla even provides them sometimes, but what about CSS?
Based on not writing backwards-compatible code I should use @supports but I should still provide a fallback, when should I delete that fallback? (Because it is something else to mantain.)

@c3r38r170 Autoprefixer is one option, there are also polyfills on NPM and tools like PostCSS which can process CSS and make it backwards compatible, a lot like what Babel can do for JS.

for any new feature: wait until non-terrible questions about it pop up on stackoverflow.

Reminds me of a project 4 years ago: they built an IoT bluetooth wifi app for Android to open the front door, and it didn't work with my phone because of a "ripple effect" in a Material Ui kit library