HOW TO DETECT BROWSER WITH JAVASCRIPT

[{"selector":"#anim-842d96dc-b6fb-4558-8746-ac3cb20c5651","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-604337bd-77c6-4bb6-9be2-9e2f9db8be06","keyframes":{"transform":["translate3d(0px, 138.77433%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ce423d8b-01e7-4ab4-aeff-3e6d7e961af6","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-033d166d-b590-4417-8aa1-f6993cd06115","keyframes":{"transform":["translate3d(0px, -1289.5067%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1febf3c9-de1d-4102-ae60-460521d078b7","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a6486f79-87e5-40fe-bd13-5e6fc65d2f36","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-bdc16b77-3b0b-4d3a-ba89-bab09e655195","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-85975ac5-f943-4f83-be56-e77b9687d9d1","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-1d7553a8-f777-40f1-aea3-4be46fa5178c","keyframes":{"opacity":[0,1]},"delay":200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-27192065-24ea-4798-96b0-e6a54050b1e7","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-d9e9582d-e745-430f-aaf4-b6a3a02eb015","keyframes":{"opacity":[0,1]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b03e4a7d-812a-43f7-ac6c-ea66ba0bb8f5","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-1df5b769-6af6-483a-86c3-65ccd416476f","keyframes":{"opacity":[0,1]},"delay":300,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0bf36cdf-2f32-4742-9611-372f3f500757","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-413db5f6-3918-4464-81c9-2f024fd61ce5","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c064433a-a663-4d00-8e5f-852321cf2b9f","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-04da7996-a6c9-4277-acd7-576149a936bc","keyframes":{"opacity":[0,1]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-dc409e0d-1293-456f-8920-558ee5add942","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-9959159e-614b-4046-ac02-3c501f7d1a07","keyframes":{"opacity":[0,1]},"delay":200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f41692b5-bc1f-4c4e-ad6d-20451a7ffef0","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-74ccbb15-e621-4e05-afc0-2eae83823f44","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6ed0d41b-99f8-4dda-b276-2e017f88a22f","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-909e9c12-c564-4bdf-9e11-751a7ff5c93c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-09a88825-233a-46d3-9219-7ef68b470bf8","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-a38af848-fc24-4132-a578-ebf5da24f002","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-52206d56-b9e2-46ed-b57e-ff98e6a69711","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-aa47ab38-0ba2-424e-87e9-c9938f7727a0","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0b86510b-cb90-4763-9aba-dadd88434034","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-06b8b929-0684-4b58-897e-34c450095eda","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-dab129bb-272c-4f74-9f01-0344e70163e9","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-b7815a97-214a-4a2c-8818-67adfb61b787","keyframes":{"opacity":[0,1]},"delay":2000,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b56f2f56-4120-4cc0-8d22-66e5f4b3924b","keyframes":{"opacity":[0,1]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ec31dac1-e141-4007-8322-74cb0bb9e2db","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-68156ed5-904c-42f7-bfa1-e3929a1cee09","keyframes":{"opacity":[0,1]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-224436b9-ec9b-43b8-9100-196457289550","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-0ff852f7-321b-4adb-81bf-ec3924e3ec0d","keyframes":{"opacity":[0,1]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-63329436-41bf-4b8d-8e92-852e443ecd86","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-58fdd1c1-982d-49cb-b96f-a58a005e562d","keyframes":{"opacity":[0,1]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c95d39fb-f521-4be2-8a73-3051962ede78","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-6d90c32a-f6fb-46bc-bbf9-36a668b6c97b [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-4.249001618125643%, 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