Here’s a neat little trick you don’t often hear about: did you know there’s a really simple way to compensate for older browsers that might not support CSS properties like flex-box or transitions? All you have to do is wrap the CSS rules that you think or know may not be supported by older versions of browsers in @supports brackets and the rules that aren’t supported will simply be passed over. It’s a very cool, very useful, and not very well-known CSS trick.
Here it is in action:
- @supports(display: flexbox){
- div{
- display: flexbox;
- }
- }
So in terms of syntax it’s very similar to writing a media query, except you’re passing through the parameters of the rule you want to include if it’s supported rather than the rules you want to include if the viewport is within a certain size range. It can be used with any CSS property, and is great to use with new properties that you’re really eager to use but the browser support isn’t great.