I can also say that an equal number are trying not to vomit at the idea of having to go back and seek out every style sheet they wrote that may break in the light of the new compliancy. Thinking about it makes my head hurt a little, and if you’ve ever written sloppy code (which we all have) or had to delicately balance a design with a few non-compliant hacks, I’m sure you’ll be reaching for the Advil, too.
Internet Explorer, while being one of the first browsers to incorporate support for CSS, has been the last to really get on board in regard to compliancy. CSS developers know that of all the browsers that they need to usually come up with workarounds while coding, Internet Explorer is the most buggy, as well as the most frustrating, and needs the most attention when it comes to CSS. And it is because of these bugs that workarounds have been implemented that may now cause these brilliant CSS hackers to cringe with the fixes incorporated in IE 7.
In the latest version of IE, Microsoft has fixed many of the bugs in IE that create problems for CSS. In this article, I want to look at some of the bugs that IE has contained relating to CSS, what they are, and how version 7 addresses these issues. You can only currently download a copy of IE 7 beta for development purposes if you have an MSDN developer license, but (at the time of this writing) supporters indicate that the release of IE 7 to the public may happen as early as by the end of January, 2006. I was able to get my hands on a copy for development purposes, and I have to say that thus far, I am fairly impressed.
I’m a big supporter of CSS compliant code, and luckily, I’ve never relied upon CSS hacks. Perhaps it is because I have a slight bit of OCD (Obsessive Coding Disorder) where I like my code neat and clean, nicely grouped into like sections and commented accordingly, and don’t ever want to have to think about it again once it’s completed, unless I decided I wanted to change a font color or something. I for one am happy that I won’t have to keep checking my designs in multiple browsers, although I know that currently everyone else in the world that uses IE (besides the beta testers, that is) won’t have a copy of IE 7 just yet.
The following list regarding the bug fixes where CSS is concerned you may have already seen once or twice, but I’ve taken the time to research them a bit and explain to you what they are and what they do to your once happy code. Therefore, my list will be quite different from those you’ve seen, and I’ve compiled the descriptions all into one place for your convenience. The sheer reason for this is that once you read the descriptions, you remember that particular problem, whereas with the sometimes cute or ominous nicknames these bugs have been given, you may not have a clue what Microsoft may have been referring to. I have left out those where I couldn’t find an explanation, but re-included them further down in the article.
There are still many reports around the Web about Internet Explorer bugs, and while I wouldn’t expect that they would fix each and every one of them (why not?), it looks like the vast majority of them are going to be corrected. Included in the list from MSDN were these for which I couldn’t find a description, and haven’t experienced personally: moving viewport scrollbar outside HTML borders, the 1px border style, and losing the ability to highlight text under the top border.
I would like to point out something in particular about the asterisk selector used to give explicit rules to IE. The root node selector has long been used to create rules that only work in IE, such as with the use of universal selectors, like the asterisk. In IE 7, since many of the rules that didn’t render correctly had to be addressed, these rules are now evident, unlike in previous versions of IE. The problem is now created for style sheets that utilize the child selectors or the universal selectors that contain these IE-specific rules, because they will have duplicated or merged rules that were never intended to be used this way. As you can imagine, this will create a genuine disaster for those coders.
Initially, reports were made by Microsoft that child selectors, pseudo-classes and universal selectors were not going to be supported still in IE 7, but those reports are changing. We still don’t ultimately know what will be in the final version, as it is still in beta testing, but what we can see is that a massive amount of bugs with regard to CSS are going to be fixed. While this is good news to most, those that have implemented workarounds may not be so thrilled.
Microsoft has also rethought the way IE handles pseudo-classes. IE uses a very strict interpretation of pseudo elements in the parser, and this would cause certain constructs to be disregarded. Any pseudo-element had to be the very last thing in the selector in versions prior to IE 7.Â
The CSS2 specification was interpreted by IE in such a way that there can be only one pseudo-element per selector, and it must appear in the last simple-selector within the selector. Because of IE\'s strict interpretation, in the event of any non-whitespace character or token after a pseudo-element, it wouldn\'t render correctly, if at all, and an error flag would be thrown into the rule. In IE 7, the error flag is more carefully applied, even though multiple pseudo-elements and pseudo elements in simple selectors beginning a complex selector will still fail. According to Microsoft, this is still the correct interpretation of the standards regarding pseudo-classes.
There are other issues that IE 7 will support, like fixed positioning and child, adjacent, attribute, and first-child selector tags, fixes for any :hover elements, and background-attachment: fixed on all elements, not just body element.
What about support for CSS 3.0?
While the question about IE 7 being compliant with CSS 3.0 is premature, we are still anxiously waiting to see how IE 7 measures up with CSS 2.1 compliancy. Ultimately, while I can hope that it will support some of the standards in CSS 3.0, I still shake my head in amazement that it has taken Microsoft this long to become compliant with the current standards. So I am not going to hold my breath, especially since CSS 3.0 has yet to be released.
Hopefully, since IE 7 has been completely rewritten from the ground up, we can only assume at this point that it can only do a better job this time around, and for CSS 3.0 once it has been released.