2

I realize this may be a dumb question because I am returning to web dev after some time anyway, so please don't be shy to enlighten me! To me it seems that the art of css hacks (like back in the day to sniff out old IE browsers) could be used to fill the gap between the new-ish @supports queries and old browsers that do not support these features. Potential to save yourself and your site from alot of javascript? Even aid in dropping javascript altogether in small projects. Is anyone aware of any projects like this? It is also possible I have failed to search with proper keywords...

Tim Bilotta
  • 23
  • 3
  • 2
    Not a hack per se, just use the cascade as you always have. Related questions: https://stackoverflow.com/questions/21257329/feature-detection-for-supports https://stackoverflow.com/questions/16584228/what-is-the-most-practical-way-to-check-for-supports-support-using-only-css – BoltClock May 01 '18 at 12:47
  • Not an answer, but the good news is almost all browsers support `@supports`. https://caniuse.com/#feat=css-featurequeries. Only ~2% of users still have IE and will face issues: https://www.w3schools.com/browsers/browsers_explorer.asp – Kallmanation May 01 '18 at 12:58
  • All very helpful, in my case it helps me to build/design in the old way for now, and then go about "modernizing" my CSS with a separate file when I'm ready. In the end it's just for training purposes until I get more comfortable. Pure cascade is obviously the way to go once you have all the features down. Thanks! – Tim Bilotta May 01 '18 at 14:05

1 Answers1

1

Yes, you can do this with the next commands:

The all following examples are valid:

@supports not (not (transform-origin: 2px)) - for test browser on non-support

or

@supports (display: grid) - for test browser on support

or

@supports (display: grid) and (not (display: inline-grid)). - for test both

See MDN for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

Sviat Kuzhelev
  • 1,758
  • 10
  • 28
  • ` @supports ( color: rgb(255,255,255,0.5) ) { @import url("modern.css"); @media ... @supports ... ... }` In this case I test to see if modern colors are accepted with alpha (transparency) and then safely apply more modern sugar correct? @BoltClock – Tim Bilotta May 01 '18 at 13:53