Michael_B Michael_B - 6 months ago 23
Javascript Question

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

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

In checking browser compatability, 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 few 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]-->

Answer

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(1) 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);
}