additions...
...web design...
prepared for IE7 (and IE8)…
Read the other day on the IEBlog about the demise of CSS hacks and broken pages. Personally I think they failed to make a case, but some clean-up may be needed on badly prepared sites. That doesn't include this site, of course.
I see the arrival of IE7 as an opportunity to put IE6 amongst the dead browsers. “Hacking the dead” is a great pass-time activity for bored web carpenters – once the living have received proper attention.
It doesn't matter whether people use a browser/version or not. The question is whether or not it's updated anymore and if that particular browser/version can be safely separated from other browsers/versions. IE6 is there now, based on what I already know about IE7. So I hereby declare IE6 dead and will subsequently hack its broken rendering to pieces.
I'm already feeding IE6 all corrections it can make any use of, through a separate stylesheet. I'm already “hacking the dead” you might say. Nothing unusual in that, as that's how it's been done for a long time all over the web. I used to recommend 'conditional comments' for that purpose.
<!--[if lte IE 6]>
<![endif]-->
...gone...
Now, web developers who look at the 'source code' (who else would care to look at it) may notice that there's no 'conditional commented IE/win only' stylesheet linked in to this page. I'm taking my chances and have dumped the separation into my basic stylesheets – exploiting a parsing bug.
There wasn't any need for this change, as everything was working just fine. However, I don't need an excuse for doing anything on my own site, so I just did it because I wanted to.
Whether or not 'conditional comments' are the way to go, is up to each web developer to decide. I tend to say “not”, but not very strongly. I don't like adding extra code to my pages just to fix a browser, unless there's no other alternative – and I think I've found such an alternative.
I generally prefer CSS-filtering, and the solution I've chosen is working well in IE6 (and IE5+/win). I have also developed strategies that'll keep it working in the future – no matter what IE7 makes of it.
Update [03.nov.2005]:
Looks like others are also seeing some problematic side-effects when working with those 'conditional comments'.
Nothing new here, and no new solutions either, I'm afraid.
— Mezzoblue:
IE7 Conditional Comments
separating styles with valid CSS… the @import hack.
Nothing is left to chance, so once IE7 arrives it will be fun to see how well prepared it is for the following.
-
All browsers will see this:
@import url(ag2c_con.css) all;
...which is a quite ordinary and perfectly valid import-rule that IE6 makes a mess of. Nothing new there.
-
All the good browsers will load a file named:
ag2c_con.css
...which only contains a css-comment at the moment.
See the actual stylesheet. -
IE6 (and IE5, 5.5) on the other hand, have a parsing-bug and will try to load a file named:
url(ag2c_con.css) all
...so that's what IE6 get when it's around this site-section. Plenty of styles for IE/win in that stylesheet, and it doesn't matter that it has a peculiar name and no extension.
See the phony stylesheet for IE/win.
So what will happen when IE7 comes around? I have no idea and will just have to wait until it happens—like everybody else. Nothing will go wrong because of the '@import-rule' though.
You don't believe me? Oh well, if you're not thrown off by the absurdity this bug-riding is based on, then look at the following possible outcomes.
-
IE7 has the same 'import-bug' and ends up on:
url(ag2c_con.css) all
...which doesn't matter since it will ignore:
* html
...that's preceding all selectors. IE7 isn't supposed to understand that selector when in 'standard mode', and since I use an 'xml declaration' that'll put IE6 (but not IE7) into 'quirks mode', it looks like I've covered all bases. So if IE7 is in need of corrections it'll get some entirely new ones in that same stylesheet – without that old selector-hack.
-
IE7 doesn't have the same 'import-bug' and ends up on:
ag2c_con.css
...where IE7 either will have to do with what all the good browsers get, or get its own set of corrections.
Either way: IE7 will not see styles/corrections made for its predecessors. That's all we can do for it now, as we have to see the finished version before we can judge it.
Update [10.apr.2006]:
Latest IE7 versions do pick up the phony stylesheet, so it looks like the @import hack is still working.
Update [26.jan.2007]:
IE7 makes full use of the phony stylesheet, and I have revised this article slightly to keep up with the
latest changes in how I use the @import hack on this site.
Update [08.mar.2008]:
IE8 does not pick up the phony stylesheet, so the @import hack serves its purpose perfectly
and will eventually fade into oblivion without disturbing new and improved IE/win-versions. One
can not ask for more of a hack.
So you have seen this little trick before? So have I, but I needed the list and confirmation found on Anne's Weblog: New Internet Explorer @import hack about which browsers it targeted/avoided before making serious use of this hack.
Now that I'm convinced it is a genuine Trident (IE5+/win) only 'parsing bug', I couldn't see any reason not to use it. Others may prefer “the usual”, and probably safer, 'conditional comment'.
how progressive CSS should work…
There are “CSS hacks” and there are “CSS hacks”. Some prefer to separate them into “browser-specific CSS hacks” and “progressive CSS”. The difference may make all the difference, but being prepared may make both hack-versions work just fine.
-
If I use CSS-selectors now that IE6 doesn't understand, then nothing wrong should happen when IE7 comes around. If IE7 does understand these selectors, then it should also act properly and do as it's told.
-
If I use CSS-selectors that IE6 does understand but which IE7 ignores, then it should also act properly and ignore the entire rule.
-
If I use CSS-properties now that IE6 doesn't understand, then nothing wrong should happen when IE7 comes around. If IE7 does understand these properties, then it should also act properly and do as it's told. Otherwise it should ignore unknown properties.
So, I'm not particularly scared by the arrival of an improved version of IE/win. The team behind it just has to get their act together and make it work properly.
I won't spend much time on the whole hacking-issue while waiting for IE7. I won't use it for anything but testing anyway. All the other browsers are constantly upgrading and improving their CSS-support, way beyond what IE/win can do, and that's much more interesting to this web carpenter.
conclusion…
A hack – any hack – is only as reliable as it is tested out to be at any one time. That goes for the @import hack too. Expect it to break with the release of a new IE/win version – one day.
“Progressive CSS” is the way to go, in the hope that all browser-vendors do their job and secure proper support of CSS in the not too distant future. All our hopes for that future may not be met, but it's better than having no hope – and be afraid of the future.
sincerely
Hageland 26.oct.2005
last rev: 08.mar.2008
additions...