Telegram Group Join Now

How to Detect Browser Using JavaScript

Hello there, Today’s blog is about How to Detect Browser in JavaScript. To determine the user’s browser, I’ll just utilise HTML, CSS, and JavaScript. It’s time to create a simple JavaScript application for detecting browsers.

As shown in the preview image, there is a “Browser” text with multiple browser logos, such as Google Chrome, Mozilla Firefox, Microsoft Edge, and so on, in this short project (Detect Browser in JavaScript).

You can see that all of the logos have their full opacity now, but when you open this HTML page in any of the given browsers, all but the one you’re presently using will fade out.

I hope now you have a general idea of what the project entails. In our article, we will go over this project step by step.

Step1: HTML Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
    <title>browser Detector</title>
</head>

<body>
    <div class="wrapper">
        <div class="browser firefox"></div>
        <div class="browser chrome"></div>
        <div class="browser safari"></div>
        <div class="browser edge"></div>
    </div>	
    <!-- Script -->
    <script src="script.js"></script>
</body>

</html>

We’ll start by adding the structure of the project, but first we’ll need to include some items inside the link, such as the fact that we’ve utilised numerous CSS and javascript files, which we’ll need to connect up inside our HTML file.

10+ Javascript Projects For Beginners With Source Code

<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
<!-- Script -->
<script src="script.js"></script>

Adding the Structure for our Browser detection:

We will simply construct a container for our browser detection and then add the browser icons using the class we defined within our structure.

Using the <div> tag we will create a container for our browseer’s icon we will div a “wrapper” class inside our div tag.
Now Using the div tag with class as firefox,chrome,safari,microsoft edge, we will create different container for different browser icons.

We will just use some simple html tags to construct the structure for our web browser detection, and we will add styling to our wrapper class using the CSS concepts.

Let’s have a look at our structure. If you look at the output, you will see nothing because we added icons using CSS, therefore we will add some sample text to show you how our html structure appears.

Output:

Step2: Adding CSS Code

In your stylesheet, copy and paste the CSS code provided below. To add styling to our browser, we will use the class selector.

.wrapper {
  position: absolute;
  left: 50vw;
  top: 50vh;
  transform: translateX(-50%) translateY(-50%);
}
.wrapper .browser {
  display: inline-block;
  height: 70px;
  width: 70px;
  filter: grayscale(100%);
  position: relative;
  background-repeat: no-repeat;
  background-size: 70px 70px;
}
.wrapper .firefox {
  background-image: url("https://cdn3.iconfinder.com/data/icons/logos-brands-3/24/logo_brand_brands_logos_firefox-128.png");
}
.wrapper .chrome {
  background-image: url("https://cdn3.iconfinder.com/data/icons/logos-brands-3/24/logo_brand_brands_logos_chrome-128.png");
}
.wrapper .safari {
  background-image: url("https://cdn3.iconfinder.com/data/icons/logos-brands-3/24/logo_brand_brands_logos_safari-128.png");
}
.wrapper .edge {
  background-image: url("https://cdn3.iconfinder.com/data/icons/logos-brands-3/24/logo_brand_brands_logos_edge-128.png");
}
.wrapper .browser.active {
  filter: grayscale(0%);
  animation-duration: 1s;
  animation-name: highlight;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes highlight {
  from {
    top: 0;
  }
  to {
    top: -20px;
  }
}

Step1:Using the class selector (.wrapper), we will specify the wrapper’s position as “absolute,” and we will leave 50vw and 50vh space from top and left to align the class to the centre. We’ll translate 50% from the x-axis and 50% from the y-axis using the transform attribute.

50+ Html ,Css & Javascript Projects With Source Code

.wrapper {
  position: absolute;
  left: 50vw;
  top: 50vh;
  transform: translateX(-50%) translateY(-50%);
}

Step2: We will set the display to inline-block using the parent and child selectors (.wrapper.browser). The height and width are both set to 70 pixels. Using the filter property, we will apply grayscale to all of our browser icons. The location of the icons is set to “relative.” We will set the background-size attribute to 70 px.

.wrapper .browser {
  display: inline-block;
  height: 70px;
  width: 70px;
  filter: grayscale(100%);
  position: relative;
  background-repeat: no-repeat;
  background-size: 70px 70px;
}

Step3: We’ll now use the browser class (.firefox,.chrome,.safari,.edge) and the background-image property with the url to add the browser icons.

.wrapper .firefox {
  background-image: url("https://cdn3.iconfinder.com/data/icons/logos-brands-3/24/logo_brand_brands_logos_firefox-128.png");
}
.wrapper .chrome {
  background-image: url("https://cdn3.iconfinder.com/data/icons/logos-brands-3/24/logo_brand_brands_logos_chrome-128.png");
}
.wrapper .safari {
  background-image: url("https://cdn3.iconfinder.com/data/icons/logos-brands-3/24/logo_brand_brands_logos_safari-128.png");
}
.wrapper .edge {
  background-image: url("https://cdn3.iconfinder.com/data/icons/logos-brands-3/24/logo_brand_brands_logos_edge-128.png");
}

Step4: Now we’ll develop an active class that we’ll use to demonstrate javascript ideas. We use the filter attribute within our active class to add grayscale to the 0% percent of the browser on which our programme will operate. We will also add some animation to our browser using the animation-name property. We will call our animation “highlight” and then add keyframes to it using the keyframe.

.wrapper .browser.active {
  filter: grayscale(0%);
  animation-duration: 1s;
  animation-name: highlight;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes highlight {
  from {
    top: 0;
  }
  to {
    top: -20px;
  }
}

Step3: JavaScript Code

Finally, create a JavaScript file called script.js and paste the following codes into it. Remember to save the file with the.js extension.

Restaurant Website Using HTML And CSS With Source Code

// JavaScript code to detect browser
var browser;
var agent = navigator.userAgent.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
if (
  navigator.userAgent.match(/Edge/i) ||
  navigator.userAgent.match(/Trident.*rv[ :]*11\./i)
) {
  browser = "msie";
} else {
  browser = agent[1].toLowerCase();
}
if (document.getElementsByClassName(browser).length > 0)
  document.getElementsByClassName(browser)[0].classList.add("active");

We use the navigator.userAgent property to determine user browser information. We then compare it to the browser name to determine which browser the user is using.

First of all we will create a variable “browser” and also a variable “agent” inside our agent using the navigator.userAgent.match property we will check the name of the browser which the user is using.
Using the if else if statement, we will check to see if the browser name matches the user’s browser, and if it does, we will add the active class to that browser using the.classlist.add property.

Now we’ve completed our Browser detection using HTML , CSS & javascript. I hope you understood the whole project. Let’s take a look at our Live Preview.

Output:

We used Firefox and Chrome, but you can also use Safari.

Weather App Using Html,Css And JavaScript

Live Preview Of Browser detection using HTML , CSS & Javascript

<br /> See the Pen <a href="https://codepen.io/speedysense/pen/jOOxmyy" rel="nofollow noopener" target="_blank"><br /> Javascript Detect Browser</a> by SpeedySense Editorial (<a href="https://codepen.io/speedysense" rel="nofollow noopener" target="_blank">@speedysense</a>)<br /> on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.<br />

Now We have Successfully created our browser detection using HTML , CSS & javascript. You can use this project directly by copying into your IDE. WE hope you understood the project , If you any doubt feel free to comment!!

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

follow : @codewithrandom

Written By : @Arun

Code By: @speedy sense