How To Detect A Browser's Layout Engine In Javascript?

I want to create different behaviors according to the layout engine of the client's browser. How to detect if it's WebKit (Chrome, Safari, Yandex, Midori), Gecko (Firefox, K-Meleon

Solution 1:

Look into navigator.userAgent (just type it in your browser's console). You can search as follows (case insensitive):

if(navigator.userAgent.search(/trident/i)>0){
    //Internet Explorer
} elseif(navigator.userAgent.search(/webkit/i)>0){
    //Chrome, Safari
} elseif(navigator.userAgent.search(/???/i)>0){ //replace ??? by the appropriate engine//others
} elseif(navigator.userAgent.search(/gecko/i)>0){
    //Firefox
}

Leave Gecko for the last condition since the userAgent property may contain the expression "like Gecko", WebKit browsers do and IE as well:

IE's navigator.userAgent: "Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; InfoPath.3; rv:11.0) like Gecko"

The navigator.appVersion property may contain the same information as navigator.userAgent but in some browsers it doesn't:

Firefox's navigator.appVersion: "5.0 (Windows)"