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.
Related posts:
- 5 Reasons to Avoid CSS Hacks and Conditional Stylesheets CSS hacks and conditional style sheets can cause more problems...
- 10 Fixes That Solve IE6 Problems Is IE6 causing you grief? Fortunately, Craig has 10 possible...
- How to Run IE6, IE7 and IE8 on Windows 7 HOME The excellent XP Mode is only available for Windows 7...
- How to Override Inline CSS Styles Inline CSS can be applied to any HTML element using...
- Support for IE6: It’s all About Accessibility With the release of IE8, there's excitement in the air...
My biggest fear is that they only fix “most” or “some of the bugs, but then don’t leave in the things that we use to work around the limitations.
Maybe they could just use the gecko engine when rendering in strict mode =)
September 2nd, 2005 at 7:40 pm
My god, I just might cry. This is the best news I’ve heard in a long time :)
Etnu>> Don’t forget that IE has built in support for conditional () comments: http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp You will always be able to single out IE.
September 2nd, 2005 at 10:15 pm
Here here!!
September 3rd, 2005 at 10:59 am
This is all good news about the bug fixes, but how long do people reckon it will take before all IE6 users make the move to IE7?
As soon as IE7 is released its popularity will of course be huge, but I can see a large proportion of users staying with IE6. With these two browsers, plus Firefox, Safari and Opera dominating the browser market, how easy is it going to be to create pages that are fully supported and render perfectly in all of these? Not very, is my reckoning.
September 3rd, 2005 at 1:31 pm
Conditional comments are ok, but they require changing the markup, which isn’t always as easy to do. If you’re lucky, and are workign with a system where the output comes from a templating system of some sort, it’s easy, but if you’re not — prepare to cry!
The majority of IE6 users who are running XP (I think 2k can upgrade to IE7 as well, but I’m not sure on that one) will upgrade to IE7 within a year, because it’s easy to do and doesn’t fundamentally change anything. I run a group of several thousand websites that represents pretty “typical” web users, and roughly 85% of our visitors are using IE6; about 2-3% are using older versions of IE (we don’t really care about these users that much, and don’t don’t bother testing extensively on these browsers).
Of that 85% of users running IE6, 80% are running XP, and about 12% are running 2k (older versions of windows combined = ~ 7-8%).
If IE7 is released in November, I’d be willing to bet on a 50% saturation by this time next year, and it’ll probably control about 80% of the browser market within the next 3 years (hopefully the other 20% will belog entirely to Gecko / Safari / Opera)
September 3rd, 2005 at 2:32 pm
> Maybe they could just use the gecko engine when rendering in strict mode
Well, they could but wouldn’t that be embarrassing for Microsoft…
Wouldn’t it though :lol:
September 3rd, 2005 at 3:22 pm
i didn’t understand. If the new ie removes (in strict mode) bugs like the “imaginary root element before the element” and the child selector support, then how our todays sites will behave if they use these hacks?
September 3rd, 2005 at 11:31 pm
When is IE7 supposed to be launched anyhow? How will they launch it? via Windows Update?
September 4th, 2005 at 9:05 am
Windows Update would be my best bet, and Microsoft’s optimal solution.. that way they could place IE7 under the “Critical Updates” category for the applicable OSes. Easy fix for people. ;)
It’ll be shipped with Windows Vista of course, and additionally be made available for download on IE7’s website.
September 4th, 2005 at 8:15 pm
In theory, IE7 will behave the same way current standards-compliant browsers do: they will ignore the hacks that are currently used to target IE6, and use the CSS code written for browsers like Firefox and Safari.
September 4th, 2005 at 9:42 pm
Even so, I still think that you’re looking at at least a 3-year window before we start seeing IE7 as the predominant browser, and IE6 being relegated to the “seldom used” category. Would it be too much to hope that FireFox will have a majority of the market share by then?
September 5th, 2005 at 1:38 pm
Wishful thinking… What no one has brought to light is that IE7 in it’s self will no doubt introduce even more CSS bugs, despite it attempting to solve those ones Microsoft missed with IE6 :lol:
I just don’t know, like with Microsoft and IE, it’s a never ending vicious circle :(
Same tune, just a different dance?
September 5th, 2005 at 2:55 pm
Oh no! more IE :)
September 6th, 2005 at 4:15 am
It’s all good that they’re still fixing CSS bugs. Are there any words on the DOM yet?
They could stop fixing CSS all together starting here and moving forward and I’d still be happy with the improvements.
September 6th, 2005 at 1:24 pm
When we talk about people moving on to IE7, bear in mind that this will only affect the number of people using IE6, not the people using IE5.5 and below. Whatever reasons they have for that will not change, so while this is all good news in theory, in fact it actually makes our lives harder.
I seem to recall hearing that IE7 would not be available for Win2k – that is a powerful argument to downgrade to XP, but not powerful enough for me, so I guess my IE7 testing is going to have to be restricted to working hours!
September 14th, 2005 at 11:27 am
Maybe we need a “Spread IE7″ site much like Firefox has ;P
The removal of the * html hack interests me. While it doesn’t affect me since I tend to use the child-selector rules anyway, a lot of developers wanted the next iteration of IE to keep this hack for backwards compatibility. Yeah, IE7 still supports it but not in strict mode.
Still, at the end of the day it’s all good.
September 14th, 2005 at 7:18 pm
I found that you can now do something like the following to give a visual clue on buttons in IE7 (FF and O):
input[type=text] { color :#0099FF; border : 1px double #CCCCCC; background-image: url(../images/button_bg.png); } input[type=text]:hover { color :#0000FF; }I could not make it work on the button element though. Can anyone comment?
November 7th, 2006 at 6:08 am