How to detect specific browser version or higher (jQuery)

Question

I know it's very easy to find out which browser the user is using to access my site. But how does it look like if I want to check the user browser for a certain version (or higher) in order to carry out the corresponding action.

As an example I would like to use the CSS property "mix-blend-mode".

If we look at the supporting browser versions at CANIUSE or MOZDEV, we can see that all modern browsers from a certain version support this CSS property (except for our old friend Internet Explorer ...)

We could now build multiple if-queries according to the browser and its version, but how can I write the query so that it understands that all versions that come after the version are also "ok" for my property?

Answer 1

You could have a look at bowser, this will give you very useful information on the client browser:

const browser = bowser.getParser(window.navigator.userAgent);
console.log('Browser:',browser.getBrowser());

// You can filter on browsers using many properties, see the bowser docs for details...
const browserIsGood = !!browser.satisfies({
    chrome: '>40',
    firefox: '>31',
    edge: '>78'
}); 

console.log('Browser is good:', browserIsGood)



    

<script src="https://cdnjs.cloudflare.com/ajax/libs/bowser/2.11.0/bundled.js" referrerpolicy="no-referrer"></script>

I do agree with the comment above, it's better to detect features than browser versions as such, so modernizr is probably a better route to go.