Microsoft has announced several more fixes for IE7 that will have CSS experts dancing in the aisles.
A long-standing bug in Internet Explorer creates a “root node” that sits above the html element in the document tree, allowing for selectors that begin with “* html” to be used to target that browser only. Conversely, because IE doesn’t currently support the child selector (>), rules that begin with “html > body” can be used to target all browsers except IE.
In IE7, the root node selector is gone and the child selector is fully supported, enabling the browser to use all the same CSS rules as other current browsers. Assuming Microsoft gets the majority of its other CSS bugs fixed (of which I am cautiously optimistic), these two fixes will make it easy for designers to preserve backwards compatibility with IE6 and earlier while taking full advantage of IE7.
A more subtle fix that will affect much fewer designers is full support for multi-class selectors. In an HTML document, a single element can be assigned multiple classes by separating their names by spaces (e.g. <div class=”important note”>). According to the CSS standard, if you want to match elements that have a specific combination of classes (e.g. divs with both the ‘important’ and ‘note’ classes), you can list them separated by dots in your CSS selector (e.g. div.important.note). IE6 currently ignores all but the last class name in such a selector (e.g. div.important.note will match any div with the ‘note’ class), possibly applying the rule to elements that shouldn’t have it applied. IE7 will fix this.
All of these fixes will affect IE7 strict mode only. The browser will continue the current IE6 behaviour when running in quirks mode. But there is one more fix that will affect the browser in both strict and quirks mode: correct parsing of pseudo-element selectors. IE6 doesn’t support pseudo-element selectors like :first-letter unless they are the very last thing in a CSS selector and are followed by a whitespace character. If the pseudo-element is followed by a class or pseudo-class (e.g. div:first-letter:hover), or if no whitespace is left after it (e.g. div:first-letter{ float:left; }), the entire rule is ignored. By correcting these parser bugs, IE7 will ensure that pseudo-element rules work more consistently with less fiddling.
Kevin YankKevin Yank is an accomplished web developer, speaker, trainer and author of Build Your Own Database Driven Website Using PHP & MySQL and Co-Author of Simply JavaScript and Everything You Know About CSS is Wrong! Kevin loves to share his wealth of knowledge and it didn't stop at books, he's also the course instructor to 3 online courses in web development. Currently Kevin is the Director of Front End Engineering at Culture Amp.
