How to detect old browsers

If you are a web designer or developer and you have worked a little with CSS, you will probably know that sometimes old Internet Explorer versions make your life a little harder.

Sometimes you finish your design, your website looks amazing on all browsers, then you test it on Internet Explorer, and you realize the layout appears broken.

What to do in this case? Should you work until all it’s perfect on old IE versions?

In a perfect world, nobody should use old browsers anymore.

Unfortunately, we don’t live in a perfect world, many companies use web applications working only on old IE versions. Moreover, some people still have old devices and no wish to update their browser. So old IE versions still exist.

People should still be able to navigate your website on old browsers. Maybe the design will be not perfect, but the website should at least work without big problems.

In any case better to warn the users when they have an old browser.

The very little plugin I’m going to present you does exactly that.

This plugin doesn’t take information directly about the browser. So how can it detect old browsers? It just checks if the browser supports some CSS properties and JavaScript methods.

So no matter if it’s an old version of IE or Safari or whatever.

An old Safari version will give similar problems as an old IE version, so we want also to detect this case.

Here you have all the  plugin code.

register_shutdown_function ( 'eos_obd_detect_old_browsers' );
function eos_obd_detect_old_browsers(){
    ?>
    <!--googleoff: index-->
    <div id="eos-obd-notice" style="display:none;background:#000;color:#fff;text-align:center;position:fixed;left:0;right:0;top:0;min-height:40px"><?php esc_html_e( 'Your browser is outdated. For a safer and more pleasant navigation it would be better you update your browser.','obd' ); ?></div>
    <div id="eos-obd-dummy-el" style="opacity:0"></div>
    <!--googleon: index-->
    <script>
        var obdEl = document.getElementById('eos-obd-notice'),
        obdDummyEl = document.getElementById('eos-obd-dummy-el');
        if('undefined' === typeof(window.getComputedStyle) || 'undefined' === typeof(obdDummyEl.style.boxSizing)){
            obdEl.style.display = 'block';
        }
        else{
            obdDummyEl.style.display = 'flex'; 
            obdDummyEl.style.boxSizing = 'border-box';
            var obdDummyElStyle = window.getComputedStyle(obdDummyEl,null),
                obdDummyElDisplay = obdDummyElStyle.getPropertyValue('display'),
                obdDummyElBoxSizing = obdDummyElStyle.getPropertyValue('box-sizing');
                obdEl.style.display = obdDummyElDisplay !== 'flex' || 'undefined' === obdDummyElBoxSizing ? 'block' : 'none';
        }
     </script>
     <?php
}

The plugin registers the function “eos_obd_detect_old_browsers” on PHP shutdown.

The function eos_obd_detect_old_browsers prints a hidden warning message, a dummy element and few lines of  JavaScript code.

If “getComputedStyle” or “boxSizing” are not supported, the browser is older than IE 9. This is already enough to warn the users.

In another case, we first assign a flex display property and a border-box box-sizing property to the dummy element.

Then we check if the dummy element has really taken these properties.

If the browser is old, the dummy element computed style will not have both of these modern properties, in this case we warn the user.

If you want you can directly download the free plugin to detect old browsers clicking on the link below.

Download Old Browser Detector for free
All categories