Can anyone suggest a good use case for @supports queries in CSS? | Sololearn: Learn to code for FREE!
¡Nuevo curso! ¡Todo programador debería aprender IA Generativa!
Prueba una lección gratuita
+ 3

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

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?

23rd Aug 2020, 7:43 PM
Ore
Ore - avatar
3 Respuestas
+ 5
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.
24th Aug 2020, 8:05 AM
Kevin ‚ėÖ
24th Aug 2020, 1:55 PM
Ore
Ore - avatar
+ 2
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.
24th Aug 2020, 7:58 AM
Aaron Eberhardt
Aaron Eberhardt - avatar