How to detect a browser's layout engine in JavaScript?

Question

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, Netscape), Trident (IE), or others?

Answer 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
} else if(navigator.userAgent.search(/webkit/i)>0){
    //Chrome, Safari
} else if(navigator.userAgent.search(/???/i)>0){ //replace ??? by the appropriate engine
    //others
} else if(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)"