How to Detect Safari, Chrome, Ie, Firefox and Opera Browsers?

When developing web applications, it is often necessary to detect the user’s browser in order to provide specific functionality or apply browser-specific styles. In this blog post, we will explore different ways to detect Safari, Chrome, Internet Explorer (IE), Firefox, and Opera browsers using JavaScript.

1. User Agent String

One common method to detect the user’s browser is by analyzing the user agent string provided by the browser. The user agent string contains information about the browser and the operating system being used.

Here’s an example code snippet that demonstrates how to detect different browsers using the user agent string:

const userAgent = navigator.userAgent;

if (userAgent.includes("Safari") && !userAgent.includes("Chrome")) {
    console.log("Safari");
} else if (userAgent.includes("Chrome")) {
    console.log("Chrome");
} else if (userAgent.includes("MSIE")) {
    console.log("Internet Explorer");
} else if (userAgent.includes("Firefox")) {
    console.log("Firefox");
} else if (userAgent.includes("Opera") || userAgent.includes("OPR")) {
    console.log("Opera");
} else {
    console.log("Unknown browser");
}

2. Navigator Object

Another approach is to utilize the properties of the navigator object, which provides information about the browser and the user’s system.

Here’s an example code snippet that demonstrates how to detect different browsers using the navigator object:

const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
const isChrome = /chrome/i.test(navigator.userAgent);
const isIE = /msie|trident/i.test(navigator.userAgent);
const isFirefox = /firefox/i.test(navigator.userAgent);
const isOpera = /opera|opr/i.test(navigator.userAgent);

if (isSafari) {
    console.log("Safari");
} else if (isChrome) {
    console.log("Chrome");
} else if (isIE) {
    console.log("Internet Explorer");
} else if (isFirefox) {
    console.log("Firefox");
} else if (isOpera) {
    console.log("Opera");
} else {
    console.log("Unknown browser");
}

By utilizing the navigator object, we can check for specific browser properties to determine the browser being used.

3. Feature Detection

Instead of specifically targeting different browsers, it is often recommended to use feature detection to check if a particular browser supports a specific feature or API.

Here’s an example code snippet that demonstrates how to use feature detection to check for browser support:

if (window.safari) {
    console.log("Safari");
} else if (window.chrome) {
    console.log("Chrome");
} else if (window.MSInputMethodContext && document.documentMode) {
    console.log("Internet Explorer");
} else if (typeof InstallTrigger !== "undefined") {
    console.log("Firefox");
} else if (window.opr || window.opera) {
    console.log("Opera");
} else {
    console.log("Unknown browser");
}

By checking for the existence of specific browser objects or features, we can determine the browser being used without relying on the user agent string.

These are some of the methods you can use to detect Safari, Chrome, Internet Explorer, Firefox, and Opera browsers using JavaScript. Choose the method that suits your needs and remember to test your code across different browsers to ensure compatibility.

Happy coding!