Today I ran into a strange issue where Firefox version 28 and below rendered style widths different than Firefox 29 and above. Firefox 29 and above appear to have fixed the issue and render sizes to match Chrome/IE8+/Opera/Safari. Unfortunately, as old as Firefox 28 is, our client’s legal review team is stuck on that version as IT refuses to let them upgrade. As such, we needed to add a kludge fix to the site to add a style to fix the issue for those running older Firefox versions. JQuery removed the version support from version 1.9 so here’s a handy script that will allow you to detect the browser and version without any extra dependencies.

function get_browser_info(){
    var ua=navigator.userAgent,tem,M=ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []; 
    if(/trident/i.test(M[1])){
        tem=/\brv[ :]+(\d+)/g.exec(ua) || []; 
        return {name:'IE ',version:(tem[1]||'')};
        }   
    if(M[1]==='Chrome'){
        tem=ua.match(/\bOPR\/(\d+)/)
        if(tem!=null)   {return {name:'Opera', version:tem[1]};}
        }   
    M=M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem=ua.match(/version\/(\d+)/i))!=null) {M.splice(1,1,tem[1]);}
    return {
      name: M[0],
      version: M[1]
    };
 }

Usage is very simple:

var browser=get_browser_info();
console.log(browser.name);
console.log(browser.version);

BONUS: If you need to detect a specific version and add special classes, here’s a quick snippet that will allow you to add a class to the HTML tag  using plain old vanilla.js.

var browser=get_browser_info();
    if(browser.name == 'Firefox' && browser.version <= 28)
        {
            var root = document.documentElement;
            root.className += " firefox28";
        }

 

How to Fix ‘Converter Failed to Save File’ with Excel 2016 How to Prevent Raspberry Pi Zero from Blanking or Sleeping
View Comments
  • Thanks! I had terrible problems using navigator =/ this script works for me!

    • Glad it helped, Hugo! It’s always nice to know that posting these solutions help someone so thank you for the feedback. 🙂

  • Thank you! Your script is a blessing post JQuery 1.9!!!

  • Thank you so much for sharing this! I made the mistake of creating an animated logo for my web app with SVG and SMIL, thinking it would be supported in all major browsers. Ha. Now I can display a static image to IE users instead. This was so easy, even a non-coder like me can use it. I made sure to give you credit on my page. 🙂

    • Glad it helped, Erica and thank you for the comment. It’s feedback like this that keeps me posting as I love knowing it might help someone else too!

  • Here is an updated version that will include the full version of browsers as well as handle Microsoft’s Edge

    var ua = navigator.userAgent,
    tem,
    M = ua.match(/(opera|chrome|safari|firefox|msie|trident|edge(?=\/))\/?\s*(\d+)(\.\d+)+/i) || [];
    if (/trident/i.test(M[1])) {
    tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
    return { name: ‘IE ‘, version: (tem[1] || ”) };
    }
    if (M[1] === ‘Chrome’) {
    tem = ua.match(/\bOPR\/(\d+)/);
    if (tem != null) {
    return { name: ‘Opera’, version: tem[1] };
    }

    tem = ua.match(/\bEdge\/(\d+(.\d+)+)/i);
    if (tem != null) {
    return { name: ‘Microsoft Edge’, version: tem[1] };
    }
    }
    M = M[2] ? [M[1], M[0].substring(M[0].indexOf(‘/’)+1)] : [navigator.appName, navigator.appVersion, ‘-?’];
    if ((tem = ua.match(/version\/(\d+)/i)) != null) {
    M.splice(1, 1, tem[1]);
    }
    return {
    name: M[0],
    version: M[1]
    };

    • Thanks for the updated version, Matt! I’ll update and give you credit.

  • Thanks for the script. It works on all browsers except Edge. Can you please help. What change do we need to make?

    • Hi Tinu,

      Matt’s comment above has the Edge solution but just update the first line of code to
      var ua=navigator.userAgent,tem,M=ua.match(/(opera|chrome|safari|firefox|msie|edge|trident(?=\/))\/?\s*(\d+)/i) || [];

      Then add this snippet:
      tem = ua.match(/\bEdge\/(\d+(.\d+)+)/i);
      if (tem != null) {
      return { name: ‘Microsoft Edge’, version: tem[1] };
      }
      }

      You can also check for it specifically via this one liner:
      window.navigator.userAgent.indexOf(“Edge”) > -1

      Hope that helps!

Leave a Reply to Farhat Aziz
Cancel Reply