3 years ago

Category: PHP, javascript

Providing a wide range of support for the browsers is great problem to ponder upon when it comes to designing websites using CSS. For instance, there are still a few sets of browsers that don’t support flexbox yet.

Luckily, CSS comes with a handly little utility using which it’s easier to determine whether the client browser supports a certain CSS feature or not, and based on that it would render the CSS.

So, for instance, if you want to run a block of CSS only when the browser supports display: flex, you can do it like so.

And if the browser doesn’t support display: flex, it’s easier to fall back to the alternative solution by using the not operator with @supports like so.