Skip to content

Instantly share code, notes, and snippets.

@soren
Created February 4, 2015 08:11
Show Gist options
  • Save soren/9be95341c09ae6c6502b to your computer and use it in GitHub Desktop.
Save soren/9be95341c09ae6c6502b to your computer and use it in GitHub Desktop.
Simple example of CSS that shows/hides elements based on the browser
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Open Link in IE</title>
<meta name="author" content="Søren Lund">
<!-- We expect IE browser -->
<style>span.showIE { display: inline } span.hideIE { display: none }</style>
<!-- Reverse the logic for non-IE browsers -->
<!--[if !IE]><!-->
<style>span.showIE { display: none } span.hideIE { display: inline }</style>
<!--<![endif]-->
</head>
<body>
<p>
<span class="showIE">Please try this: <a href="http://www.google.com/">Google</a></span>
<span class="hideIE">You need to open IE and copy this link into the address field:
<strong>http://www.google.com/</strong>
</span>
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment