javascript - Instead of using prefixes I want to ask site visitors to upgrade their browser

Question

I'm re-building a site using CSS flexbox.

In checking browser compatibility, I see that flexbox is supported by all modern browsers, except that Safari 8 and IE 10 require vendor prefixes.

In checking Google Analytics, I see that 96% of site visitors in the last 6 months use browsers that fully support flexbox. The remaining 4% use browsers that require prefixes or provide no support.

Since we're talking about 4% of users, and the number will keep getting smaller, (and I like to keep my code as clean and simple as possible), I'm considering not using prefixes, and instead asking users to upgrade their browsers.

How can I target older browsers in order to display a message to users asking them to update their browser?

Here's what I have so far:

<!--[if IE]>
    <div class="browserupgrade">
        <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">
           upgrade your browser</a> to improve your experience.</p>
    </div>
<![endif]-->

This IE conditional comment covers me for IE versions 6, 7, 8 and 9.

These visitors will get an alert with a link to download a current browser. However, Microsoft discontinued support for conditional comments starting with IE10.

Now I need something similar for:

• IE 10
• Safari 7-8
• Opera Mini < 8
• UC Browser for Android
• Android Browser < 4.4

Is there a simple JS/jQuery script to handle this job? Or another lightweight method?

---

Solution

Thanks for all the answers. Clearly there are many ways to tackle this problem (Modernizr, PHP, jQuery functions, plain Javascript, CSS, browser-update.org, etc.) Many of these methods will do the job completely and effectively.

I went with the simplest one: CSS (credit @LGSon).

This CSS covers essentially all targeted browsers, except for IE <= 7.

.browserupgrade { display: block; }
_:-ms-fullscreen, :root .browserupgrade { display: none; }
:-o-prefocus, .browserupgrade { display: none; }
@supports (display: flex) { .browserupgrade { display: none; }}

See the answer for details.

And for those relatively few visitors using IE <= 7, a conditional comment in the HTML:

<!--[if lte IE 7]>
    <div style=" ... inline styles here ...">
        browser upgrade message here
    </div>
<![endif]-->

question from:https://stackoverflow.com/questions/33359157/instead-of-using-prefixes-i-want-to-ask-site-visitors-to-upgrade-their-browser

Answer 1

Revised answer after question edit

Here is a CSS only way to achieve that.

As the CSS @supports won't work on your targeted (unwanted) browsers: Safari 7-8, IE <= 10, Android Browser < 4.4, UC Browser for Android and Opera Mini < 8, your "browserupgrade" message will be visible on those using this rule.

@supports (display: flex) { .browserupgrade { display: none; }}

There is a few browsers that still does support the non-prefixed flex but doesn't support @supports, IE 11⁽¹⁾ and Opera Mini 8, but luckily we can address them with a couple of CSS specific rules.

/* IE 11 */
_:-ms-fullscreen, :root .browserupgrade { display: none; }

/* Opera Mini 8 */
:-o-prefocus, .browserupgrade { display: none; }

---

Here is the complete code to show an upgrade message for your targeted browsers.

CSS

.browserupgrade { display: block; }

/* IE 11 */
_:-ms-fullscreen, :root .browserupgrade { display: none; }

/* Opera Mini 8 */
:-o-prefocus, .browserupgrade { display: none; }

/* all modern browsers */
@supports (display: flex) { .browserupgrade { display: none; }}

HTML

<div class="browserupgrade">
    <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">
       upgrade your browser</a> to improve your experience.</p>
</div>

---

(1): The IE 11 CSS rule should work on IE Mobile 11 too, though haven't one to test it on.

---

The CSS @supports is also available as an API, CSS.supports(). Here is a very well written article by David Walsh.

---

Additionally, if one would like to automatically redirect those browser, here is a small script that does that, after a delay of 10 sec.

var el = document.querySelector('.browserupgrade');
if (window.getComputedStyle(el,null).getPropertyValue("display") != 'none') {
  setTimeout(function(){
    window.location = 'http://browsehappy.com/';        
  }, 10000);
}