<h1>JavaScript tarayıcı algılama</h1>

.chrome {
  background-color: lightblue;
}

.gecko {
  background-color: lightyellow;
}

.safari {
  background-color: lightgreen;
}

.chrome h1:after {
  content: "Chrome";
}

.gecko h1:after {
  content: "Firefox";
}

.safari h1:after {
  content: "Safari";
}

h1:after {
  display: block;
  margin: 1rem 0;
  color: red;
  font-size: xxx-large;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 100vh;
  max-height: 58rem;
  overflow: hidden;
}

h1 {
  max-width: 100%;
  margin: 1rem auto;
  text-align: center;
}

/*css_browser_selector*/
function css_browser_selector(e) {
  var t = e.toLowerCase(),
    r = function (e) {
      return t.indexOf(e) > -1;
    },
    o = "webkit",
    s = document.documentElement,
    n = [
      !/opera|webtv/i.test(t) && /msie\s(\d)/.test(t)
        ? "ie ie" + RegExp.$1
        : r("gecko/")
        ? "gecko"
        : r("chrome")
        ? o + " chrome"
        : r("applewebkit/")
        ? o + " safari"
        : ""
    ];
  return (c = n.join(" ")), (s.className += " " + c), c;
}
css_browser_selector(navigator.userAgent);