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?

Don't do browser detection. Do feature detection, eg using [tag:modernizr]. Here's how to detect mix-belnd-mode: [testing of css mix blend mode](https://stackoverflow.com/a/28088291/2181514) — freedomn-m, Aug 24 '21 at 12:45
IE: Just stop. Tell your boss they're [throwing money away](https://css-tricks.com/a-business-case-for-dropping-internet-explorer/). — isherwood, Aug 24 '21 at 12:57

Terry Lennox · Answer 1 · 2021-08-24T12:53:55.717

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.

How to detect specific browser version or higher (jQuery)

1 Answers1