Skip to content

Instantly share code, notes, and snippets.

@yukulele

yukulele/ie-version.js

Last active January 9, 2018 13:45
Show Gist options
  • Save yukulele/11185298 to your computer and use it in GitHub Desktop.
Save yukulele/11185298 to your computer and use it in GitHub Desktop.
Download ZIP
Test Internet Explorer version and add classes to <html>
Raw
ie-version.js
var ieVersion = (function(){
var classes = []
var match = /msie (\d+)/i.exec( navigator.userAgent )
if( match ){
var version = +match[1]
var min = 6
var max = 11
classes.push( 'ie' )
classes.push( 'ie' + version )
for( var i = min ; i <= max ; i++ ){
if( version < i )
classes.push( 'lt-ie' + i )
else
classes.push( 'gte-ie' + i )
if( version > i )
classes.push( 'gt-ie' + i )
else
classes.push( 'lte-ie' + i )
}
}else{
classes.push( 'no-ie' )
}
document.documentElement.className += ' ' + classes.join(' ')
return version
})();
Raw
ie-version.md

ie-version.js

ie-version.js add CSS classes to <html> for IE like conditional comments.

There is also a server side version (php) : https://gist.github.com/yukulele/11209552

Example

with Internet Explorer 10

<html class="ie gte-ie6 gt-ie6 gte-ie7 gt-ie7 gte-ie8 gt-ie8 gte-ie9 gt-ie9 lte-ie10 ie10 gte-ie10 lt-ie11 lte-ie11">

with Firefox

<html class="no-ie">

Usage

<script src="js/ie-version.js"></script>
<link rel="stylesheet" href="css/style.css">
html.ie h1 {
	color: red;
}

html.ie8 h1 {
	color: orange;
}

html.gte-ie9 h1 {
	color: blue;
}

html.no-ie h1 {
	color: green;
}

you can also test version in javascript:

if(ieVersion < 9)
	alert('please, upgrade')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment