How to link a conditional style sheet without access to the head

Question

I am working in an enterprise CMS (Autonomy/Interwoven Teamsite) that does not give me direct access to the head of a page. I can only link style sheets and add external js files. Normally I would add a conditional comment to link an ie6/ie7 stylesheet. In some searching I've found a way to target ie with conditional commenting inside js and specific ie versions based on the jscript version

in js:

/*@cc_on
    document.createStyleSheet("/css/all_ie_fixes.css");
    /*@if (@_jscript_version = 5.6)
        document.createStyleSheet("/css/ie_6.css");
    /*@end
@*/

This seems like an ugly hack. Any suggestions?

Answer 1

If you're doing anything at all with IE6, then your code will be full of ugly hacks. Future maintainers of your code will know this and sympathise, rather than curse your name. If it works, then go with it.

Answer 2

Try Conditional CSS:

// Conditional block example  

[if IE] @import('ie.css');

Answer 3

There's probably no non-ugly way to do this. That said, using the user-agent detection provided by a library like YUI (relevant YUI doc) will arguably result in slightly clearer and more explicit code than the above hack. Something like:

if (YAHOO.env.ua.ie >= 6 && YAHOO.env.ua.ie < 7)
{
        document.createStyleSheet("/css/ie_6.css");
}

Ugly, yes. But it's pretty clear what the intent is.

Answer 4

It's frowned on by some people but there are css hacks that target IE, and don't require conditional comments.

For example only IE6 will read this style:

* html p {color:red;}

IE6 is too stupid to read this one:

html>body p {color:red;}

A quick google search turns up many others: http://www.webdevout.net/css-hacks#in%5Fcss-selectors