Can anyone suggest a good use case for @supports queries in CSS?

Question

I think normal property overriding is sufficient.

.elem {
display: block;
display: flex;
}

Is easier than

.elem {
display: block;

@supports (display:flex) {
display: flex;
}
}

Is there any benefit of the second method?

Answer 1

Related to what Aaron Eberhardt said:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries#How_to_use_feature_queries_for_progressive_enhancement

Also these queries are not limited to CSS properties but they can check selectors, units and most of CSS features as a whole.

Answer 2

Thanks Kevin ★ and Aaron Eberhardt

Answer 3

It's useful when you want more complex layout changes depending on supported features. For example in case the content of a flex element doesn't need a border but if flex is not supported you want a border around it. And it's also more clear what your CSS does when you use support queries.