Tutorial Add Data Attribute of User Agent

by in , 0 

var b = document.documentElement;
b.className = b.className.replace('no-js','js');
b.setAttribute("data-useragent",  navigator.userAgent);
b.setAttribute("data-platform", navigator.platform );

Which results in data attributes being added to the html element like:

<html 
	data-useragent="Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)"
	data-platform="Win32">
	...

Which allows you to be able to target very specific browsers on very specific platforms with CSS:

html[data-useragent*="Chrome/13.0"][data-platform="Win32"] {
  ...
}

Reference URL

Leave a Reply