How to detect user browser using Javascript

#html #css #javascript #incoder

Hello friends, today in this blog, you will learn how to create a browser detector using Javascript. In our previous blog, we saw how to create a to-do list app using HTML, CSS, and Javascript. I have already posted a blog on how to detect user location using Javascript. Now it's time to create a browser detector. Earlier I shared many projects related to HTML, CSS, and Javascript. You can check here. Now it's time to create a to-do list app. If you are interested then you can check my other javascript projects after reading this blog. My Javascript blogs.

In this small project [How to detect user browser] there is a text and some logos of browsers such as Google Chrome, Mozilla Firefox, Opera, Microsoft Edge, etc as you can see in the image above. As you can see all logos are faded out except one browser logo you’re currently using. If you are unable to understand what am I trying to say, you can check the source code and preview it as well.

HTML and Javascript Code

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <div class="container">
        <div class="title">You're currently using <span class="browserName">chrome</span> Browser</div>
        <div class="logos">
            <div class="browserLogo ieLogo"></div>
            <div class="browserLogo edgeLogo"></div>
            <div class="browserLogo firefoxLogo"></div>
            <div class="browserLogo operaLogo"></div>
            <div class="browserLogo chromeLogo"></div>
            <div class="browserLogo safariLogo"></div>
        </div>
    </div>

    <script>
        function detectBrowser() {
            let UA = navigator.userAgent
            let browser;
            if (!!document.documentMode == true) {
                browser = "IE";
            } else if (UA.match(/edg/i)) {
                browser = "edge";
            } else if (UA.match(/firefox|fxios/i)) {
                browser = "firefox";
            } else if (UA.match(/opr\//i)) {
                browser = "opera";
            } else if (UA.match(/chrome|chromium|crios/i)) {
                browser = "chrome";
            } else if (UA.match(/safari/i)) {
                browser = "safari";
            } else {
                alert("You are using another browser");
            }
            return browser
        }

        function setBrowser(browser) {
            let logo = document.querySelector(`.${browser}Logo`)
            let browserName = document.querySelector(`.browserName`)

            logo.classList.add('current')
            browserName.innerHTML = browser
            browserName.classList.add(browser)
        }
        setBrowser(detectBrowser().toLowerCase())
        console.log(detectBrowser())
    </script>
<!-- Code injected by live-server -->
<script type="text/javascript">
  // <![CDATA[  <-- For SVG support
  if ('WebSocket' in window) {
    (function () {
      function refreshCSS() {
        var sheets = [].slice.call(document.getElementsByTagName("link"));
        var head = document.getElementsByTagName("head")[0];
        for (var i = 0; i < sheets.length; ++i) {
          var elem = sheets[i];
          var parent = elem.parentElement || head;
          parent.removeChild(elem);
          var rel = elem.rel;
          if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
            var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
            elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
          }
          parent.appendChild(elem);
        }
      }
      var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
      var address = protocol + window.location.host + window.location.pathname + '/ws';
      var socket = new WebSocket(address);
      socket.onmessage = function (msg) {
        if (msg.data == 'reload') window.location.reload();
        else if (msg.data == 'refreshcss') refreshCSS();
      };
      if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
        console.log('Live reload enabled.');
        sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
      }
    })();
  }
  else {
    console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
  }
  // ]]>
</script></body>

</html>

CSS Code

/* --------------------- Created By InCoder --------------------- */

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.container {
  height: 100vh;
  background-color: rgb(0 0 0 / 80%);
}

.container .title {
  color: #fff;
  font-weight: 500;
  text-align: center;
  padding-top: 1.8rem;
  font-size: clamp(2rem, 4vw, 3rem);
}

.browserName {
  text-transform: capitalize;
}

.browserLogo {
  height: 7rem;
  transition: all 0.3s;
  filter: grayscale(0.9);
  width: clamp(7rem, 4vw, 5rem);
}

.chrome {
  font-weight: 800;
  color: #fbc011;
}

.opera {
  font-weight: 800;
  color: #ff1429;
}

.ie {
  font-weight: 800;
  color: #37a5e2;
}

.edge {
  font-weight: 800;
  color: #38cb54;
}

.firefox {
  font-weight: 800;
  color: #b93ce7;
}

.safari {
  font-weight: 800;
  color: #0184ca;
}

.logos {
  height: 65%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.chromeLogo {
  background: url(https://drive.google.com/uc?id=199wEkk6kQbv_OzgTLSAdAZ5c86gLNnCP&export=view) no-repeat center 100%;
  background-size: cover;
}

.operaLogo {
  background: url(https://drive.google.com/uc?id=1OGVcfiKtfCWztQm8yMUT2GCz_BpwftWD&export=view) no-repeat center 100%;
  background-size: cover;
}

.ieLogo {
  background: url(https://drive.google.com/uc?id=1yg5gjO7yaXLQuAA8rrJ84JCApzyi0BZB&export=view) no-repeat center 100%;
  background-size: cover;
}

.edgeLogo {
  background: url(https://drive.google.com/uc?id=13Y8-krv89SAu3SL8qlSjddMnOODiCUix&export=view) no-repeat center 100%;
  background-size: cover;
}

.firefoxLogo {
  background: url(https://drive.google.com/uc?id=1dH-uY09eDhZZriVArof2bpr7Nux4tKjT&export=view) no-repeat center 100%;
  background-size: cover;
}

.safariLogo {
  background: url(https://drive.google.com/uc?id=1-wMfuXglcL27eXEihH2ODqPQb0fWjpfi&export=view) no-repeat center 100%;
  background-size: cover;
}

:is(.operaLogo, .chromeLogo, .ieLogo, .edgeLogo, .firefoxLogo, .safariLogo) {
    transform: scale(.9);
}

:is(.operaLogo, .chromeLogo, .ieLogo, .edgeLogo, .firefoxLogo, .safariLogo).current {
  filter: grayscale(0);
  transform: scale(1.2);
}

@media (max-width: 710px) {
  .browserLogo {
    width: 4rem;
    height: 4rem;
  }
}

@media (max-width: 500px) {
  .browserLogo {
    width: 3rem;
    height: 3rem;
  }

  .logos {
    flex-wrap: wrap;
  }

  .logos div {
    margin-left: .3rem;
  }
}

@media (min-width: 1440px) {
  .logos {
    max-width: 70%;
    justify-content: center;
  }
}

DEV Community

How to detect user browser using Javascript

You may like these:

HTML and Javascript Code

CSS Code

Top comments (0)

Read next

ReactJS Best Practices: Writing Clean and Maintainable Code

Building a High-Performance Cache Manager in Node.js with TypeScript and ioredis

Blur page body when hover on Nav Bar

Building a Kanban Board with Next.js,Vercel AI and Tolgee