javascript - CSS @supports vs Checking Support via JS -

while searching way check css support in browsers came across 2 different approaches: css , javascript. have used js before checking feature support in browsers, not css properties. can tell newer browsers have added support css @supports, browsers don't?

example of css @supports:

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

so, if older browsers don't support css @supports, practical utilize both js , css approaches? regarding example above, possible if/else statement such as:

@supports (display: flex) {      div { display: flex; } } else {      div { display: none; } } 

i understand wouldn't key word else, being able perform along lines beneficial. so, sum , organize questions:

1. what best approach checking css property support @supports in older browsers not supporting css syntax?
2. would make sense or practical utilize both css , js this?
3. is there sort of if/else syntax css @supports?

1. what best approach checking css property support @supports in older browsers not supporting css syntax?

   this depends entirely on you're trying do. if you're checking support specific value of property (such flex display property), sufficient provide fallback value , let cascade handle in cases.

   using example, it's simple as:

   div {     display: none;     display: flex; } 

   if you're dealing entire property may not supported in older browsers, depends entirely on you're trying accomplish or without property. example, border-radius doesn't have adverse effects on layout, older browsers don't support degrade gracefully without having else. other properties may have adverse effects on layout, , need account different properties , layout configurations differently.

2. would make sense or practical utilize both css , js this?

   if you're using js cover many bases possible, using css may either redundant, or serve modern, non-js alternative account users have disabled js. may vary depending on sort of feature you're detecting.

   since @supports, it's worth noting there javascript api called css.supports functions identically except call within javascript. if you're not worried users scripting disabled, can check if implemented , use if is, or existing feature detection code otherwise:

   var supported = false;  if (window.css) {     supported = window.css.supports('display', 'flex'); } else {     // existing feature detection code here } 

3. is there sort of if/else syntax css @supports?

   there no if/else syntax css conditional at-rules such @supports , @media, , if there were, browsers don't support @supports ignore else portion. if need account older browsers, option use cascade shown above (and if browser support isn't issue, it's simpler , covers use cases).

   the other way duplicate condition , prepend not negate it, , css rules in each @supports rule mutually exclusive (which helpful if want include other properties should applied when property not supported, , cannot emulated using legacy syntax older browsers):

   @supports (display: flex) {     div { display: flex; } }  @supports not (display: flex) {     div { display: none; } }