Hey friends, Welcome to CodeWithNepal today in this blog you’ll learn How to build Browser Detector in JavaScript. To detect user browser, I’ll use only HTML CSS & JavaScript. In the earlier blog, I shared Word Guessing Game and now it’s time to create a simple program that detects browsers in JavaScript.
In this small project ( Detect Browser ), as you can see withinside the preview image of the project, there’s a ‘Browser’ textual content with special browser trademarks Google Chrome, Mozilla Firefox, Microsoft Edge, etc.
Now you can see that all logos of your respective browsers have their full opacity, but when you open the current HTML page on any of the given browsers, all logos will slightly fade out except one browser logo you’re currently using.
To detect the browser, I have used a JavaScript navigator object. This navigator object contains information about the browser which is used to detect the following browsers. This JavaScript object is used for browser detection as well as to get different information related to the browser. Likewise, to detect the browser follow the given instruction.
You might like this:
Detect Browser in JavaScript
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 is 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.
Step 1
Initially you need to create two files HTML (.html) and CSS (.css) . After creating these files, just paste the following codes into your VS IDE code sample create an HTML file called index.html and paste the indicated codes into your HTML file (.html) Remember, you must create a file with the extension. HTML.
<!DOCTYPE html>
<!-- Coding By CodeWithNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Detect Browser in JavaScript | CodeWithNepal</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>
Step 2
And, create a CSS file named style.css and paste the indicated codes into your CSS file. Remember, you must create a .css file.
/* 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%, #b75afe 50%);
}
::selection{
color: #fff;
background: #b75afe;
}
.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: #b75afe;
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 built Detect Browser in JavaScript If your code doesn’t work or you’ve faced any problems, please free to comment down I will provide the source code files.
Top comments (1)
Two points:
First, why do you want to detect the browser? In times past it was a useful thing to know how to do, but these days it's usually irrelevant, and when it is relevant it's usually better to test for what individual features are available rather than the branding of the browser.
Second, there are a lot of user agents besides the ones you mention, and it's very common for the
userAgentproperty to be spoofed.