Skip to content

Instantly share code, notes, and snippets.

@feo52

feo52/index.html

Created October 3, 2014 13:22
Show Gist options
  • Save feo52/5fa7d986fc416b11ae0d to your computer and use it in GitHub Desktop.
Save feo52/5fa7d986fc416b11ae0d to your computer and use it in GitHub Desktop.
Download ZIP
css hacks for IE
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="IE6orLess">IE6orLess</div>
<div class="IE7orLess">IE7orLess</div>
<div class="IE8orLess">IE8orLess</div>
<div class="IE9orLess">IE9orLess</div>
<div class="IE10orLess">IE10orLess</div>
<div class="IEall">IEall</div>
<div class="IE8orOver">IE8orOver</div>
<div class="IE9orOver">IE9orOver</div>
<div class="IE10orOver">IE10orOver</div>
<div class="IE11orOver">IE11orOver</div>
<div class="IE8only">IE8only</div>
<div class="IE9only">IE9only</div>
<div class="IE10only">IE10only</div>
<div class="IE11only">IE11only</div>
</body>
</html>
Raw
style.css
/* -------------------------------------------------------------------------
css hacks for IE ( as of 2014 )
------------------------------------------------------------------------- */
/* -------------------------------------------------------------
IE6 or less
------------------------------------------------------------- */
.IE6orLess { _background:greenyellow; }
/* -------------------------------------------------------------
IE7 or less
------------------------------------------------------------- */
.IE7orLess { *background:greenyellow; }
/* -------------------------------------------------------------
IE8 or over ( as of 2014 )
------------------------------------------------------------- */
.IE8orOver { background:greenyellow\0; }
/* -------------------------------------------------------------
IE9 or over ( as of 2014 )
------------------------------------------------------------- */
:root .IE9orOver { background:greenyellow\0; }
/* -------------------------------------------------------------
IE10 or over ( as of 2014 )
------------------------------------------------------------- */
@media all and (-ms-high-contrast:none){
.IE10orOver { background:greenyellow\0; }
}
/* -------------------------------------------------------------
IE11 or over ( as of 2014 )
------------------------------------------------------------- */
@media all and (-ms-high-contrast:none){
*::-ms-backdrop, .IE11orOver { background:greenyellow\0; }
}
/* -------------------------------------------------------------
IE all ( as of 2014 )
------------------------------------------------------------- */
.IEall { background:greenyellow\0; } /* IE 8 or over */
.IEall { background:greenyellow\9; } /* IE10 or less */
/* -------------------------------------------------------------
IE8 or less ( as of 2014 )
------------------------------------------------------------- */
.IE8orLess { background:greenyellow\9; }/* IE10 or less */
:root .IE8orLess { background:transparent\0; }/* IE 9 or over */
/* -------------------------------------------------------------
IE9 or less ( as of 2014 )
------------------------------------------------------------- */
.IE9orLess { background:greenyellow\9; } /* IE10 or less */
@media all and (-ms-high-contrast:none){ /* IE10 or over */
.IE9orLess { background:transparent\0; }
}
/* -------------------------------------------------------------
IE10 or less ( as of 2014 )
------------------------------------------------------------- */
.IE10orLess { background:greenyellow\9; }
/* -------------------------------------------------------------
IE11only ( as of 2014 )
------------------------------------------------------------- */
@media all and (-ms-high-contrast:none){
*::-ms-backdrop, .IE11only { background:greenyellow\0; }
}
/* -------------------------------------------------------------
IE10only ( as of 2014 )
------------------------------------------------------------- */
@media all and (-ms-high-contrast:none){
.IE10only { background:greenyellow\0; }
*::-ms-backdrop, .IE10only { background:transparent\0; }
}
/* -------------------------------------------------------------
IE9only ( as of 2014 )
------------------------------------------------------------- */
:root .IE9only { background:greenyellow\0; } /* IE 9 or over */
@media all and (-ms-high-contrast:none){ /* IE10 or over */
:root .IE9only { background:transparent\0; }
}
/* -------------------------------------------------------------
IE8only ( as of 2014 )
------------------------------------------------------------- */
.IE8only { background:greenyellow\0; } /* IE 8 or over */
:root .IE8only { background:transparent\0; } /* IE 9 or over */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment