Browser Detection

Developer
Brandon Kennedy
Size
3,803 Kb
Views
20,240
  1. Browser Detection Previews
  2. Browser Detection HTML Codes
  3. Browser Detection CSS Codes
  4. Browser Detection JS Codes

How do I make an browser detection?

A test to find which browser is being used.Tested on Chrome, Safari, Firefox, IE 9-11, Edge.modified a script found here: http://stackoverflow.com/questions/28185131/how-to-detect-safari-chrome-ie-firefox-and-opera-browser-on-load-javascript. What is a browser detection? How do you make a browser detection? This script and codes were developed by Brandon Kennedy on 18 September 2022, Sunday.

Browser Detection Previews
IQ Test

Browser Detection - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Browser Detection</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="icon chrome"></div> <div class="icon safari"></div> <div class="icon firefox"></div> <div class="icon msie"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Browser Detection - Script Codes CSS Codes

/* start configure */
*, *:before, *:after, *:focus, *:active, *:focus:active { box-sizing: border-box; outline: none;
}
html { font-size: 10px;
}
/* colors */
/* images */
/* end configure */
.container { left: 50vw; position: absolute; top: 50vh; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
}
.container .icon { display: inline-block; -webkit-filter: grayscale(100%); filter: grayscale(100%); height: 8rem; position: relative; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; width: 8rem;
}
.container .icon:after { border-radius: 50%; bottom: 2rem; box-shadow: 0 3.3rem 1rem 0 rgba(34, 34, 34, 0.4); content: ""; height: .5rem; left: 20%; position: absolute; width: 60%;
}
.container .icon.active { -webkit-animation-name: hover; animation-name: hover; -webkit-filter: grayscale(0%); filter: grayscale(0%);
}
.container .icon.active:after { -webkit-animation-name: hoverShadow; animation-name: hoverShadow;
}
.container .icon.active, .container .icon.active:after { -webkit-animation-duration: .8s; animation-duration: .8s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate;
}
.container .icon.chrome { background-image: url("http://icons.iconarchive.com/icons/appicns/simplified-app/256/appicns-Chrome-icon.png"); background-repeat: no-repeat; background-size: 8rem 8rem;
}
.container .icon.safari { background-image: url("http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/256/safari-icon.png"); background-repeat: no-repeat; background-size: 8rem 8rem;
}
.container .icon.firefox { background-image: url("http://icons.iconarchive.com/icons/dakirby309/simply-styled/256/Firefox-icon.png"); background-repeat: no-repeat; background-size: 8rem 8rem;
}
.container .icon.msie { background-image: url("https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/Internet_Explorer.png"); background-repeat: no-repeat; background-size: 8rem 8rem;
}
@-webkit-keyframes hover { from { top: 0; -webkit-transform: scaleX(1) scaleY(1); transform: scaleX(1) scaleY(1); } to { top: -1.6rem; -webkit-transform: scaleX(0.9) scaleY(1.05); transform: scaleX(0.9) scaleY(1.05); }
}
@keyframes hover { from { top: 0; -webkit-transform: scaleX(1) scaleY(1); transform: scaleX(1) scaleY(1); } to { top: -1.6rem; -webkit-transform: scaleX(0.9) scaleY(1.05); transform: scaleX(0.9) scaleY(1.05); }
}
@-webkit-keyframes hoverShadow { from { bottom: 2rem; box-shadow: 0 3.3rem 1rem 0 rgba(34, 34, 34, 0.4); left: 20%; width: 60%; } to { bottom: .6rem; box-shadow: 0 3.2rem 1rem 0 rgba(34, 34, 34, 0.2); left: 25%; width: 50%; }
}
@keyframes hoverShadow { from { bottom: 2rem; box-shadow: 0 3.3rem 1rem 0 rgba(34, 34, 34, 0.4); left: 20%; width: 60%; } to { bottom: .6rem; box-shadow: 0 3.2rem 1rem 0 rgba(34, 34, 34, 0.2); left: 25%; width: 50%; }
}

Browser Detection - Script Codes JS Codes

$(document).ready(function() { var ua = navigator.userAgent.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i), browser; if (navigator.userAgent.match(/Edge/i) || navigator.userAgent.match(/Trident.*rv[ :]*11\./i)) { browser = "msie"; } else { browser = ua[1].toLowerCase(); } $('div.icon.' + browser).addClass("active");
});
Browser Detection - Script Codes
Browser Detection - Script Codes
Home Page Home
Developer Brandon Kennedy
Username brandonkennedy
Uploaded September 18, 2022
Rating 4.5
Size 3,803 Kb
Views 20,240
Do you need developer help for Browser Detection?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Brandon Kennedy (brandonkennedy) Script Codes
Name
Slug loader
CSS Animated Search Box Concepts
SCSS Tick Marks Function
Compare Some Different Grid Systems
BG Images WITHOUT Defining Them In CSS
And yet another box shadow loader
Crooked section dividers
3D 2D Box-Shadow Fish
Lazyload.js
Digital Static Search Box
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!