Please read: what is new here is that Internet Explorer actually does load a file. Which you can then fill with Internet Explorer specific rules. It really has a strange parsing bug. So now read the rest of the post, completely, if you like.
Simon Pieters of the HTML5 DOCTYPE fame discovered a really nice @import hack for Internet Explorer. The idea is based on a parsing bug in Internet Explorer. Quite nifty. You have this rule:
@import url(.css) all;
The following browsers will correctly load the .css file:
The following browsers will load a file named url(.css) all:
Fun, isn’t it? NN4 and IE4/Win will not load any file so it degrades gracefully. You got to love how CSS parsing in Internet Explorer for Windows works.
And now wait to see whether this still applies to IE7 :).
~Grauw
Cool, but it looks like somebody else has already discovered this.
Cool, but it looks like somebody else has already discovered this.
Unless I misunderstand it, that page merely says that this rule "doesn't work" in IE. I figured out that it does work, just incorrectly. IE treats this rule as if it were:
@import url("url(.css) all");I saw you use a another @import-hack at http://www.overheid.nl
I was wondering: shouldn't this be considered an inline style?
It is an inline style rule. For that site it was quite an effective way to hide the style sheet from IE5/Mac and other ancient browsers. First using the link element and later from that style sheet using @import is an option as well, but when such an additional server hit is not neccessary I rather not do it.
However, per definition @import is part of a style sheet which can be either inline or external.
Tell the IE team to fix this. This is even worse than the old IE hacks…
It's not exactly new. :)
I used a similar principle on my now defunct blog 18 months ago:
@import url(/css/screen.css) screen,projection;
Then I used conditional comments to include a separate style sheet for IE/Win.
Yeah, but shouldn't you leave file extensions off of urls, Anne? For some reason I think leaving the file extension off of .css would cause a bit of a problem... ;)
Tommy, what is new here is the discovery that Internet Explorer does try to load a style sheet. How hard is that to understand? Or are you suggesting that it was done before?
dolphinling, I just copied the example from Simon. I agree with you though. File extensions be banned.
Ah, so you actually name a file that way. I see. Missed that one. Sorry.
Not meaning to sound sour or anything, but I have been using this hack for > 2 years. :)
These parsing bugs are cool and all, but aren't conditional comments the right way to load IE-specific style?
I still like the Hack-free CSS for IE by Jeffrey Zeldman best.
I still like the Hack-free CSS for IE by Jeffrey Zeldman best.
For the sake of accuracy I'll point out that that's Arve Bersvendsen, not Jeffrey Zeldman. The latter was referred to by the former as having reported that some CSS hacks no longer passed muster at the W3C CSS Validator, nothing more. Of course, anyone who's ever tried to validate a complex stylesheet (even one that doesn't use hacks) knows that the thing can be very broken without warning.
my bad
Thanks for the clarification
I noticed an (little?) disadvantage using those @import-hacks: IE will look after a file called 'url(.css) all'
Since there is no such file at the server the errorlog of the server will be full of messages like ' File does not exist: '. Correct me if i'm wrong
One could consider this a (minor) performance loss
The idea is that you have such a file with Internet Explorer specific rules. Makes you wonder how hard it can be to read a post and follow some of its links. O well.
It's not terribly clear what you meant (or at least wasn't to me until a few rereads). Two files .css (which isn't very easy to make on a Windows machine might I add!) & url(.css) (which I believe is also difficult to create, becuase of the lack of extension) (both I know are possible, just difficult...).
Anyway, again, this is just relying on parsing errors in the engine. Urm, I thought WaSP and the IEBlog just announced to stop using hacks to target browsers, in favour of "supported" conditional HTML elements. So I'm not sure the use in this new hack announcement...
Thanks Anne for the news. Since there is no feed for Simon Pieters' site, keep them coming.
One question that someone already asked: does the hack work on IE7? Idon't have a MSDN account, so I can't test, but Simon says IE5+...
trovster: Ususally Windows users would create a dot-extension-only file on a Unix server, which you can easily access via FTP, and download it on any Windows 9.X machine.
As for the url(.css) all file, it is very easy to create on a Windows machine, just, well, do it.
trovster: Ususally Windows users would create a dot-extension-only file on a Unix server, which you can easily access via FTP, and download it on any Windows 9.X machine.
Or: ren file.css .css in the command prompt.
OK, I forgot files don't have to have extensions and are created just like any other file. Like I said, which isn't very easy
, as in; as easy as creating normal filenames. I know how to do it, but others might not.