JS
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
<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:
CSS
html[data-useragent*="Chrome/13.0"][data-platform="Win32"] {
...
}
This was referenced from a post by Rogie King that has since gone offline.
- Tech Tricks answered 9 months ago
- You must login to post comments
Your Answer
Please login first to submit.