HOW TO DETECT BROWSER WITH JAVASCRIPT

[{"selector":"#anim-3ea520c3-4ef6-49e8-a5c6-71dc4bbcf672","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2ef730e1-c0ce-4144-a5fa-354eee99d878","keyframes":{"transform":["translate3d(0px, 145.99082%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-95b5c403-4cbb-4388-b64e-de28dd0e32b1","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0698d422-af4c-433b-a499-2fc3089b869d","keyframes":{"transform":["translate3d(0px, -1247.84009%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-35f672ef-f61c-4bb7-8933-648258c76861","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4f083419-3254-4f04-9964-6116516073da","keyframes":{"transform":["translate3d(0px, 297.40728%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] JS (quick guide & examples)

READ THE USER AGENT

[{"selector":"#anim-0a6b5eb4-7039-4d8b-8bec-65568578e1ed","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cb069203-a8e3-4dae-ad1b-a8ffb81271cb","keyframes":{"transform":["translate3d(-116.4557%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1157cf85-8258-4c80-b42f-d61da798079e","keyframes":{"opacity":[0,1]},"delay":200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-220c7633-3b5a-48bf-9978-1901163095d5","keyframes":{"transform":["translate3d(-116.4557%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4fc1c83c-1930-4145-874f-da3d31de41fe","keyframes":{"opacity":[0,1]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a86306e9-3e25-4a58-bd3f-f7faf0703864","keyframes":{"transform":["translate3d(-116.4557%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-48644306-6f21-4670-9113-7db68891006d","keyframes":{"opacity":[0,1]},"delay":300,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-42771568-4449-4044-b4c7-fd894305646c","keyframes":{"transform":["translate3d(-116.4557%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":300,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] CHROME if (navigator.userAgent.indexOf("Chrome") != -1 ) { console.log("Chrome"); } EDGE if (navigator.userAgent.indexOf("Edge") != -1 ) { console.log("Edge"); FIREFOX if (navigator.userAgent.indexOf("Firefox") != -1 ) { console.log("Firefox"); } SAFARI if (navigator.userAgent.indexOf("Safari") != -1 ) { console.log("Safari");

USE DETECTION LIBRARY

[{"selector":"#anim-91e6e0a4-f29c-49ee-9ff4-9a686f27d98e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fec494c0-93f4-49a9-8d90-fc9407a87c4f","keyframes":{"transform":["translate3d(121.08845%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3aaf5686-597b-4247-a7ee-d6718ac42655","keyframes":{"opacity":[0,1]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4341e7cc-78e3-469c-bb87-a63b98214653","keyframes":{"transform":["translate3d(121.08845%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d76b29ea-80f6-4fad-b004-80ad385d3f28","keyframes":{"opacity":[0,1]},"delay":200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-46a880db-da2a-43b8-8583-0a666bafd106","keyframes":{"transform":["translate3d(121.08845%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Detection Library - Bowser PARSE USER AGENT var result = bowser.getParser (navigator.userAgent).getResult(); BROWSER INFO console.log(result.browser.name); console.log(result.browser.version); console.log(result.engine);

DETECT CSS PREFIX

[{"selector":"#anim-e78e0395-31c8-4582-a7c3-f378f6ca04b5","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-30ae4c68-a911-4025-a143-7230fa09e4a2","keyframes":{"transform":["translate3d(-115.43409%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-14d91e85-c1f7-42ab-833a-a51d1c94207e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b2184754-e36e-4638-8fe2-b76fdcf9dadc","keyframes":{"transform":["translate3d(115.18987%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-da694bd3-6aa0-4ae3-a552-28af4f6f193d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2cd93136-8ea2-4d24-a4d5-192bd629e7db","keyframes":{"transform":["translate3d(-115.18988%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Credits - David Walsh MOZ - FIREFOX WEBKIT - CHROME, SAFARI, OPERA, EDGE MS - OLD INTERNET EXPLORER & EDGE O - OLD OPERA var prefix = (Array.prototype.slice. call(window.getComputedStyle( document.documentElement, “”)) .join(””).match(/-(moz|webkit|ms)-/))[1];

DUCK TYPING

[{"selector":"#anim-f8875afc-d80e-4a70-8389-32b165f3377c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-176b51fa-3aa0-4530-abbf-b91d1d9b4eea","keyframes":{"transform":["translate3d(115.18987%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e4fe83da-65e4-4f56-b708-5eed3cb41780","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8a9c318e-e976-4eb3-8a19-ea827e7f916c","keyframes":{"transform":["translate3d(-115.2381%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Credits - StackOverflow var opera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent. indexOf(" OPR/") >= 0; var isFirefox = typeof InstallTrigger !== "undefined"; var isIE = /*@cc_on!@*/false || !!document.documentMode; var isEdge = !isIE && !!window.StyleMedia; var isChrome = !!window.chrome; var isBlink = (isChrome || isOpera) && !!window.CSS;

VISIT & FOLLOW

[{"selector":"#anim-5eacc70f-807a-4099-aa36-9e09f8bdb3e6","keyframes":{"opacity":[0,1]},"delay":2000,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ea73012e-917a-434c-beef-49985b6dfe5a","keyframes":{"opacity":[0,1]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-194d9d55-7895-4379-8ba6-274cec372700","keyframes":{"transform":["translate3d(-128.43511%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a68ff306-79a9-4457-9e27-33c35fc195a1","keyframes":{"opacity":[0,1]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-420a3cc4-d4b7-451a-afeb-d28ca1ff4739","keyframes":{"transform":["translate3d(-151.73267%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b5ce8bb4-70c5-4c86-bdd2-0e775c6547be","keyframes":{"opacity":[0,1]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-20486db2-566d-42f8-a684-b16355b0286a","keyframes":{"transform":["translate3d(-151.23154%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3cd65af4-d11e-40df-a613-8a563da6fb2b","keyframes":{"opacity":[0,1]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4d9e50a0-ee4b-4a96-bbd0-eef1fcb14493","keyframes":{"transform":["translate3d(-171.47058%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cb9363a4-7e4c-40a4-bd05-f1cfcfb7d783 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(5.4032124014701175%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}]

HOW TO DETECT BROWSER WITH JAVASCRIPT

READ THE USER AGENT

01

USE DETECTION LIBRARY

02

DETECT CSS PREFIX

03

DUCK TYPING

04

VISIT & FOLLOW

CODE BOXX YOUTUBE

CODE BOXX PINTEREST

FULL TUTORIAL