Every HTML Integrator need to use CSS hack one time during his career. Sometimes, Internet Explorer is rebellious, or an other browser interprate a rule in his own way, it can be very useful in order to have a website compatible on every browsers.
Let’s begin by conditionnal comments, we will see how to set a special stylesheet for a special IE version.
Conditionnal comments
Every IE versions
<!--[if IE]> Here the code for IE <![endif]-->
A specific version of IE
<!--[if IE 5.0]> for IE 5.0 <![endif]--> <!--[if IE 5.5000]> for IE 5.5 <![endif]--> <!--[if IE 6]> for IE 6.0 <![endif]--> <!--[if IE 7]> for IE 7.0 <![endif]--> <!--[if IE 8]> for IE 8.0 <![endif]--> <!--[if IE 9]> for IE 9.0 <![endif]-->
For many versions of IE
<!--[if comparator IE version]>
Here the code respecting the condition
<![endif]-->
The “comparator” can have this values:
- gte : greater than equal
- gt : greater than
- lte : less than equal
- lt : less than
You can use these operation too :
- | : or
- & : and
- ! : not
Some examples :
<!--[if lte IE 9]> Less than equal IE9<![endif]--> <!--[if gt IE 7]> Greater than IE7<![endif]--> <!--[if (lt IE 6)|(IE 8)]> less than IE6 or IE8 <![endif]--> <!--[if (gt IE 5)&(!IE 7)]> Greater than IE5 and not IE7 <![endif]--> <!--[if !IE]><!--> Not IE browser <!--<![endif]-->
If you want to add a specific CSS stylesheet :
<!--[if IE]>
<link type="text/css" rel="stylesheet" href="ie.css" />
<![endif]-->
CSS Hacks
Selectors Hacks
Warning ! This hacks should be used with moderation !
* html myselector{} // IE 6 et inférieurs
* > myselector{} // Tous sauf IE6
* + html myselector{} // IE7 uniquement
*:first-child+html myselector{} // IE7 uniquement
Attributes Hacks
You can target the attribute of the selector :
.test { _color: blue } // IE6
.test { *color: blue /* or #color: blue */ } // IE6 or IE7
.test { color: blue\9 } // IE6 or IE7 or IE8
So you know the most usefull CSS hacks, if you want more, you can go on this website
The final word
I hope this article has been usefull for you ! To finish, I will explain how I use conditionnal comments on my websites. First, i have a global CSS for every browsers. After, I add specific CSS for IE :
<link href="css/reset.css" media="screen" rel="stylesheet" type="text/css" /> <link href="css/styles.css" media="screen" rel="stylesheet" type="text/css" /> <!--[if lt IE 9]> <link media="all" type="text/css" rel="stylesheet" href="css/iefix.css"> <![endif]--> <!--[if IE 7]> <link media="all" type="text/css" rel="stylesheet" href="css/iefix7.css"> <![endif]--> <!--[if IE 6]> <link media="all" type="text/css" rel="stylesheet" href="css/iefix6.css"> <![endif]-->
If you have an other way to do, you can explain it on the comments 😉