jQuery get Browser name and add it to site body as class

16, 06, 2020

Author: Erik

Have you needed to apply specific CSS styles to a particular web browser (Internet Explorer, FireFox, Chrome, Opera...)? I have a Javascript function that I use in all my site to accomplish this.

I use this function to identify the browser that is viewing a site and using its name as class that I assign the the <body> tag. I find this to beneficial when there are custom styles needed for specific browsers. For those who have had to make sites work for Internet Explorer 11 and lower know what I mean.

getBrowserName() {
		var name = "unknown-browser";
	    if(navigator.userAgent.indexOf("MSIE")!=-1 || navigator.userAgent.indexOf("rv:11.0")!=-1) name = "msie";
	    else if(navigator.userAgent.indexOf("Edge")!=-1) name = "microsoft-edge";
	    else if(navigator.userAgent.indexOf("Firefox")!=-1) name = "firefox";
	    else if(navigator.userAgent.indexOf("Opera")!=-1) name = "opera";
	    else if(navigator.userAgent.indexOf("Chrome") != -1) name = "chrome";
	    else if(navigator.userAgent.indexOf("Safari")!=-1) name = "safari";

		var OSName="unknown-os";
		if (navigator.appVersion.indexOf("Win")!=-1) OSName="windows";
		if (navigator.appVersion.indexOf("Mac")!=-1) OSName="mac-os";
		if (navigator.appVersion.indexOf("X11")!=-1) OSName="unix";
		if (navigator.appVersion.indexOf("Linux")!=-1) OSName="linux";

		var IEVersion="not-ie";
		if(navigator.userAgent.indexOf("rv:11.0")!=-1) IEVersion = "ie ie-11";
		else if(navigator.userAgent.indexOf("MSIE 10.0")!=-1) IEVersion = "ie ie-10";
		else if(navigator.userAgent.indexOf("MSIE 9.0")!=-1) IEVersion = "ie ie-9";
		else if(navigator.userAgent.indexOf("MSIE 8.0")!=-1) IEVersion = "ie ie-8";
		else if(navigator.userAgent.indexOf("MSIE 7.0")!=-1) IEVersion = "ie ie-7";

		var windowsVersion='not-windows';
		if(navigator.userAgent.indexOf("Windows NT 5.0")!=-1) windowsVersion = "windows-2000";
		else if (navigator.userAgent.indexOf("Windows NT 5.1")!=-1) windowsVersion="windows-xp";
		else if(navigator.userAgent.indexOf("Windows NT 6.0")!=-1) windowsVersion = "windows-vista";
		else if(navigator.userAgent.indexOf("Windows NT 6.1")!=-1) windowsVersion = "windows-7";
		else if(navigator.userAgent.indexOf("Windows NT 6.2")!=-1) windowsVersion = "windows-8";
		else if(navigator.userAgent.indexOf("Windows NT 6.3")!=-1) windowsVersion = "windows-8-1";
		else if(navigator.userAgent.indexOf("Windows NT 10.0")!=-1) windowsVersion = "windows-10";

		var device="not-mobile"
		if (navigator.userAgent.match(/Android|BlackBerry|Kindle|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) device="mobile";

		var isKindle="not-kindle"
		if (navigator.userAgent.match(/Kindle|KFTHWI/i)) isKindle="kindle";

	    jQuery('body').addClass(name);
		jQuery('body').addClass(OSName);
		jQuery('body').addClass(device);
		jQuery('body').addClass(IEVersion);
		jQuery('body').addClass(windowsVersion);
		jQuery('body').addClass(isKindle);
	};