Conditionally Display Based Upon Browser

Saves the user agent string to the DOM on-load and then uses CSS styles to conditionally show/hide elements based upon the user's browser.

by Alexander

HTML

<h1>
    Your browser is
    <span class="only-show-in-chrome">Chrome</span>
    <span class="only-show-in-firefox">FireFox</span>
    <span class="only-show-in-ie9">IE 9</span>
    <span class="only-show-in-ie10">IE 10</span>
    <span class="only-show-in-ie">IE</span>
</h1>

CSS

.only-show-in-ie10,
.only-show-in-ie9,
.only-show-in-ie,
.only-show-in-chrome,
.only-show-in-firefox {
    display: none;
}

html[data-useragent*='MSIE 10.0'] .only-show-in-ie10 { display: initial; }
html[data-useragent*='MSIE 9.0'] .only-show-in-ie9 { display: initial; }
html[data-useragent*='MSIE'] .only-show-in-ie { display: initial; }
html[data-useragent*='Chrome'] .only-show-in-chrome { display: initial; }
html[data-useragent*='Firefox'] .only-show-in-firefox { display: initial; }

h1 span { text-decoration: underline; }

JavaScript

document.documentElement.setAttribute('data-useragent', navigator.userAgent);