Hey friends, today in this blog you’ll learn How to Detect Browser in JavaScript. To detect user browser, I’ll use only HTML CSS & JavaScript. In the eariler blog, I have shared how to detect AdBlocker and Network Connection Status in JavaScript and now it’s time to create a simple program that detect browser in JavaScript.
In this small project (Detect Browser in JavaScript), as you can see in the preview image, there is a ‘Browser’ text with different browser logos Google Chrome, Mozilla Firefox, Microsoft Edge, etc.
Now you can see that all logos have their full opacity, but when you open this HTML page on any of the given browsers, all logos will fade out except one browser logo you’re currently using. If you are feeling difficulties with what I’m saying, you can watch a demo or full video tutorial of this Detect Browser in JavaScript.
Video Tutorial of Detect Browser in JavaScript
In the video, you have seen the demo of this small project and how I created this Browser Detection program using JavaScript. I hope you have understood the basic codes behind creating this Detect Browser in JavaScript.
To detect the browser, I have used a JavaScript navigator object. This object contains information about the browser. This JavaScript object is used for browser detection as well to get different information related to the browser.
At first, I gave opacity 0.3 to all browser logos and in JavaScript, using navigator.userAgent object I got the information about the browser and then using if/else if statements I matched the particular string (browser name) in the browser information that I got recently using the navigator.userAgent.
If the given string is matched then I passed the browser name in the browser variable. Now I got which browser being used by the user. After I got it, simply I selected this browser class name which is an img tag and gave opacity 1.
You might like this:
- Music Player in JavaScript
- Detect AdBlocker in JavaScript
- Cookie Consent Box in JavaScript
- Detect Network Status in JavaScript
How to Detect Browser in JavaScript [Source Codes]
To create Detect Browser in JavaScript. First, you need to create two Files: HTML & CSS. After creating these files paste the following codes into your file. You can also download the source code files of this Detect Browser program from the given download button.
First, create an HTML file with the name of index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with .html extension, and the images that are used on this program won’t appear. You’ve to download files from the given download button to use images also.
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Detect Browser in JavaScript | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<h2>Browser:</h2>
<div class="logos">
<img class="chrome" src="logos/chrome.png" alt="chrome" title="Google Chrome">
<img class="firefox" src="logos/firefox.png" alt="firefox" title="Mozilla Firefox">
<img class="edge" src="logos/edge.png" alt="edge" title="Microsoft Edge">
<img class="opera" src="logos/opera.png" alt="opera" title="Opera">
<img class="safari" src="logos/safari.png" alt="safari" title="Apple Safari">
</div>
</div>
<script>
let userAgent = navigator.userAgent;
let browser;
if(userAgent.match(/edg/i)){
browser = "edge";
}else if(userAgent.match(/firefox|fxios/i)){
browser = "firefox";
}else if(userAgent.match(/opr\//i)){
browser = "opera";
}else if(userAgent.match(/chrome|chromium|crios/i)){
browser = "chrome";
}else if(userAgent.match(/safari/i)){
browser = "safari";
}else{
alert("Other browser");
}
const logo = document.querySelector(`.logos .${browser}`);
if(logo){
logo.style.opacity = "1";
}
</script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(#252930 50%, #675AFE 50%);
}
::selection{
color: #fff;
background: #675AFE;
}
.wrapper{
display: flex;
flex-wrap: wrap;
background: #fff;
padding: 30px 40px;
align-items: center;
border-radius: 10px;
justify-content: center;
box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
}
.wrapper h2{
color: #675AFE;
font-size: 46px;
}
.wrapper .logos{
margin-left: 15px;
}
.logos img{
opacity: 0.3;
margin: 0 7px;
transition: opacity 0.4s ease;
}
.logos img:last-child{
margin-right: 0px;
}
That’s all, now you’ve successfully created a small program that Detect Browser in JavaScript. If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
