Apply CSS to IE7 only
CSS hacks for browsers typically either exploit a flawed implementation or the complete lack of an implementation of a certain feature in the rendering engine. Most webdesigners know about the relatively poor level of web standards support in Internet Explorer and have tried for years to find workarounds for the most grievous bugs. However, exploiting software bugs to create a hack is quite dangerous because software gets updated and old flaws are fixed.
When Microsoft introduced conditional comments with Internet Explorer 5, a lot of problems were fixed. One could use constructs such as
<!--[if IE]>
<style type="text/css" media="screen">
#myID {
background-color: red;
}
</style>
<![endif]-->
to tailor CSS styles to Internet Explorer only. No other browser would parse anything in those conditional comments.
Conditional comments have a lot of drawbacks, though. Most problematically, they require changes to the actual HTML source since there is no equivalent to conditional comments in CSS. They also don’t work well with XSL as Dave Shea has pointed out. This is why most web developers turned to the less reliable technique – the exploitation of browser bugs – to target specific browsers in their stylesheets.
The * html Hack
One of the best known hacks for Internet Explorer is the * html hack which takes advantage of the flawed implementation of the DOM in Internet Explorer.
All web pages have a root element, <html>, containing two children, <head> and <body>. Those two contain other children in turn. Internet Explorer (both for Windows and Mac) disagrees, however. In its DOM there is another root element, which contains <html>.
If you write a CSS selector like
* html #myID {
*background-color: red;
}
only Internet Explorer (version 6 and lower) will apply the rule. The * selector, also called the “universal” selector, selects any element. The rule above will apply to the element with the ID myID which is a child of <html> which in turn is the child of any other element. Since only in Internet Explorer, <html> is contained by another element, the rule will be ignored by all other browsers.
While this has worked fine until now, Chris Wilson, Group Program Manager for IE Platform and Security at Microsoft has announced, even before the launch of Internet Explorer 7, that universal selector-related hacks will fail in IE7’s strict mode. Put simply, the * html hack no longer works in Microsofts most recent webbrowser.
Applying CSS to IE7 only
Do not despair, gentle reader, there are several solutions to this problem.
Although Internet Explorer 7 fixed a bug which occured when a property name was prefixed with an underscore or a hyphen, other prefixes are treated as they were in IE6. While this disabled the fairly well known underscore hack, new opportunities grew. If you add any other (non-alphanumeric, of course) character in front of a CSS property, it will be ignored by all browsers except Internet Explorer. Unfortunately Microsoft excluded the hyphen and underscore from being used in this hack (both are reserved in the CSS specification), so we have to rely on characters not in the CSS specification, for example an asterisk (*). This also means, the hack won’t validate.
html>body #myID {
*background-color: red;
}
The above example only applies background-color: red only on Internet Explorer 7. The html>body selector makes sure, IE6 and below won’t understand the style.
Another possibility would be leaving out a selector on either side of the CSS child combinator. IE7 replaces the empty selector with a *. For example, >body is translated to *>body by Internet Explorer 7, which is actually a valid selector, since body is indeed the child of an arbitrary element, namely <html>.
>body #myID {
background-color: red;
}
Internet Explorer versions below 7 don’t understand the child combinator and ignore the rule completely, as do all other browsers, since >body should generate a parsing error as it’s not valid CSS. So, once again, only IE7 applies the rule.
Unfortunately, above solutions don’t validate. If you don’t care about one small error in your stylesheets, you can use them of course. If, like me, you care about valid CSS, there is a third hack that you can use.
*:first-child+html {
background-color: red;
}
Now you have three different hacks which allow you to target Internet Explorer 7 specifically so you can fix all those nasty rendering bugs.
Oh, and if this was helpful to you, you can digg it!
Tags: css, design, hacks, html, ie7, internetexplorer, xhtml
Hi Alexander,
Came across this page whilst looking for a method to target IE7 only in CSS. I was unaware of the alphanumeric characters allowed by IE7 in front of the property: thank you for this. I will look into it further myself now…! Also read about some CSS3 pseudo classes being recognised by Safari, Firefox and some others…
e.g. #myContainer:not([idName=”myContainer”]) {
margin: 10px; }
this rule will only be understood by CSS3 supportive browsers, and ignored by IE7 and below versions - however I have not done testing nor research on this so pls don’t use it/take it as word of CSS-God ;-) I found it on another website: http://www.tanreisoftware.com/blog/ie7.html
Simone
Thanks for the hint on the pseudo classes. I was going to write a post about targeting specific browsers anyway (with a comparison table) so this comes in handy!