Page 1 of 2 Not long ago (October, 2005) Microsoft made an interesting announcement on their IEblog, that certain popular CSS hacks and filters are going to cause trouble when Internet Explorer 7 hits town.
The new browser version will support more CSS selector types, as well as combinators. Some of these are currently being used as convenient ways to hide rules from IE6/Win and earlier versions, or to feed property values to browsers that do recognize and read the more advanced CSS that IE/Win can't currently handle. This method works because browsers are supposed to ignore any selectors or rules that they do not recognize, and IE/Win fails to support quite a few advanced selectors that other modern browsers have supported for some time.
Well, when it's released, IE7 will start reading such selectors and rules, and then very bad things might happen when people using IE7 visit your pages, assuming of course that these hacks inhabit those pages. Obviously, we all need to start cleaning up these soon-to-be "bad hacks" right now if we want to avoid user and client complaints. So sit back as we describe how to go about it.
In this article, when we write about the different Internet Explorer versions, we will do our best to make clear distinctions between which version or versions we are talking about. To help reduce confusion, however, if IE/Win is specified, we are speaking of versions 6 and earlier. IE7 will always be referred to as IE7. If we use just IE, that will refer to all Windows versions of Internet Explorer, including IE7.
A few courageous coders eschew hacks entirely in favor of pure, clean code, and "let the chips fall where they may." They are the brave few that point the way to the future. But the realities of the marketplace deal very harshly with such an attitude. Then there are coders who have holsters filled with CSS hacks, and whip them out every time IE/Win shows even a slight variance. Finally there are the ones (like us) who try to use careful construction, limiting the problems, and only hack as a last resort. In the latter case, the primary reason for hacking IE/Win is to induce layout in specific elements. (Also see this CMX tutorial.) Without the ability to trigger this "property," most complex CSS layouts become unworkable in IE/Win, and we are stuck with very primitive page designs.
The most common and trouble free method to trigger "layout" in IE/Win is to employ the Holly hack, but this hack will be directly impacted by the changes in IE7. We'll get to that in a moment, but first let's examine the IE7 modifications which will most commonly affect the use of CSS hacks, and then see what can be done to correct things so problems won't occur when the time comes.
Before we go further, let's review some terminology. The W3C CSS2.1 specification explains selectors and combinators in the following way:
"A selector is a chain of one or more simple selectors separated by combinators. Combinators are: whitespace, ">", and "+". Whitespace may appear between a combinator and the simple selectors around it." And, "A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order."
The first newly supported combinator (also frequently called a selector, which is only partially accurate) will be the Child combinator, designated by a ">" symbol placed between simple selectors. An example of this is #leftcol>p {color: blue;}, which would make the text blue in all paragraphs that are direct children of #leftcol.
But if #leftcol contained a DIV, and that DIV contained a paragraph, the above selector #leftcol>p would not make that paragraph's text blue, because the Child combinator, unlike the more frequently used Descendant combinator (a simple space), selects only direct children, not just any more deeply nested descendants of the element shown to the left of the ">" symbol.
The other newly supported combinator will be the Adjacent Sibling combinator, designated by a "+" symbol similarly placed between simple selectors. While the Child combinator targets direct children of another element, the Adjacent Sibling combinator targets an element that directly follows, but is separate from, a previous element. Thus, with the rule h2+p {color: blue;}, you would be able to make the text blue for any paragraph that directly followed an H2 element.
Those two combinators will afford greatly desired utility when enough users have IE7 installed. But meanwhile, some coders have taken advantage of IE/Win's lack of support for these combinators to write selectors incorporating them. When currently available versions of IE/Win (IE6 and below) see one of those CSS symbols, they fail to recognize it, and think that the syntax is incorrect. Therefore, they correctly ignore the rule.
A typical trick is to use the Child combinator between html and body, followed by a simple space (descendant combinator), and then the real target of the rule. It's written as html>body p {color: blue;}. Since the BODY element is always directly contained inside the HTML element, the first part of the selector should always work, except in IE/Win, which can't read the Child combinator and thus ignores the entire rule.
So the above "hacked" (but perfectly valid) rule would make all paragraphs blue in all modern non-IE/Win browsers, and IE/Win itself will ignore the rule. But not IE7! That browser will read the Child combinator and will color the paragraphs blue as well. Such a color variance is not too damaging, but what if the hack involves a width or height that IE/Win must not see? In that case, IE7 might shatter some innocent layout, causing your client to turn blue, or maybe deep purple.
The following code block shows how this rule has been used in combination with a ruleset that IE/Win can read.
An IE/Win Hiding Method
body p {
font-family: Arial, sans-serif;
font-size: 100.01%;
background: #fff;
color: red; /* for IE/Win */
}
html>body p {color: blue;} /* for non-IE/Win */
Code Block 1
As we mentioned, supplying a different text color rule to IE/Win browsers and having IE7 display the same color that non-IE/Win browsers do, is probably not going cause many problems. But what if we need some adjustment to be supplied to IE7 as well as IE/Win? The child selector method of hiding will no longer work for the new browser. We need to find a new way to hide rules from IE/Win that will also prevent IE7 from viewing the rules, and we need it sooner rather than later.
Keywords
CSS, IE7, css hacks, IEblog, combinator, selector, child combinator, child selector, adjacent sibling combinator, adjacent sibling selector, descentant combinator, descentant selector, conditional comments, Tan hack, star html hack, mac hack, mac hiding hack
